7 ms·

I remember a CSS class in some enterprise software I was working on several years ago: /* bold */ .bold { font-weight: bold !important; } It has bec

I remember a CSS class in some enterprise software I was working on several years ago: /* bold */ .bold { font-weight: bold !important; } It has became my favourite real-world example of CSS misusage :)

jdudek 11y ago
One can argue if it’s a misuse or not. It’s quite handy to have such utility classes that rely on !important and can be used in markup directly. I have plenty of those in my stylesheets. [1] http://davidtheclark.com/on-utility-classes/ http://davidtheclark.com/on-utility-classes/
- jqm 11y ago
  Like your article. Especially agree with this phrase "authoring and maintenance considerations should trump kilobyte savings" (within boundaries of course).
thirdsun 11y ago
I agree with jdudek here. While I'd never use important, I usually have a lot of small utility classes like bold, italics, uppercase, truncated etc. I don't see what's wrong here - they come in handy when you need a one-time style alteration.
- robmcm 11y ago
  The intentions are baked into your class name, if you were to change the style later and favor underlining rather than bold text, it would require a change to the HTML (or some rather misleading code). The same could be said for a mobile device, where italic could be hard to read, so, say a different font is used. Again this would require changes to the HTML and breaks the separation of style from markup. It doesn't particularly offend me, but I though it would be worth pointing out why some people disagree with this style of class naming.
  - moron4hire 11y ago
    I once semi-started questioning whether I had gone colorblind or taken acid or something after having to work on a page that had style classes named after cerrain colors like "red", or "yellow", but there were no such colors on the screen. Incidentally, they had also ended up being reused to do some position and size styling, as well. Just complete malarky. I think of this stuff as the equivalent of walking into a job site and finding a dozen surge protectors daisy-chained and clustered together, with everyone there oblivious to the problem. "What? If it works, it works. Don't criticize."
  - talmand 11y ago
    There's nothing fundamentally wrong with having such utility classes. It could have a distinct use, especially for Javascript. It's just you shouldn't use such a class solely for design purposes, for the reasons you point out.
    - robmcm 11y ago
      Yes using something like "strong" rather than "bold" as they did in the HTML spec. For custom sections where you want to add styles you should consider what you are styling such as an "event", "highlight", "keyword", "first", "last" etc. Although the HTML5 tags are a lot more descriptive, numerous and extensible now, so css classes may not be the only option to add style descriptors to your content.
- deleted 11y ago
  [deleted]
- Lawtonfogle 11y ago
  Is there an accessibility issue? You are using style to bold text, but bolding text is almost always a semantics issue of wanting to emphasize the text, not merely make it look different just for style reasons. So someone with a screen reader would have a far more difficult time getting the correct semantics from this page. Now I'm not saying one should go out of their way to ensure every single accessibility technology can use their site, but when the more accessible way of emphasizing text is quite easy to use, I could see saying that using style for semantics is wrong.
  - talmand 11y ago
    If you want to actually emphasize a bit of text then you should wrap it with the appropriate tags. Using font-weight is usually just a design decision for the visual, not necessarily to emphasize the text.
tuzemec 11y ago
It's quite common to have such classes if you work with some kind of CMS system. In one of my previous companies we had bunch of similar classes that allowed basic layout adjustments (like margins, paddings, font-sizes). It's quite handy if you want to just edit the html and do not touch the css files at all.
robodale 11y ago
Crazy off topic, but similar misusage: Vendor-installed SQL server database. In this DB is a table called tblYesNo with one column called YesNo. In the table are the following two rows: YES NO
- duskwuff 11y ago
  INSERT INTO tblYesNo VALUES ('FileNotFound'); -- http://thedailywtf.com/articles/What_Is_Truth_0x3f_ http://thedailywtf.com/articles/What_Is_Truth_0x3f_
talmand 11y ago
That totally depends on your CSS pattern. But I think the comment was overkill.
dahart 11y ago
Others have mentioned this is not necessarily a mis-use. I'll add that what I see here is potentially an override style that can be toggled dynamically. In that case, this may be the right thing to do, the !important declaration lets this rule collide and win over conflicting font-weight rules without having to keep track of which order the conflicting rules were declared in; they might be in separate files. The canonical .hide class I see many places, and use myself, has the exact same structure, and it is often better to do hiding this way than to toggle visibility or display, because it's a pain and error prone to toggle display directly on mixed display mode elements, e.g., inline-block, flexbox, etc., and visibility doesn't reflow. So, don't be so sure this rule exemplifies mis-using css. It might, but without the context, it's pretty hard to draw that conclusion.
- talmand 11y ago
  I agree, it is much easier and consistent to toggle a class with Javascript than to mess with the style attribute. For example, toggling one class in three is easier to deal with than removing/adding one property in three in a style attribute.

