Design Principles Behind CSS Language

CSS was created as a domain specific language (DSL), style language in more specific, to style documents written in markup languages (HTML, XHTML, SVG, XUL).

A DSL tends to be very expressive, created specifically to solve problems in a particular domain, and not intended to be able to solve problems outside of it. Just don’t compare languages in different categories.

CSS is known as a language has simple syntax, compact encodings, rich set of rendering effects, alternative bindings, and easy to pick up but hard to master.

Before you complain about CSS problems at scale or request new features, you should read W3C design principles behind it, following are three essential principles as the way I interpret:

• Don’t break the web - Regardless of CSS levels browsers implementing, they will be able to read style sheets written in any CSS levels and discard parts they do not understand. You’re free to use new features today as long as you’re providing good fallbacks for older browsers.
• Separation of concerns - It should be easy to change stylesheets with little or no impact on the markup, you can completely redesign a site just by swapping out the stylesheet. But it relies very much on conventions to decouple styling decisions from markup structure.
• Platform independence - CSS along with HTML and JavaScript are three cornerstones of the open web. HTML defines the website structure, CSS gives it look and feel, JavaScript brings interactivity and animations. Development in open, no vendor lock-in, and portability at best.

In a perfect world, you are supposed to be able to move CSS stylesheets around projects in different languages and frameworks and still achieve the same design with very little modification. In reality, CSS stylesheets are very much locked to where written initially and left in dust for ages.

No more loosely-coupled global styles, modern styling techniques like CSS-in-JS and utility-first bring web styling with different perspectives based on component-based architecture. Above design principles seem broken in modern web development.

The power of abstraction comes with the cost of portability. At some point, you don’t even realise you’re actually moving away from CSS and consider it more as a compile target than a styling language.