Writing CSS

A Plan.

A style sheet, or CSS file, can be a thing of efficiency, or a complete mess. To keep it from being the latter, think in terms of the cascade. Use the broadest selector to set the most of a given declaration. The most basic example is setting the base font. Here, use body as the selector, as everything inside body will follow the rules you set.

There is a sequence that reflects this kind of efficiency. The order below mostly works from big to small, following the HTML.

• @import rules
• @font-face rules
• variables (with preprocessor)
• mixins (with preprocessor)
• body (to set base font)
• stand-alones (general rules that don't need context)
• follow the HTML…
• media queries

’Splain, Lucy

@import

@imports, whether just a reset stylesheet (which should be considered an absolute necessity), or parts of a library, come first, as these rules (etc.) need to be established first. If using a reset sheet, you want everything reset before you start setting things. Logical.

@font-face

If you are using web fonts, the browser needs to know where those fonts are. This is always in relation to your stylesheet, the CSS. If you are using a preprocessor (SASS or Less), make sure the src path is from your CSS, not the SCSS file.

body

I use the body tag/element to set the base font. The base font is the main font for text. Typographically, all other typographic decisions are based off this. One can use the universal selector (*), or the html selector for this, but I think body makes more sense.

body {
  font-size: 1.25rem;
  font-family: LatoLight, helvetica, arial, sans-serif;
  color: #646464;
  line-height: 1.5;
  font-feature-settings: "kern", "liga", "clig", "calt", "onum", "pnum";
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

stand-alones

This is my own term, but these are very general rules that don't need a context, such as that for indenting paragraphs, or setting display parameters for images:

img
{
	display: block;
	max-width: 100%;
	height: auto;
}

p+p { text-indent: 1.2rem; }

follow the HTML

This is simply a matter of using the main block-level elements, in order. I most often start with a wrapper div, and set its display (usually either flex or grid) and any additional rules for that, as well as its width and margins. Then I proceed in order of the main elements (header, article, nav, footer, etc.), setting display/placement parameters first, then moving to details.

media queries

Again, logic. Once the site is set up, media queries can be used to instill responsiveness. This may seem to mostly contradict the "mobile first" mantra, but it seems, at least to me, to be the logical way to work. Get everything established, then mess with it.