Working on a simple static site

I spent the evening working on a very simple static site. First thing I did was copy the CSS from this blog over to that site. I really like the way the CSS variables are organized on this blog.

One thing I don’t like is organizing CSS though. I generally try to utilize element styles, utility classes and classes for specific use cases. Take a site navigation for example. At the most basic level, the body element gets its own, default styles, to set up the font family, size and weight. Next you want to maybe have a horizontal list of navigation entries on larger screens and a vertical list on smaller screens. These could be done via .cluster and .stack classes (taken from one of my favorite books on anything computer, Every Layout). The problem with this is that you can’t apply CSS classes based on media queries. You can only apply CSS rules. You can either have two different chunks of HTML, show and hide them with media queries, and utilize these layout primitives (stack, cluster, …) or you inline the respective rules into a feature class. At least that’s what I call them. These are classes for art direction, where you have one-off CSS rules that aren’t generally useful.

Deciding what goes in a feature class, when you should favor a single chunk of HTML with a feature class or multiple chunks with utility classes and media queries – these are hard decisions to make. I find it much easier to organize actual code than CSS.

I like to believe that I’ve improved quite a bit at this over the years. My rules of thumb are:

• try to rely on feature classes as little as possible
• try to use layout primitives as much as possible
• when none of the above work, try a utility class instead (text-align:center)
• if all else fails, feature class it is