This is not meant as a beginner post, I just want to give my opinion on an article I read. And I want it to be more than just a rant.
The cause
CSS classes considered harmful.
This is an older article that recently got picked up by Hackernews
The rant
Class is old. Like real old
That the class attribute is old is beside the point.
Class and id are the hooks to apply styles from a dedicated CSS file. They are replacing style, background, bgcolor, color, where the styles where added to HTML.
Style still can be used for critical styles, but I'm on the fence if this is over-engineered or not.
However it illustrates that they solved a problem within a period of constraint. The web was young, browsers we less complex, and digital design was less mature. We didn't need a more complex solution at the time.
Why do we need more complex solutions in the browser? Generating HTML and keeping application state in the browser is a decision the developers made themselves. They are returning to generating HTML on the server. Next thing only page state?
If we continue to think of the class property as an analog to OOP Classes
Why would you do that? This is the wrong analogy.
CSS is not a programming language, it is a design language. Like HTML is a markup language. They are as important as a programming language, they are just highly specialized like SQL. And they require other rules.
HTML5 allows for custom tags
Creating/naming html tags just to design is a bad idea. The biggest problem is that it has the tag comes with a custom meaning that is not understood by browsers. For a meaning that browsers can understand it needs javascript to add the DOM interface and/or ARIA attributes.
Assess if you really need a custom tag or not.
My solution
Because CSS is a design language, keep it as close to design concepts.
Card is not a class/id name, it is a collection of styles that are shared by multiple card types. Instead looking at it as an inheritable class, see it as composable instead. This is also how clean code is created.
The class and id attributes don't need to know the value is composed or not. This is the job of a preprocessor to create the classes that fit the context of the design the best.
A build like this is highly likely to create duplicate styles and the goal is to keep the CSS download as small as possible. So instead of having a single file, create a file per page or even per component. The days that there is a fixed limit to load CSS files is far behind us.
Only use inner classes/ids, like cardHeader, if the styles are too different from the overall design. This shouldn't happen too often because you want a consistent design.
If a component is highly interactive you can use data attributes to make the distinction between the static styles and the dynamic styles.
Don't religiously follow a concept like BEM or atomic CSS. Mix and match the parts of the concepts that make most sense for your project.
PS: the discuss tag is added as click bait.
Top comments (0)