Hacker News Reader

Comment by trixn | Hacker News Reader

I don't like that concept of essentially inlining styles in the class attribute. It is just a misuse of html classes.

Class names should be used sparingly and describe the semantics of an element rather than its visual appearance. It should be something like class="button submit disabled" instead of class="f6 link dim br1 ph3 pv2 mb2 dib white bg-black".

If anything these styles should be exposed as sass mix-ins that you can use in your own styles. So you have a named set of style mix-ins that do not pollute class names.

View on HN

button is a tag, submit and disabled are tag attributes -- surely you don't need these classes, they're either superfluous or you're not doing semantic HTML.

I agree that you could in a lot of cases get along without these classes. But sometimes you want e.g. an anchor acting as a button in a web application. Or you want a button element with browser styles. You could argue that this is also already an anti-pattern but it does way less harm then leaking inline styles into the namespace and it is still semantic. Also this was just an example (maybe not the best one) to illustrate my point that class names should be semantic and not express solely presentational attributes. The later is what styles are there for.

Especially in a javascript driven web application you may want to select all "buttons that are disabled". But you never want to select elements that "have a rounded border of 2 px and a grey background and italic font style and....". This takes class names ad absurdum.

is selectable with

    [disabled] { }

    [disabled="disabled"] { }

And

    [disabled]:not(.greyButtonStyle) { }

does the last example if you classed that style, doesn't it? I've only done a little CSS, not very recent ... unless you're recruiting, then I'm an expert ;o).

I imagine though there are times when you want to class (some) button tags as .button.

Reply on news.ycombinator.com