Stylesheet organisation
About a year and a half ago I realised I needed to get a grip on how to organise my CSS. I established a template, which I proceeded to change drastically with every new project. I noticed recently that I've been reusing a version for the past few projects, with at the most only minor amendments to the general structure. I also noticed how quickly I'm rolling out initial designs using this template.
I have finally reached the point where I figured out what I consistently reuse across projects, and finally have a stylesheet structure that makes such intuitive sense to me I can dart around and make changes with my eyes closed. I find my stylesheets are much smaller, but even as they grow, I still know exactly where everything is. I wish I had some statistics to quote about the amount of time spent scrolling through CSS looking for things. I'm confident it is much reduced.
Some aspects of my workflow I developed through intuition; I made changes that felt right to me at the time, without really consulting anyone else's best practices. Other things I picked up from here and there. Every now and again I'd search for 'the right way' of doing this and find processes and systems that didn't gel with me (a primary example of this being the number of pre- built grid systems I tried and hated). Eventually I would give up under the sheer number of contradicting points of view, but I probably picked up some subconscious inspiration on the way.
I hadn't thought much of this until Chris Eppstein talked about this at FOWD today. A lot of the suggestions he demo'd are very similar to parts of my system (conceptually at least; he was discussing SASS and mine is raw CSS). So I figured it's reached the point it is worth sharing.
First things first, I start with a basic Initializr stylesheet; a couple of minor tweaks, but then I largely accept the helper classes and IE fixes and hacks (no need to read this; it's just here for completeness):
/* ======================================================================
HTML5 Boilerplate CSS: h5bp.com/css
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
html { height: 100%, font-size: 62.5%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { height: 100%; margin: 0; padding: 0; font-size: 1em; }
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
a { color: #00e; }
a:visited { color: #551a8b; }
a:hover { color: #06e; }
a:focus { outline: thin dotted; }
a:hover, a:active { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
blockquote { margin: 1em 40px; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
small { font-size: 85%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
label { cursor: pointer; }
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
button, input { line-height: normal; }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
button[disabled], input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
textarea { overflow: auto; vertical-align: top; resize: vertical; }
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* ===============
ALL: IE Fixes
=============== */
.ie7 #title{ padding-top:20px; }
/*******************************************/
/* */
/* My styles go here! */
/* */
/*******************************************/
/* =============================================================================
Non-Semantic Helper Classes
========================================================================== */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* =============================================================================
Print Styles
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
} My template is inserted into the appropriate point of the Initializr stylesheet. I divide into five sections:
/* 0 Accessibility */
/* 1 Typography */
/* 2 Colours & borders */
/* 3 Spacing & layout */
/* 4 Images & video */ I start each section with empty media query clauses for 480px and up, 768px and up, 1024px and up, and 1200px and up. By the time a project is done each section will typically have from one to six media query breakpoints in it, according to requirements.
0\\\\. Accessibility
A staple of this so far is:
/**
0 Accessibility
**/
.no-css {
/* This class hides stuff that needs to be around for screenreaders or users with no CSS, but not in normal circumstances */
position: absolute; left: -1000px;
} Which I chuck in when I use visuals to enhance some content, to hide an appropriately positioned textual equivalent.
There's probably more useful stuff that should be here. I'm working on it. (Suggestions welcome!).
1\\\\. Typography
Not a lot going on here. Some obvious placeholders, plus a couple of classes I found myself needing over and over, which should be self explanatory (.win and .fail are applied to success or error messages; usually a form submission is involved).
/**
1 Typography
**/
h1 {}
h2 {}
h3 {}
h4 {}
p {}
a { text-decoration: inherit; }
a:hover { text-decoration: underline; }
.note {
font-size: 1em;
font-weight: bold;
text-align: right;
}
.wee {
font-size: 0.8em;
}
.win, .fail {} In typography, I strictly only include font stuff like faces, sizes, alignment, decoration and enhancements like text-decoration, font-weight.
2\\\\. Colours and borders
Border styles go here because they need to be defined before the border colours are. Otherwise, just colours go here:
/* Borders */
.win, .fail { border: 2px solid; }
/* Dark */
.dark { color: #2d2d2d;}
.dark-bg { background-color: #2d2d2d; }
.darker{ color: #000; }
.darker-bg { background-color: #000; }
/* Primary Color */
.color1 { color: green; }
.color1-bg { background-color: green; }
.color1-border { border-color: green; }
.color1-texture { }
/* Secondary Color */
.color2 { color: yellow; }
.color2-bg { background-color: yellow; }
.color2-border { border-color: yellow; }
.color2-texture { }
/* Tertiary Color */
.color3 { color: red; }
.color3-bg { background-color: red; }
.color3-border { border-color: red; }
.color3-texture { }
/* Light */
.light { color: #ccc; }
.light-bg { background-color: #ccc; }
.lighter { color: #fff; }
.lighter-bg { background-color: #fff; }
.note { color: silver; }
.win {
background-color: #E6EFC2;
color:#264409;
border-color:#C6D880;
}
.fail {
background:#FBE3E4;
color:#8a1f11;
border-color:#FBC2C4;
} After border styles, I start with the colour scheme, creating classes for text colours, background colours and border colours. It's unusual to need to go beyond a tertiary colour, and typically I only have primary and secondary. This leaves me with classes I can apply to any elements in my html templates, making it really quick and easy to experiment with different colour combinations. The color*-texture classes come in handy when I have textured backgrounds that match the colour scheme, and would include the background image (a repeating square of noise texture for example) and a background- colour as a backup.
Most of the time I don't want to be applying classes to everything to add colour though. I list elements that I'm confident aren't going to change in the mark-up which need colours applying to them, for example:
/**
2 Colours and borders
**/
/* Primary colour */
.color1, body { color: green; }
.color1-bg, nav, footer { background-color: green; }
/* Secondary Color */
.color2, nav { color: yellow; }
.color2-bg, body { background-color: yellow; }
/* ...etc... */ I'm a fan of using off-white and off-black, so these are what I originally picked for my .light and .dark classes, which are always handy to have. Sometimes pure black and white are necessary too though, so the .lighter and .darker classes were born.
You can see .note, .win and .fail show up here too.
This pretty much means this is as long as the colours section will ever get. I don't apply colours anywhere else in the stylesheet, and it helps to ensure I stick to a colour scheme and don't get carried away with exceptions. Obviously, this also makes it super easy to change the colour scheme uniformly in a couple of seconds.
3\\\\. Spacing and grid
As I already mentioned, I have poked around with some of the existing flexible grid frameworks but none of them grabbed me. They all seemed to have too much. The minimalist system I came up with has answered all of my needs so far, although I wouldn't claim it's suitable for every project in the world. It's also subject to tweaks, depending on the project of the moment.
I stick with Initializr's .wrapper class, which is 100% width until the viewport reaches 1024px, when it snaps to 900px wide. This is my default because it's been the most frequently appropriate so far. I have an ongoing project at the moment where the target audience are largely gamers, so capitalising on the excessive screen real estate they'll probably have means I stripped out this restriction in favour of a full width multi-column layout when the device allows.
I haven't yet had a need to go above five columns for my grid. I express my class names like fractions, and start off with only the 1/2, 1/3 and 2/3 ones taking up the correct proportion of the screen, with the others defaulting to 100%. This then changes for wider-than-small viewports, as you can see.
There are a few navigation list related things in there that I often find myself duplicating across projects (like a default centre-aligned stacked menu which progresses to a floating horizontal version). I pad my a elements (as opposed to their containing li elements) to enlarge the touch area for links. Plus some nth-child stuff for three column layouts, for keeping consistent row heights when the column heights are different.
/**
3 Spacing & Grid
**/
.wrapper {
width: 100%;
}
/* Grid */
.w1of2 { width: 50%; float: left; }
.w1of3 { width: 33%; float: left; }
.w2of3 { width: 66%; float; left; }
.w1of1, .w1of4, .w1of5,
.w3of4, .w2of5, .w3of5, .w4of5 {
width: 100%;
}
.inner {
padding: 1em;
}
nav {
max-width: 100%;
}
nav a {
display: block;
padding: 0.8em;
}
.inline { display: inline; }
.win, .fail {
padding: 0.2em;
display: block;
}
/* 3.1 */
@media screen and (min-width: 479px){
nav li { float: left; }
}
/* 3.2 */
@media screen and (min-width: 768px){
.w1of2 { width: 50%; float: left; }
.w1of3 { width: 33%; float: left; }
.w1of4 { width: 25%; float: left; }
.w1of5 { width: 20%; float: left; }
.w2of3 { width: 66%; float: left; }
.w3of4 { width: 75%; float: left; }
.w2of5 { width: 40%; float: left; }
.w3of5 { width: 60%; float: left; }
.w4of5 { width: 80%; float: left; }
.w1of3:nth-child(odd) { clear: none; }
.w1of3:nth-child(3n-2) { clear: both; }
}
/* 3.3 */
@media screen and (min-width: 1024px){
.wrapper {
width: 900px;
margin-left: auto; margin-right: auto;
}
} Everything that goes in this section is to do with spacing: padding, margins, positioning, floating, wrapping... et cetera.
4\\\\. Images and video
Most projects call for tweaks to images that may or may not fit into the other sections of the stylesheet. Nonetheless, my brain copes better with I group them all together. Flexible YouTube video embed lives here too.
/**
4.0 Images and video
**/
.vid-holder {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.vid-holder iframe,
.vid-holder object,
.vid-holder embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Full width images on bigger than small screens are dumb. Reset this. */
@media screen and (max-width: 478px){
.w1of1 img, .w1of2 img, .w1of3 img, .w1of4 img, .w1of5 img,
.w2of3 img, .w3of4 img, .w2of5 img, .w3of5 img, .w4of5 img {
width: 100%;
}
} And that's what I start all projects with. Here is it all assembled, with a few of the classes throw into the mark-up so you can see what's going on. If (when) I end up doing another major update, I shall probably write about it again.
Last modified: