Brown - CSS Master

CSS has grown from a language for formatting documents into a robust language for designing web applications. Its syntax is easy to learn, making CSS a great entry point for those new to programming. Indeed, its often the second language that developers learn, right behind HTML.

However, the simplicity of CSS syntax is deceptive. It belies the complexity of the box model, stacking contexts, specificity, and the cascade. Its tough to develop interfaces that work across a variety of screen sizes and with an assortment of input mechanisms. CSS mastery lies in understanding these concepts and how to mitigate them.

Mastering CSS development also means learning how to work with new tools such as linters and optimizers. Linters inspect your code for potential trouble spots. Optimizers improve CSS quality, and reduce the number of bytes delivered to the browser. And of course, theres the question of CSS architecture: which selectors to use, how to modularize files, and how to prevent selector creep.

CSS has also grown in its capabilities. Until recently, we had to use clunky methods such as float, or weighty JavaScript libraries, to create the kinds of layouts that are now possible with the Flexbox, multicolumn, and Grid layout modules. Three-dimensional effects were impossibleor required imagesbefore the rise of CSS transforms. Now we even have support for variables.

The second edition of a book may be tougher to write than a first edition. You have to determine what to keep, what to remove, and what to update. Much has changed in the three years since CSS Master was first published.

Preprocessors and post-processors are less relevant today. Browser vendors have abandoned vendor prefixes. Variables can be replaced by custom properties. As a result, we wont discuss them in this edition.

CSS Grid layout, on the other hand, was considered leading edge in the last edition. Its now widely supported and fully included in this one. This edition also includes introductions to writing modes, and box alignmenttwo CSS modules that interact with and affect Grid, multicolumn, and Flexbox layouts.

Something else thats changed: web users receive browser updates far more frequently, and there are more flavors of WebKit than before. Trying to keep up with each of these versions is a special kind of folly. So youll notice there are no browser support charts in this edition.

Its still a fascinating time to be a front-end developer. My hope is that youll come away from this book with a better sense of how CSS works and how to write it well.

This book is for intermediate-level CSS developers, as it assumes a fair amount of experience with HTML and CSS. No time is spent covering the basics of CSS syntax. Coverage of CSS concepts such as the box model and positioning are included to illuminate tricky concepts for the experienced developer, but this coverage is not meant as an introduction for beginners. Experience with JavaScript is helpful, but not necessary.

Code in this book is displayed using a fixed-width font, like so:

Where existing code is required for context, rather than repeat all of it, will be displayed:

Some lines of code should be entered on one line, but weve had to wrap them because of page constraints. An indicates a line break that exists for formatting purposes only, and should be ignored:

Youll notice that weve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

• https://github.com/spbooks/csspro2 is the books code archive, which contains code examples found in the book, plus game library that well build in the book.
• https://www.sitepoint.com/community/ are SitePoints forums, for help on any tricky problems.
• books@sitepoint.com is our email address, should you need to contact us to report a problem, or for any other reason.

If youve ever worked on a CSS codebase of any sizeor even a small codebase with multiple developersyoull have realized how difficult it is to create CSS thats predictable, reusable, and maintainable without being bloated. With added developers often comes added complexity: longer selectors, colliding selectors, and larger CSS files.