This is an experiment I am doing to build a theoretically perfect CSS framework for teams. Here is how it goes:
- You comment on this discussion with a problem/issue we currently face with writing CSS (with vanilla CSS or any library).
- I'll reply (or anyone of you can too) with what can be the probable solutions to that issue.
- In the end, we collect all those suggested solutions to build or search that "Perfect CSS Framework".
Sounds good? I'll start.
Top comments (8)
i think the main problem is cascading itself. it might be silly but i think this is what people have some difficult to understand. pros and beginners. maybe this model made more sense in the past. i don't know. but i think the dev community is running to a atomic style so maybe that's what we should be trying to make it "native" instead or running alongside the old model.
The cascade makes perfect sense, just as it always has done, provided that you understand what the true roles of HTML, selectors and CSS declarations are. Unfortunately, because web designers decided that they wanted to create site styles without reference to the semantics of the document content as captured by the HTML markup, they were forced to pervert both the roles of HTML and selectors for their own means. Once those roles are perverted, neither the specificity nor the cascade can work as they were designed to.
what you mean by web designers here? and what is "reference to the semantics of the document content as captured by the html markup"? are you okay man?
By web designers, I mean those people who are generally responsible to the look, feel and wider UX of a web site, as opposed to content authors. HTML is a semantic mark up language. The mark-up is there to indicate the meaning of the content. In particular, ids and classes are part of HTML rather than part of CSS, and therefore their values should be chosen to describe the content's semantics. The true purpose of selectors is to provide the binding between the HTML's semantics and the CSS's styling.
Issue: CSS in team often gets messy because of Specificity. Someone else writes a selector with very high specificity to override someone else's selector and this goes on and on.
One well-known solution we often see is to use single class selectors. No ID, no concatenation, no cascading. Just a single class selector to style anything.
Of course, there will could be a few actual requirements to concat/cascade classes. But our perfect framework would mostly always comprise of single class selectors. Moreover, it should also prohibit anyone from writing random selectors which again could be highly specific.
This identifies in a nutshell why there can never be a "Perfect" CSS framework. It's too subjective. I'd hate a framework that stopped me from exploiting specificity correctly. And no framework can distinguish between correct and incorrect use of specificity.
Maybe that "perfect" framework that doesn't allow specificity to rise above one, except in certain cases where it's required and doesn't harm as much. Now, this is all theoretical talking. We can come up with examples and debate over them. Do you have any specific examples where you would want a selector specificity more than one?