I recently began a mini-project to streamline and upgrade the London College of Fashion CSS stylesheets. The overall aim was good housekeeping – and the wish to put new skills to use in polishing up the site’s front end. This post is a work in progress, I’ll be updating it as I go.
Why upgrade the CSS?
Some background: the LCF website was redesigned in 2007 as part of the University of the Arts London family of websites. The original designers implemented some generic styles used by all College sites, as well as styles particular to each College (including colour-coding). Since 2007 the stylesheets have been copied, tweaked, added to and duplicated without any version control or system of documenting changes (beyond occasional comments in the files themselves).
The system that I’ve inherited has quite a few flaws:
- Too many CSS files – I counted nine – meaning unnecessary HTTP requests
- Bloated files with unnecessary rules – about 3,000 lines of code in total, including a blog stylesheet
- Verbose, inefficient CSS selectors (I’ve learned some new tricks to do with efficiently rendering CSS recently)
- No style rules for basic semantic elements like
<blockquote>and<small>
Speed and inefficiency weren’t the only reasons for improving our CSS; the site – with the exception of our WordPress blog – has a static front end anyway, so it’s already pretty fast. Making these changes were also motivated by wanting to put new skills into practice, taking ownership of the CSS, and generally setting the LCF house in order in time for the new CMS implementation.
As anyone skilled in CSS knows, writing good CSS is all about refinement and cleanness. It’s about writing one line instead of two. If you care about CSS, you shouldn’t be able live with shoddy, inaccurate code.
Step 1: HTML5 Reset
It made sense to start with the basics, and to implement a future-proof reset stylesheet that not only addressed gaps in the current CSS but also catered for all the new HTML elements we’re sure to be using sooner or later.
Lots of work has been done in this area but Rich Clark‘s HTML5 Doctor reset stylesheet appeared to be the industry standard.
Resetting base styles in this way meant I could do an initial pass of the existing CSS, removing all those instances of border: 0; and margin: 0; etc.
Step 2: Reduce and refine
The existing CSS had a file called type.css. It had about 60 lines, but incorporated a dozen rules for selectors that were not used at all, anywhere on our website. So anything useful in type.css was rolled into my core stylesheet, html.css.
I found lots of dead wood in the biggest stylesheet, custom.css. This kind of selector mayhem:
#main-content #content-col #inner-right h3.wide span
was everywhere. To focus on this example alone, I discovered that nowhere on our site is there an occurence of #content-col outside of a containing #main-content block – so there was no need for a parent selector. Similarly, there’s no need for this:
#main-content #content-col h1
if there’s only ever one instance of <h1> on the page. Again:
div#breadcrumb-trail
- the div here is an over-qualification, since the ‘breadcrumb-trail’ id is only ever applied to a div, and only makes the rule less efficient (thanks again Chris Coyier).
There were all kinds of elements in the old HTML files that have become part of the furniture over the last 3 years, but which probably should never have been there in the first place. For example, the designers must at some point have decided to add a colour-coded class to the <body> element, but they never made it college-specific. So each of the hundreds of HTML pages on the University website has:
<body class="blue">
The class ‘blue’ has no style rules, so it’s just useless cruft.
Step 3: styling for Internet Explorer
Following Paul Irish’s guidelines for feeding modified style rules to different versions of IE, I set up a basic conditional statement to detect for everybody’s favourite browser, adding a class to the element:
<!--[if IE ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><![endif]--> <!--[if !IE]><!--><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><!--<![endif]-->
I didn’t expect there to be too many special rules, but at least this gave me a valid method of specifying rules without fetching a separate file from the server.
Step 4: rediscovering the lost grid
The LCF site is built around a grid. Not one of today’s nice modern 960 grids, but a custom-built one with the following spec:
- 16 columns
- 982px wide
- 51px grid squares
- 9px gutters on the right-hand side of each column (as opposed to 4.5px on each side like most grids. This means that the far-right column has to have its margin removed so as not to overspill)
- a 30px left-hand margin on the main container element, to prevent the content resting flush against the left-hand edge of the viewport
The original grid existed only as a PSD file buried deep in a shared drive. However, using it and the column widths in the existing CSS, I was able to modify Nathan Smith’s 16-column grid stylesheet to fit the UAL grid. It’s not pretty, I realise. I actually had to make the left margin 31px, to remove the 1px wide gap on the right hand edge of the main content block, which was there because 16 x 60 – 9 equals 951, not 952, the original width of the container. Phew.
With my new ualgrid.css, I was able to apply predefined CSS selectors to HTML elements, and ensure consistent widths and spacing site-wide. Using a grid also meant that I could remove dozens of instances of <float: left;>, and <clear: both;> from the CSS.
Illustration of the website's original design grid.