Cascading Style Sheets (CSS)

CSS is a layout definition language used for styling the typography and layout of web pages, apps, SVG and other related elements.

Simple CSS specificity rule guide

There are a few ways to apply CSS styling rules to an element. Each one is less or more specific than another. Applying a rule using a class selector when you’ve applied a different rule using an ID selector won’t work. Batificity isn’t the CSS specificity guide you deserve, but the one you need right now, and it looks great. However,…

Simple CSS specificity rule guide

Vertical rhythm in web typography

…doesn’t have anything to do with jumping up and down to music. Sadly. Typographic principles are just as valid in designing for the web as they are in designing for traditional media. Through the application of a very simple mathematical principle, a design becomes more peaceful and the visitor is calmed by a subliminally identifiable pattern. (Our brains, like computers, like the…

Vertical rhythm in web typography

The CSS :not() selector

One of the best CSS tips I’ve come across in recent months is the :not() selector. Rather than having to define a set of rules for an element, then re-defining new rules for the element when it has a certain class or attribute, you can use :not() to be more specific in the first place. In my most-used cases so…

The CSS :not() selector

Avoiding specificity issues in CSS

Holy moly. What a discussion we’ve gotten into over on Twitter about CSS specificity, BEM, and inheritance. I wrote yesterday that the idea is flawed and tries to work around problems which aren’t actually problems at all, but part of the language of CSS. As Duncan noted: the problem is actually, “people write bad CSS”. Dirk from the DECAF…

Avoiding specificity issues in CSS

CSS Reset done properly

A CSS Reset (or “Reset CSS”) is a short, often compressed set of CSS rules to reset the styling of HTML elements to a consistent standard. I've rolled my own; based on my own experience of CSS programming over the past fourteen years and based on other, well-known reset files.

CSS Reset done properly

Can I Use…?

The most useful website I've found to use over the past year for front-end web development is “Can I Use” by Alexis Deveria.

Can I Use…?

Percentage-based CSS column layouts

Laying out a page using percentage-based columns seems to be pretty easy. However, in responsive layouts, you’ll quickly run into problems if you don’t take legibility into account. The most obvious case is when the columns are predominantly text-based, where a suitable gutter between the columns is essential for the sake of legibility. (If you want to skip the theory…

Percentage-based CSS column layouts

Cleaner layout and better navigation

If you’re reading this on the website (and not in an RSS reader or the like) then you’re seeing the new version of the website. Similar to the old one in general terms, but re-built (again) from the ground up using LESS and a dusting of jQuery. There are new features and content pages coming, but for now,…

Cleaner layout and better navigation