In defense of functional CSS

I think producing atomic css classes falls should be done by a computer. [Styletron](https://github.com/styletron/styletron) and [CSS Blocks](https://css-blocks.com/) comes to mind.

> At the end, I don't want to defend to death this practice.

I tried to phrase things such that I didn't seem to come across as aggressive. We all have such limited views of the world, and opinions are an expression of those views. I found attempting to understand other opinions can widen your own viewpoint, sometimes in surprising ways :-)

My expectation of what people would give as their three benefits are as follows:

1) abstraction of CSS - CSS is not especially crafted to be readable, and you typically need to code workarounds for older browsers using legacy/vendor styles and progressive enhancement. Merely using a functional CSS framework can make the CSS much more readable than manually specifying style information.

2) DRY/directness in component frameworks - if I'm abstracting a profile card into a component, there is little value to stylize based on a profile-card class, especially if that means my style is now separate from the rest of the component definition.

However, if you are not using a component framework but instead using something like templated HTML pages, you really do worry about whether people will identify a particular piece of markup as a profile card or the like, or that profile cards on one page will start to deviate from the rest of the app.

3) (Harder for me to explain) one of the maintenance issues with CSS comes from (logical) components, selectors, and styles all having M:N relationships with each other. So I might define my profile-card styling entirely within a single selector. But I might also elsewhere say something like:

``` a, .nav .selected, .profile-card .info { color: #ed0a1f; } ```

This is slightly different from the concept of side effects, but IMHO this is what makes CSS so difficult to reason about and maintain.

Use of functional CSS (and encouragement to embed styles within the HTML directly, rather than composing new classes via something like @apply in a stylesheet) means that you have created a pretty clear/classical relationship of styles to presentation.

So you might make an argument that classes should be leveraged more for semantic information, the actual styling becomes much simpler.

That sort of argument would make me wonder if there is a potential tool for those who are using templating rather than component frameworks for their buildout - a CSS lint tool that encourages you to use semantic classes, but that those classes must be composed entirely from an extensible set of functional components, rather than raw CSS.

> CSS has built-in color names.

You can't be serious can you? Css has what around 150 color names? That is jut not good enough for any serious work.

> Use !important.

Please don't use !important, avoid it as much as possible. It just compounds the issue.

> class="bg-blue" has to be repeated just as much as the equivalent background style

But the definition of what shade of blue we're using is in only one place. Forget bg-blue and think of theme-blue, theme-blue-highlight, theme-blue-mid and so on. A professional design needs vocabulary.

> You should use IDEs with autocomplete

Do these IDEs help with reading and interpretation?

> You haven't changed the problem, or the amount of work, you are just using a different layer to implement it.

Changing the layer you're implementing on is the whole point. It's about maintainability and keeping things encapsulated.

Now when someone comes back to look at this button a year later, they're not left wondering why this usage of "Button" is colored blue, and tracking down the utility class. They will know that it's an instance of "BlueButton" and can just edit the component directly.

This is all really terrible advice and my only conclusion is that you have never actually had to maintain websites that use this approach toward CSS as they grow past being a little one off blog into a large, customer facing, PWA.

With this method of CSS it will take years to consolidate, update and redesign your application. Ask me how I know. :-)