CSS, are you broken ?

  1. Writing CSS, is easy.
  2. Applying CSS, is hard.

Being so easy to write, CSS is currently the only 2D web rendering language. But you probably didn’t learn CSS for itself, in a pristine environment, with perfectly semantic HTML at hand, analyzing its behaviour on each major browsers with a fresh, patient look. You never met CSS as a language, but as a tool.

A tool everyone is making its own version of; drunk of browser’s default values; under preprocessing drugs; bending under a huge framework; playing ninja as JS injections; making pranks with inline styles and !importants.

Close up photo of rotary telephone by Fancycrave

Hakon Wium Lie, creator of the CSS, wanted the browser to be a mediator between users and designers. He imagined a hierarchy system, where already defined styles could be overwritten, and concurrent stylesheets could work together.

The Cascade works through rules of specificity, only to give users the freedom to interact with a designer-defined interface, and make it their own.

Think of how simple and flexible it still is to edit a webpage styles, live.
CSS was not only thought for specialists, it was made accessible to everyone.

CSS is hierarchic !

CSS targets elements in the DOM tree by their tag names and attributes, but also by conditions, states, positions and applies to the matching nodes a set of key:value; that describe how the element must be rendered.

Properties you explicitly set on an element will be inherited by their descendants except for some properties for which the logic is of uniqueness.

For the same selector declared multiple times, the prevalence of properties which are also declared multiple times always goes to the last declaration.

.selector { color: green; }
.selector { color: red; }
/* .selector text color will be red */

Different selectors may apply on the same element, but on concurrent properties, the selector with the highest specificity will override its concurrents.

.selector.selector { color: green; }
#selector { color: blue; }
.selector { color: red; }
/* .selector text color will be blue */

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s