Nicolas Gallagher

I do appreciate your transparency, though I disagree with the sentiment that I’m arguing from a position of bad faith.

The Babel team has not shown a moment of interest in lowering their role in the JavaScript ecosystem to anything short of kingmakers. I think the facts are self-evident, but I can easily back up my claims by citing pretty much any document the team has ever produced. Have a gander at their GitHub README and what do we see?[1]

- “Babel is a compiler for writing next generation JavaScript.” I suppose they left out “indefinitely” to avoid the obvious. Don’t forget, you’re here forever.

- Over a dozen sponsor logos. An embarrassment of riches.

- A literal audio recording of a song in praise of the project. The call is coming from inside the house, people!

The Babel team has a well documented history of their priorities[2], emphasizing the need for a modular approach that has no exit strategy[3]. At best, we have a case of accidental entrenchment and long term dependence on Babel brewing as early as 2017![4] At worst, we have a group of aspiring Carmack-wannabes looking for their big break into the incestuous and lucrative class of technorati standards committees.

Don’t believe me? It doesn’t take an inner-join on the TC39 roster and the Babel maintainers to see our own version of regulatory capture forming right before our eyes.

Compare this infinite circus to the humble but popular Normalize.css, which has the express purpose to stop existing.[5]

If the…

1. Think about this: You have to write or customize .profile-card for every project, with "m-5 p-5 text-gray-light bg-gray-darker border border-gray-light" you're writing 0 lines of CSS. Zero. All your CSS will be your utility framework (sizes around 5~15kb) and it will never increase in size. Now, tell me you never seen a two year project where CSS alone reached 2+Mb because at every edit someone added another class to the list...

Also: When you gzip your HTML those repeated classes will compress pretty well.

2. Yes, you're right! Same specifity for the example in question. My point was more in general. Think @extend[0], nested selectors in SCSS. They look less scarier than "m-5 p-5 text-gray-light bg-gray-darker border border-gray-light" but they do not always do good.

And I can tell you'll have no side effects: If you look at the HTML only, what ".profile-card" does? Does it add padding, typography, borders, transitions? How do you extend it? I can't tell. But I know for sure that "m-5" will add margin and margin only. "bg-gray-darker" will add background-color and background-color only. And so on. Every class does only one thing. They don't overlap. Once you memorize the simple naming convention you can't go wrong.

3. Why it looks harder to maintain? Do you all really get scared by a few, readable, classes? Also, classes are no meant to be semantic or content-dependent[1].

At the end, I don't want to defend to death this practice. Maybe it's a concept that is hard…

Why are people hating on HTML semantics? I fear it is out of some fundamental misunderstanding of how semantics work on the web...

First let me be clear that there are (at least) two types of semantics on the web, one for machines (bots and screen readers) and one for meat (humans!).

In writing HTML, the goal is not to use every semantically-rich tag available and avoid everything else like the plague. Where you can convey extra semantic meaning, use the most appropriate tag available; where you cannot, use a div or a span or something else. Use of divs does not make your page less semantic - it is not deductive. However use of the correct semantic tags will make your page more semantic - it is additive!

In writing CSS, the goal is not to avoid classes/IDs altogether to keep your HTML "clean". The machines care not if your HTML is rammed full of classes; though you will certainly care when it comes to maintaining your pristine HTML. When writing CSS the goal isn't even to strive for "semantic" class names. CSS classes convey no semantics, at least not to machines. CSS classes should be used to convey semantics to the meat bags reading the code - devs, interested users etc. Nothing else matters with CSS, write it how you like, in as maintainable a fashion as possible and forget semantics in that domain.

Excellent article discussing the fallacies around semantics: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

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.

It's a cool little snippet but it's nothing more than three run-of-the-mill CSS declarations.
The maximum width is specified, a small padding is applied and the margins around the element are set to automatic so it centers itself horizontally.

All the other styles applied on this pages are not part of the snippet. The weight of the titles, the spacing under the paragraphs, etc., are all specified on the page's CSS file but not described in the blogpost itself. [0]

I was expecting something akin to normalize.css[1] which normalize the default styles of your page[2].

There are multiple very lightweight CSS "frameworks" that you should carry around instead of the snippet shown here. We are talking ~5KB. See https://github.com/troxler/awesome-css-frameworks#very-light for a great list.

[0] https://jrl.ninja/etc/post.css

[1] http://nicolasgallagher.com/about-normalize-css/

[2] Normalize CSS aims to make built-in browser styling consistent across browsers. Elements like H1-6 will appear bold, larger et cetera in a consistent way across browsers. You're then supposed to add only the difference in decoration your design needs.

The no nesting thing is huge! We refactored a lot of CSS earlier this year and that was one of the biggest pain points. Coupling the structure of your template to your CSS makes changing things very painful. Nesting also creates ambiguous classes that have no obvious connection, consider the following:

.my-component {

.header {

...

}

}

You would just see header floating around in the markup, unsure of where it's namespaced.

Also I disagree that you shouldn't modularize your CSS. We now create a CSS file who's name corresponds with the class name.

/styles

/components

my-component.css

and in the markup

<div class=".MyComponent-wrap">

<div class=".MyComponent-title">
...

</div>

</div>

With CSS like that you always know where a style is declared, and the order of the classes do not matter.

More on the issue: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/