Modular CSS from 10,000 feet

Modular CSS from 10,000 feet

Summary: Anyone can write CSS.h1 { color: red; }There you go, easy, isn’t it?


Anyone can write CSS.

h1 { color: red; }

There you go, easy, isn’t it? Well, yes, that is indeed the whole point.

However, organising CSS is a whole different ball game. To properly manage CSS on anything more than a couple of pages is a job in itself (ie a Front End Developer). My own portfolio website is only six pages. Yet still I have managed to wrap myself in CSS knots.

Part of the reason for this is that I’m retrospectively building a responsive design. BIG MISTAKE. Oh yes, because unless you abstract your CSS classes before attempting this process, you end up repeating and overwriting all sorts of margins, paddings and font-sizes.

Far better to follow a scalable and modular methodology from scratch, as advocated by Jonathan Snook on and Nicole Sullivan on, amongst others.

For example, I wrote this for a form button:

.button {
font-family: serif;
font-weight: bold;
margin-left: 68px;
padding-top: 3px;

The big problem with this is that it mixes up margins and paddings with typography. As I tweaked margins to fit differently sized screens, I found I had to pull out the typography.

The typography lives in the Base section (ie all HTML buttons will always be bold and serif) and the margins move to the State section (“[State rules…] are about describing how a module or layout looks on screens that are smaller or bigger.”).

This task of retrospective refactoring and modularizationism is hard work.

I use Nicholas Gallagher’s Normalize.css to “reset” my CSS, as it’s philosophy is to fix things that are broken rather than reset everything to a blank canvas. Part of the hard work is incorporating just the bits that I need, so it’s leaner and more controllable (and also I learn what’s going on). The task here is to bring into the Base section, as these are the ‘declare once, use everywhere’ rules.

It is also hard work because I am rewriting. Far better to write modular CSS from the beginning.

One of the downsides of writing CSS in this manner is that it can be quite verbose. I’m currently on 600+ lines for 6 pages. That’s 100 lines of CSS per page!! To help with finding my way around the Sass file, I have started using MASSIVE GREAT BIG ASCII ART TITLE COMMENTS at the beginning of each section. Sure, this adds a few hundred lines to the pre-compiled CSS but that really doesn’t matter. What’s important in the Sass file is finding your way around.

I used the old skool ASCII Generator 'Univers' font, which is a lovely, long-standing online tool:

ASCII Generator - THEME
The ASCII Generator tool in action

The Sublime Text editor has a lovely Minimap feature, which gives you an overview of your code “from 10,000 feet”. By having MASSIVE ASCII TITLE COMMENTS in the code, you can see them in the Minimap view, in the same way you can the Great Wall of China from space:

Big ASCII text in Sublime Sass file

I was so enamoured by this discovery, I’ve even made a gist snippet of the headings for other people using the SMACSS organisation:

SMACSS Sass headings - Gist
The author’s public-minded contribution to SMACSS organisation

For those people interested in Minimap functionality in other text editors, there’s plugins for TextMate, Visual Studio, Vim and Dreamweaver.

Topic: Software Development

Jake Rayson

About Jake Rayson

A web designer since the 20th century, I am a pragmatic advocate of Free Software and I use proprietary software when appropriate. I made the full-time switch to Linux back in 2007, and my desktop tools of choice are Linux Mint, Inkscape, GIMP and Sublime Text.

As a Front End Developer, my core skills are HTML5, CSS3 and jQuery, and my working life reflects my commitment to open standards and accessible websites (ie accessible by everyone, regardless of browser, platform, ability or technology).

For web publishing platforms, I use WordPress for ease of use and Drupal for more complex solutions.

I am also learning about Ruby, Rails, Sinatra and CoffeeScript. I like the minimalist Ruby Way. To this end, my personal portfolio website is built with NestaCMS.

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.


Log in or register to start the discussion