CSS

Most modern projects will abstract the CSS-writing process in some way, be it via preprocessors or concepts like CSS-in-JS. A solid understanding of CSS fundamentals is nonetheless vital to any solid execution, and should inform the way you write your higher-level styles.

Reset styles

Any project (that isn't going to be embedded in an existing codebase) should employ a CSS reset file, or block of code, to set a universal cross-browser baseline. Vokal's CSS reset combines the Eric Meyer reset with a variety of normalizations from Normalize.css, and is the recommended starting point.

Style formatting

There are many schools of thought on exact CSS formatting. At Vokal we recommend handing off the heavy lifting to a linter that enforces commonly-accepted best practices and focusing your attention on the actual work that needs to be done.

TODO: reference a recommended starting linter config

Class usage

Classes are great for conveying semantic intent, and providing an easy way to attach style rules. That said, they can also be used as a crutch when already-semantic HTML tags can be easily targeted instead, and result in a much cleaner DOM. There's no need to write something like .feature-list .feature-list-item when .feature-list > li will convey "an item in a list" just as clearly. Depending upon how your DOM is structured, .feature-section ul > li may actually end up being the most terse and still semantically useful option, and not suffer from unintended CSS cascades due to still being scoped by its container. Consider where class names actually add value (usually on more generic elements like containers), and where a properly-scoped semantic HTML tag conveys enough information on its own.

Media queries

When implementing media queries, think less about breakpoints at specific theoretical screen/device sizes, and more about what's appropriate for the actual design you're implementing. Components should reshuffle fluidly as you size your browser up or down, and breakpoints should be used once you hit points where items no longer fit properly. Responsive web design is about browser windows of any size, not just "phone" and "tablet."