CSS Frameworks, and why I use them

I’m sure anyone, who has ever down any hardcore web development or developed a web application will know that after you reach a certain size, your CSS files start to get unwieldy — That is, they become hard to edit, cumbersome to make bug fixes to, and sometimes start taking a month of Fridays to load.

A Common solution to this is to use CSS Indexing, where you set up a system of comments to be able to quickly find your way around your files. While this method of having Comment Headings for each section works, it still leaves you with a massive file size.

Another solution is to go the way of a Framework, where by you break each part in your css down to it’s core components. A list of the core components may look quite similar to the following:

reset.css
Yes, I use a reset stylesheet, simple because it makes it easier to develop styles consistently across browsers.
typography.css
This includes everything to do with type. From the Baseline and Line-height settings, right through to font-sizes and image alignment.
grid.css
A standard style grid systems. Typically including CSS for doing column layouts and table grids.
importer.css
One file to @import in all your CSS files, alternatively you can just link in each of your stylesheets using the <link> tag in HTML.

From that basic layout of files, I then use a I trick call “Body Identification”, this is simply the method of applying a unique ID to each type of page in your site. e.g. If your ‘about us’ page needs a red background, then I’d use this selector to apply the CSS rule.

With using a unique page ID, it’s probably a good practice to put all the CSS files named by their unique ID’s in a folder called ‘pages’ or ‘layouts’. You’re file structure is now looking much more like this:

  • ./ grid.css
  • ./ reset.css
  • ./ typography.css
  • ./ pages /
    • aboutus.css
    • frontpage.css
    • blog.css
  • ./ importer.css

So there you have it, a simple way to manage your css, with the benefits of being in small chunked files, having an abstracted framework to work around — a Scaffold, if you will — and, you also have highly specific stylesheets targeting individual pages of your application.

You can Learn more about CSS Frameworks at:

What’s your own take on the Use of CSS Framworks and They’re Applications?

Advertisements

  1. The amount of CSS you have is going to boil down to the inherit complexity of your design.

    If you want less CSS, design it as such when mocking up the design. When I’m in my image editor, I think about what parts will be CSS, and what parts will have to be background images (keeping those to a minimum).

    That said, certain kinds of sites will use have a number of levels of clear separation between CSS uses, such as generic UI elements, and then specific implementations. In such a case where I have an @import sheet and several individual CSS files, I run a script to combine the sheets together before uploading. If you don’t combine sheets then the page will take much longer to load – not because of data size – but because of inherit lag in HTTP requests.

  2. @Kroc Camen:
    The use of Frameworks I’d heavily recommend for a large site, where things vary lots. For example, sites that could use frameworks are DeviantART, The Times News, The Sydney Morning Herald. For Smaller sites, or less complexly designed sites, it’s usually not necessary to use a framework structure.

    As for using the @import method, that’s just a chosen way, there’s any number of ways, including combining your css are production level.

  3. Ultimately, it’s this: Who are you making things easy for?
    If you want to make things easy for the user, then you’d ship one css file (either as written, or compiled) for maximum speed, or you want to make things easy for the developer, so you ship lots of css files you can easily modify, allowing for quick progress.

    Wasting a HTTP request for a reset is bordering on the reckless though. Every single HTTP request counts. My reset is just one declaration at the top of my CSS page, no need for a separate file. In my next design, I’ll do away with the reset entirely as I’m not targetting IE, so I don’t need to please it’s behaviours.

  4. @Kroc Camen
    Well, currently I use multiple imports to develop, but when It’s released, I’m using a compile script to merge into one and cache, then I server up the cached stylesheet.




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s



%d bloggers like this: