Preface

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, it’s 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. It’s 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, there’s 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 impossible—or required images—before the rise of CSS transforms. Now we even have support for variables.

What's Changed in This Edition?

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 won’t discuss them in this edition.

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

Something else that’s 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 you’ll notice there are no browser support charts in this edition.

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

Who Should Read This Book?

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.

Conventions Used

Code Samples

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

<h1>A Perfect Summer's Day</h1>
<p>It was a lovely day for a walk in the park.
The birds were singing and the kids were all back at school.</p>
			

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

function animate() {
    ⋮
new_variable = "Hello";
}

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

URL.open("http://www.sitepoint.com/responsive-web-
➥design-real-user-testing/?responsive1");

You’ll notice that we’ve used certain layout styles throughout this book to signify different types of information. Look out for the following items.

Tips, Notes, and Warnings

Supplementary Materials

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