Instant Web

For some, Facebook’s Instant Articles is a sign that the traditional web stack is incapable of giving users a first-class reading experience. But the sluggish performance of the web isn’t due to an inherent flaw in the technology. That particular problem originates between the seat and the keyboard, where builders make choices that bloat their sites. For Mark Llobrera, Instant Articles is a sign that we need to prioritize performance like we actually mean it.

Let Links Be Links

The notion of the web as an application platform has never been more popular. Single-page frameworks like Ember and Angular make it easy to create complex applications that offer richer, more robust experiences than traditional websites can. But this benefit comes at a cost. Ross Penman tells us what we can do about it.

Readable Wearables

Displays that are more tiny than our lowest-size breakpoints require a more condensed range of type sizes. If you don’t already have in place a typographic system that can absorb the demands of this new context (watches, wearables, digital sticky notes, whatever), now might be the time to consider it. Matt Griffin was ready for anything because his site was simple and built to be future friendly.

Quantity Queries for CSS

In responsive design, we think a lot about space, especially in the context of screen sizes. But the amount of content or the number of elements is bound to affect space, too, just as unpredictably—and if we don’t want our designs to dictate our content, we need new ways to make our design aware of changing content quantities. Heydon Pickering walks us through a new idea for creating style breakpoints for quantities of HTML elements.

What Will Save Us from the Dark Side of CSS Pre-Processors?

To spare ourselves the complexity and tedium of writing CSS, we’ve embraced CSS pre-processors. But we must use them wisely or risk outputting CSS that is weirdly convoluted and just so wrong. Could post-processors save us from the pitfalls of pre-processors? Lyza D. Gardner is cautiously optimistic about their future, but also has a solution we can implement right now to save ourselves from both unchecked pre-processors and unseasoned post-processors.

A Vision for Our Sass

Sass is a powerful tool in helping us wrangle complex stylesheets. Yet it has its headaches—including troublesome nesting of CSS selectors, code duplication, and tight coupling—that result in messy outputted CSS. Universal standards aren’t a viable answer, as the Sass spec continues to quickly change and grow. Felicity Evans holds that the problem isn’t Sass itself, but the way we use it. In this article, she champions a set of tenets that offers guidelines on how to work with Sass and evaluate new features and techniques.

Axiomatic CSS and Lobotomized Owls

Managing flow content can get unwieldy—too many class selectors can become a specificity headache, nested styling can get redundant, and content editors don’t always understand the presentational markup. Heydon Pickering offers an unexpected option for handling cascading styles more efficiently: a variation on the universal selector.

Breaking Stuff

Designers may do CSS, but not JavaScript. Some may do JavaScript, but draw the line at git. Some may be willing to use git with a graphical interface, but not with Terminal. When we get out of our comfort zone, it’s great to have a safety net so we can learn without breaking stuff too badly.

CSS Audits: Taking Stock of Your Code

A CSS audit helps to organize code and eliminate repetition for speedier sites. Susan Robertson shows us how to sleuth out potential trouble spots, along with offering tips on tools, documentation, and ways to keep our codebases lean well into the future.

Radio-Controlled Web Design

Tabs, modal overlays, hidden navigation: we’ve developed many patterns to help us design for mobile screens. But these patterns tend to show and hide content using JavaScript—which can come with its own challenges. Art Lawry explores techniques for reducing that dependency on JavaScript using an unlikely tool: radio buttons.