Hacker News Reader

Comment by pkorzeniewski | Hacker News Reader

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 :)

View on HN

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.

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.

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."

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.

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.

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.

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.

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/

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

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.

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.

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

  INSERT INTO tblYesNo VALUES ('FileNotFound');

-- http://thedailywtf.com/articles/What_Is_Truth_0x3f_

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.

That totally depends on your CSS pattern.

But I think the comment was overkill.

Reply on news.ycombinator.com