In order to normalize HTML elements cross-browser, I use my own flavor of Nicolas Gallagher's normalize.css. It has a few tweaks here and there, but nothing major is changed. I keep that in a Sass directory named dependencies, where I also store partials for fonts, functions, icons and variables. Element styles that pertain specifically to the designs I build are kept in an elements directory. Element styles for this site are shown below.
I keep CSS classes for buttons very narrow in scope. The .btn class provides a baseline for button design. In addition, I created a handful modifier classes that can be combined to achieve various design objectives. Modifiers are grouped in my _button.scss Sass partial based by their function. The methology was mostly inspired by Harry Roberts beautons project.
For syntax highlighting, I use Google's Prettify script. I'm aware of several popular alternatives, but in my experience Prettify is a great solution — it's fast, accurate and covers a ton of languages. I keep a _prettify.scss partial in a Sass directory named plugins, along with other partials that are specific to plugins and scripts. My _code.scss partial is quite basic.
I keep heading styles fairly simple. I have a heading mixin that defines some basic styles that are used in heading classes. Those classes are then extended to the heading elements. This allows semantic use of headings, without design contraints, as shown in each paragraph element below.
I\'ve long been inspired by Nicole Sullivan\'s OOCSS, and in recent years, BEM. All CSS that I write is anchored by those methodologies, as well as a loose mixture of others like SMACCS and ACSS. Below are the modular chunks of CSS for this site, each of whose code lives in its own partial inside a Sass directory named modules.
The albumnav module is used for content published in the photo custom post type. The photo post type has a custom taxonomy named album. When multiple photos are displayed on an album page, the active album in the albumnav module is shown with a blue background. Since a given photo may exist in multiple albums, the single photo page includes checkmarks (on every viewport except mobile) next to each album that the photo exists in.
Always is the case that you need small CSS rules to nudge a design one way or another. I call these micro rules that aid the pursuit of pixel perfection utilities. I keep a utilities directory inside of which I have partials for color, layout, spacing and text. Below you can see these narrowly-scoped utility classes in action.