Hacker News Reader

Comment by cbeach | Hacker News Reader

The author's solution mixes style declarations (i.e. centering text) into HTML, which surely goes against the spirit of CSS?

    .Card[data-align=center] { text-align: center; }

Filling HTML with data-* style attributes would intertwine layout and content in a single file, meaning we're no longer able to use CSS to flexibly re-style the content.

View on HN

It looks like you didn't read all the way to the end, and custom data attributes can be for whatever you desire. Presently a lot of people are putting style information right in class names so this distinction you're speaking about isn't present now and developers are already violating it in a big way. The solution in the article is at least using tag names, attributes, and attribute values in ways they're meant to be used. There's a warning about abusing class names in the CSS spec that reads like this:

    Note: Because CSS gives considerable power to the "class" attribute, authors could conceivably design their own "document language" based on elements with almost no associated presentation (such as div and span in HTML) and assigning style information through the "class" attribute. Authors should avoid this practice since the structural elements of a document language often have recognized and accepted meanings and author-defined classes may not.

https://www.w3.org/TR/selectors-4/#example-f9c08b5b

Reply on news.ycombinator.com