Authoring more robust CSS with smart selectors

There are a handful of ways we can use what we learned about modular scales when creating the typographical system of our website, from simple single scale systems to fully fluid typography. This article will take a look at each style and implementation, but all of these systems aim to address the question of how to handle text on both small and large screens.

Vertical rhythm is a concept in typography that aims to keep vertical spaces between elements consistent with each other. This creates repeatable patterns that readers subconsciously understand and use to read faster and more accurately.

In any form of design, one uses a series of measures to plan and layout the product. Measurements create precision, consistency, and promote trustworthiness. In print, common measurements are inches, centimeters, points, and picas. In the world of digital and web design we use pixels and more relative measurements such as percentages.

Back in October, Marvin Danig made a fantastic blog post on the state of responsive web design and the future of CSS frameworks. I wanted to continue some of his points and see how a responsive first grid system might look.

While researching best practices of CSS organization this past year for a huge UI project at work, I ran across several ideas and strategies to solve this problem. My goal here is to digest these ideas and formulate a more comprehensive approach to organizing CSS.