jdudek 11y ago

One can argue if it’s a misuse or not. It’s quite handy to have such utility classes that rely on !important and can be used in markup directly. I have plenty of those in my stylesheets. [1] http://davidtheclark.com/on-utility-classes/ http://davidtheclark.com/on-utility-classes/

jqm 11y ago
Like your article. Especially agree with this phrase "authoring and maintenance considerations should trump kilobyte savings" (within boundaries of course).

thirdsun 11y ago

I agree with jdudek here. While I'd never use important, I usually have a lot of small utility classes like bold, italics, uppercase, truncated etc. I don't see what's wrong here - they come in handy when you need a one-time style alteration.

robmcm 11y ago
The intentions are baked into your class name, if you were to change the style later and favor underlining rather than bold text, it would require a change to the HTML (or some rather misleading code). The same could be said for a mobile device, where italic could be hard to read, so, say a different font is used. Again this would require changes to the HTML and breaks the separation of style from markup. It doesn't particularly offend me, but I though it would be worth pointing out why some people disagree with this style of class naming.
- moron4hire 11y ago
  I once semi-started questioning whether I had gone colorblind or taken acid or something after having to work on a page that had style classes named after cerrain colors like "red", or "yellow", but there were no such colors on the screen. Incidentally, they had also ended up being reused to do some position and size styling, as well. Just complete malarky. I think of this stuff as the equivalent of walking into a job site and finding a dozen surge protectors daisy-chained and clustered together, with everyone there oblivious to the problem. "What? If it works, it works. Don't criticize."
- talmand 11y ago
  There's nothing fundamentally wrong with having such utility classes. It could have a distinct use, especially for Javascript. It's just you shouldn't use such a class solely for design purposes, for the reasons you point out.
  - robmcm 11y ago
    Yes using something like "strong" rather than "bold" as they did in the HTML spec. For custom sections where you want to add styles you should consider what you are styling such as an "event", "highlight", "keyword", "first", "last" etc. Although the HTML5 tags are a lot more descriptive, numerous and extensible now, so css classes may not be the only option to add style descriptors to your content.
deleted 11y ago
[deleted]
Lawtonfogle 11y ago
Is there an accessibility issue? You are using style to bold text, but bolding text is almost always a semantics issue of wanting to emphasize the text, not merely make it look different just for style reasons. So someone with a screen reader would have a far more difficult time getting the correct semantics from this page. Now I'm not saying one should go out of their way to ensure every single accessibility technology can use their site, but when the more accessible way of emphasizing text is quite easy to use, I could see saying that using style for semantics is wrong.
- talmand 11y ago
  If you want to actually emphasize a bit of text then you should wrap it with the appropriate tags. Using font-weight is usually just a design decision for the visual, not necessarily to emphasize the text.

tuzemec 11y ago

It's quite common to have such classes if you work with some kind of CMS system. In one of my previous companies we had bunch of similar classes that allowed basic layout adjustments (like margins, paddings, font-sizes). It's quite handy if you want to just edit the html and do not touch the css files at all.

robodale 11y ago

Crazy off topic, but similar misusage: Vendor-installed SQL server database. In this DB is a table called tblYesNo with one column called YesNo. In the table are the following two rows: YES NO

duskwuff 11y ago
INSERT INTO tblYesNo VALUES ('FileNotFound'); -- http://thedailywtf.com/articles/What_Is_Truth_0x3f_ http://thedailywtf.com/articles/What_Is_Truth_0x3f_

talmand 11y ago

That totally depends on your CSS pattern. But I think the comment was overkill.

dahart 11y ago

Others have mentioned this is not necessarily a mis-use. I'll add that what I see here is potentially an override style that can be toggled dynamically. In that case, this may be the right thing to do, the !important declaration lets this rule collide and win over conflicting font-weight rules without having to keep track of which order the conflicting rules were declared in; they might be in separate files. The canonical .hide class I see many places, and use myself, has the exact same structure, and it is often better to do hiding this way than to toggle visibility or display, because it's a pain and error prone to toggle display directly on mixed display mode elements, e.g., inline-block, flexbox, etc., and visibility doesn't reflow. So, don't be so sure this rule exemplifies mis-using css. It might, but without the context, it's pretty hard to draw that conclusion.

talmand 11y ago
I agree, it is much easier and consistent to toggle a class with Javascript than to mess with the style attribute. For example, toggling one class in three is easier to deal with than removing/adding one property in three in a style attribute.