mrmrs

The concept of 'semantic classnames', even if propagated by w3.org has caused as much grief as the concept of 'separation of concerns' between HTML & CSS fad. The reason we need semantics in HTML is to make the markup accessible for screen-readers, and no screenreader considers the class name of an element when reading it out. What we instead need are semantic tags like article, section etc. and aria tags like role.

CSS classnames are purely for the developer's benefit. Not the user's. And as developers, forcing ourselves to find semantic meaning for every element we write leads us to component-oriented CSS like BEM. Which is a fine thing, but we can also use purely visual classes - like `bg-red bold border-solid` if it helps (and it does. check out tachyons.io)

The class names of elements in Google's homepage for example reads like 'tsf-p', `oq`, `gsb` etc. I suspect these are machine generated. Same with Facebook. One of the best libraries to do this currently is styled-components (https://github.com/styled-components/styled-components).

Consider reading http://nicolasgallagher.com/about-html-semantics-front-end-architecture/, http://mrmrs.io/writing/2016/03/24/scalable-css/, and http://johnpolacek.com/2016/06/17/atomic-css-movement/ for reasoned perspectives.

Had to look up BEM, this appears to be a good overview:

https://css-tricks.com/bem-101/

[ed: Having now read: http://mrmrs.io/writing/2016/03/24/scalable-css/ linked above, I can at least see where this idea is coming from. I guess I'm still thinking in documents with semantic mark-up, rather than UI widgets. I'm not entirely convinced throwing out all the cascading bits is the best approach, but I sympathize with that point of view.]

This is madness. Why work so hard to avoid how CSS selectors work? I mean, if you have a menu-structure built around divs, surely it should be enough to say that direct children of the div with class menu, should be considered menu items?

<!DOCTYPE html>
<html>
<body>
<style>
div.menu > div {
background: red;
}
div.menu > div:nth-child(3) {
background: blue;
}
</style>

<div class="menu">
<div>Item one</div>
<div><p>Also<br />an item</p>
</div>
<div>Item #3 and CSSv3
<div>knows (still blue)</div>
it</div>
<div>Item #4 and CSSv3 knows it</div>
</div>
<div>wat</div>
</body>
</html>

Dude, comeon. The browser has evolved a lot as a platform, as has the hardware power of computers running them. Maybe we're re-writing computer history, but if that's the case then it's because we have to migrate everything to javascript and the wiser old timers want nothing to do with it.

* Do you really want to write CSS without a pre-processor?

* Do you really want to control a webpage's state without JS models in the browser?

* Do you really want to update html with individual jquery calls?

* Do you really want to write websites _without_ using jquery? Keep in mind that jquery is only 10 years old.

I'm glad that we have an open market to exchange people's ideas. Yes, a lot of it is crap, and even among the highly adopted packages there will be problems. But that's the beauty of the market-- people can vote with their feet.

This article sums up how I feel: http://mrmrs.io/writing/2015/07/27/too-many-tools/

> "Four–fifths of everybody's work must be bad. But the remnant is worth the trouble for its own sake." - Rudyard Kipling in 1890

It's definitely weird at first, but the aim of atomic CSS is to not have a CSS file that just grows and grows and grows.

This article(written by the creator of Tachyons) helps to explain the issue: http://mrmrs.io/writing/2016/03/24/scalable-css/

Where I work, we're using it on a new project and while it definitely requires a lot of learning(and just generally understanding CSS), it's faster to debug with, easier to take care of edge cases, and the total size for our app is incredibly small.

In defense of JavaScript, there is an article that appeared here not long ago:

http://mrmrs.io/writing/2015/07/27/too-many-tools/

Basically all these new terms come out because people are constantly trying to improve the ecosystem and make it better according to their own standards, be it more modular, more robust, or more scalable.

Eventually winners will emerge and the losers will die out. Give it a few more years and it will stabilize.