In 2016, Cascading Style Sheets (CSS) will reach a milestone: it will have been 20 years since the CSS Level 1 specification was completed, and 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.
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.
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.
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.
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:
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.
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.
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 Internet Explorer 6), 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.
Before you get to code your designs in HTML and CSS, have you got any user feedback? Look into some of our tips for conducting usability testing.