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:
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.
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.