New Tools to Help Experienced CSS Developers Up Their Games

"Modern CSS Explained For Dinosaurs" tells the long, winding tale of how CSS--short for Cascading Style Sheets--was first developed and how it has changed since its inception.

In the beginning, CSS was first used to specifically format how text appeared in web pages. It governed the style of the typography and little else. The greatest upside to using CSS is that one file may affect changes on an entire website. Any section that references the CSS page takes on the style choices. This reduces both the amount of maintenance necessary and possible confusion when making changes to the look and feel of a website.

It was only a matter of time before this method of interaction spread beyond the style of text and began affecting the layout of the page as well. By placing specific tags and ids within the HTML, CSS pages began to control where text appeared on pages as well as other visual elements. Though CSS was not designed for this purpose, it did the job well enough with a few minor misappropriations of newly developed functionality. After a period of time, the CSS grid-based layout incorporated these hacks and quick fixes to create a new format which was developed with this purpose in mind.

The increase in functionality also increased the amount of effort needed to develop and produce CSS. A new type of preprocessor appeared to allow developers the use of variables when creating CSS. Some required a higher understanding of coding in general while others mirrored the syntax already used in standard CSS creation. Regardless of the learning curve, the ability to automate the production of CSS also reduced maintenance for a given website.

Another development in CSS tooling is the postprocessor. Some consider this a compliment while others consider it a replacement. Instead of using code to produce CSS, it takes CSS as input and ensures validity. There are several methodologies to consider as none have been adopted by all CSS developers.

Understanding the history of CSS provides context and helps weigh functionalities when deciding how to develop and use this helpful language.