Pros and Cons: One Style Sheet or Many

In CSS, there are generally two schools of thought about apply cascading style sheets to your front-end code. You either section your style sheets off so that your CSS folder looks something like this:


header.css
footer.css
sidebar.css
main.css
social.css

You get the idea. By sectioning off your code into the sections they are intended for, it creates a nice organization of sorts. Then there is the other school of thought, where someone has created a theme and the css folder just contains:

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More


style.css

All the CSS code for the theme you are using (assuming you are using a theme) is crammed into one file.

In most cases, one approach or the other doesn’t really matter. In terms of the way the code is received via an HTTP call, the one big file may prove to be a couple milliseconds faster, but it usually isn’t noticeable.

Personally, I like to cram all my CSS code into one sheet. Then I use Ctrl+F in an editor (PC user) to find the class or ID that I am looking for. You can all take the CSS import rule into account too, but we won’t get into that right now. A few things to consider when deciding what is right for you.

Sometimes you don’t get a choice with your theme

If you are using WordPress or Drupal or any other CMS, you are using a theme. And most people use themes that have already been created by someone else. So right out of the box, you may have to adapt to someone else’s CSS preference.

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More

If you are a super newbie, this video will help you understand how to work with CSS code that came straight to you from a theme.

How comfortable are you with browser console?

Chances are, if you are a web developer, you know all about browser console. Console is provided by default in Chrome browsers (F12), and Firebug is often used for Firefox. This will help you easily find CSS classes and ID’s when you need to, which makes one big style sheet easier to navigate.

On the other hand, if you like to scroll through your style sheets directly, then you are better off splitting up your code into well organized areas.

Try both and you will know what you want to do

There is no wrong or right answer here, it’s all about preference. And even though the debate is as strong as Biggie vs. Tupac or Mac vs. PC, it all comes down to what works best to you. Remember, that one big CSS file is slightly easier for the browsers to digest because it is only one HTTP call, but it’s negligible at best.

If you like organization right out of the box, then organize your CSS files early and stick to the organization you have set up. If you are good with using browser console and are fast in your editor, then it may be faster for you to work with one big sheet.

Like I said, personally I am a one big sheet kind of person. When I get a theme out of the box, and there are 10 different style sheets, I usually combine them all into one. The only exception I have is for mobile @media distinctions which can get messy in the one sheet option.

Share and Enjoy !

0Shares
0 0