20 years ago CSS was born

With the Beatles now on Apple iTunes and other streaming services and with the sounds of Sgt. Pepper It was twenty years ago today. Sgt. Pepper taught the band to play, They’ve been going in and out of style, But they’re guaranteed to raise a smile it is worth remembering that foundation of modern websites, CSS also turns 20.

In 2016, Cascading Style Sheets (CSS) will reach a milestone: it will be 20 years since the CSS Level 1 specification was nailed down and those early browsers began implementing it in full. In that time, the way we build websites has changed dramatically: from table-based layouts and static pages, to responsive, dynamic web applications — and beyond.

CSS has grown and evolved too, adapting to the needs of an ever-changing industry. In this article, we’ll explore how CSS is used to build the web of today – and take a look into the CSS of the future.

Where we are now

The CSS specification has seen a number of updates since its inception. The most recent version, CSS Level 3, contains advanced features like media queries, flexible layout (‘Flexbox’), animations and transitions; features that, despite not yet being fully standardised by the W3C, are already in most browsers.

New standards are under constant development as the language looks to adapt to the needs of the web today, and tomorrow — a task made trickier by the sheer speed of change in the industry, combined with a rigorous (and therefore slow-moving) standardisation process.

While support for newer features can vary widely across browsers, one key factor has contributed greatly to the speed of change: with the exception of Apple’s Safari browser, all the major browsers — Google’s Chrome, Mozilla’s Firefox, and Microsoft’s Edge — are now evergreen, meaning that they automatically update to the latest version. This has seen new browser features arrive sooner, and established a more competitive, robust environment in which to build forward-looking websites and applications.

Where are we going

The upcoming browser features generating the most excitement are to do with layout. From tables to CSS floats, managing layout in CSS has often been a challenge — something that the newest specifications, Flexible Box Layout (Flexbox) and Grid Layout are looking to tackle.

• Flexbox addresses the toughest challenges in CSS: the relative scaling, alignment and order of elements, both vertically and horizontally. Using Flexbox, elements can flow to fill remaining space; scale to a multiple of a sibling’s dimensions; match their siblings’ height or width; center vertically with ease, and more. Browser support for Flexbox is already very good, and it is rapidly becoming the layout tool of choice for many web developers today.
• Grid Layout targets many of the same problems tackled by Flexbox, but by different means. By composing layouts of rows, columns and cells, combined with the responsivity provided by media queries, Grid Layout enables much more complex layout solutions. Current browser support is still very narrow as the specification is relatively new, though the potential is significant.

Tools & Techniques

The way that CSS is written has changed over time, too. In many cases today, CSS is divided into a number of small files, known as modules, which are then built (using command-line tools, such as Grunt or Gulp to combine them) into a single file for deployment.

At the same time, efforts to manage the CSS in larger websites or applications have seen tools called preprocessors emerge. Preprocessors exist to add ‘missing’ features to CSS itself, such as variables, logic and selector nesting, and require an additional build step to convert them into CSS.

A number of preprocessors are popular today, such as LESS, Sass and Stylus, and while they differ in features & syntax, they all tackle the same problem: managing complexity in CSS.

Other techniques have been developed to manage this complexity. Some rely on conventions applied to the CSS classes and selectors themselves: BEM (Block, Element, Modifier), SMACSS (Scalable and Modular Architecture for CSS) and OOCSS (Object-Oriented CSS) all offer well-defined rules regarding the naming, usage and definition of classes in CSS to achieve:

• Maintainability in a growing codebase;
• Predictable relationships between classes and elements; and
• A reduction in risk and of potential side-effects when changing existing CSS.

CSS frameworks are another such technique. Frameworks such as Twitter’s Bootstrap, and Foundation instead seek to abstract away much of the problem-solving and eccentricities of CSS development by providing collections of pre-written (and bug-tested) code that include many common design patterns, such as navigation, typography, forms and grid systems. This code is then included along with other CSS, and referenced in HTML using the pre-defined class names.

Performance

CSS, like Javascript, has seen a dramatic rise in the complexity and scope of implementations, to the point where great care must be taken to avoid impacting the overall performance of a page.

With it being in control of the visual appearance of a website, a great deal of responsibility rests with CSS to manage and maintain perceived performance. Developers writing CSS should understand the performance implications of each declaration type and the tools available in CSS to improving performance, such as the forthcoming declaration, ‘will-change‘.

Performance is increasingly considered a feature in its own right when building a website and, as such, all aspects of a website are considered carefully in turn: images, web fonts, and server configuration for instance can all all be separately configured to optimise performance.

Summary

The role of CSS in web development has fluctuated through the years. From being a curiosity, to the source of great frustration (especially in ‘challenging’ development environments, such as the old Microsoft dog IE6), through the Web Standards movement, to today.

CSS is sometimes seen as a secondary concern in modern web development — especially since the advent of CSS frameworks. However, a deeper understanding of CSS is as vital today as ever, with the key role it plays in the experience of the user — and the continuing success of the web platform to deliver usable, enjoyable and accessible experiences to all.