5

So far, my experience in web design has been with very small scale sites and blogs (where there isn't much diversity in page styling). However, I am now beginning to tackle some significantly larger scale web sites and I want to start off on the right foot by creating a scalable and maintainable css file / structure.

Currently, my method for applying styles to web pages is to give every web page a distinct ID in the body, and then when I'm designing a page my css rule will look like this: 

body#news section .top { rules }

Surely there is a more maintainable approach to applying CSS for a large-scale web site?

Moses
  • 9,033
  • 5
  • 44
  • 67

5 Answers5

6

Avoid giving each page a body tag with a unique ID. Why? Because if a page needs to be styled uniquely, it should have its own stylesheet.

I will often have a main.css stylesheet, stylesheets for various similar portions of my website (like an administration.css for an admin section, assuming the pages in the admin section shared a similar look and feel), and then give certain unique pages their own stylesheets (like signup.css).

I then include the stylesheets in order from least-to-most specific, because if two otherwise-identical rules are encountered, the rule in the most "recently" included stylesheet will be used.

For example, if my main.css had:

a { color: red; }

... and for some reason, I wanted my signup page to have blue links:

a { color: blue; }

The second rule will overwrite the first if my signup.css were included after main.css.

<link rel="stylesheet" href="/stylesheets/main.css">
<link rel="stylesheet" href="/stylesheets/signup.css">
ClosureCowboy
  • 20,825
  • 13
  • 57
  • 71
  • Wont this make fixing bugs that much harder because you have to maintain two stylesheets for each page, not just one? – Moses Mar 02 '11 at 02:10
  • If anything, it makes fixing bugs easier -- my stylesheets aren't as long and messy because the files are logically split up. Additionally, all recent browsers' developer tools (IE7, IE8, Firefox, Chrome, Opera, and Safari) will show you which stylesheet a particular rule came from. – ClosureCowboy Mar 02 '11 at 02:13
  • 1
    It feels a little wasteful making an additional HTTP request when a lot of the secondary stylesheets I'll be grabbing will only be a few lines long. Though, I suppose the small loss in speed is a decent trade-off for keeping a maintainable site. – Moses Mar 02 '11 at 02:21
  • 1
    @Moses, if you're concerned about this, there are ways to combine assets before they are sent to the client. See: http://www.google.com/search?q=asset+combining+css – ClosureCowboy Mar 02 '11 at 02:59
4

there is a very informative and detailed answer over here: Managing CSS Explosion

you could also check out object oriented css: http://www.slideshare.net/stubbornella/object-oriented-css

or css systems: http://www.slideshare.net/nataliedowne/css-systems-presentation

Community
  • 1
  • 1
andrej
  • 255
  • 2
  • 3
  • 11
1

To sum up the above answers and give some additional comments:

  1. You put everything in one CSS, and use unique body IDs for page-specific settings. This approach speeds up your site because you're saving HTTP requests (browser caches just one file)
  2. You have one CSS per page, plus one global one to take care of global settings, header, footer and any other elements that appear everywhere. This is friendlier if you have more than one developer working - less chance of conflicts because of updates to the same file. Even if you use a versioning system like SVN (and with a big site you should), it's always safer to have different files.
  3. You can have the best of both worlds by separating into files, and then using a minifier to merge and compress all of them into one "compiled" CSS. This is more complicated, you need to fit it into your workflow, and it makes frontend debugging harder. See Any recommendations for a CSS minifier?.
Community
  • 1
  • 1
Shay Rojansky
  • 15,357
  • 2
  • 40
  • 69
0

What you should find is that most pages will have similar design aspects like typography and basic formatting which means you dont need to apply and id to the body tag.

You should try and use ids that describe the structure of your page (header, footer, sidebar etc) which can be reused on each page where neccessary. Only when styling areas specific to news or project etc is when you should start using id=news.

At the end of the day there is no right and wrong answer. Just try to maintain resuable css styles whilst trying not to overload your markup with uneccessary tags.

sweetroll
  • 176
  • 2
  • 10
0

Always use classes for CSS. This will allow you to reuse more of your code. Since you can have multiple duplicate classes per page this allows you to really create some small code.

CSS parses from right to left. So in the example above it will find your selector in this order:

elements with the classname .top elements with the classname .top that are in the section tag elements with the classname .top that are in a section tag also contained in the #news element ...etc.

Look at it this way you should really try to keep your selectors as short as possible. Create a base style for .top, then if you need to write something custom for the #news section you can use #news .top.

Always try to use the shortest possible rules.

margin:0 5px;

over

margin:0 5px 0 5px;

It's basic, but you'd be amazed at how many people don't do this.

Also learn what you can shorted:

ex: font:bold 12px Helvetica, Arial, sans-serif;

One thing that is very helpful is if you alphabetize your rules. Especially if you are using CSS3 -webkit- and -moz- properties. I get a lot of push back on this one, but I work with 12+ developers and I've seen

.myClass { color:#f00; /* more stuff */ color:#fff; }

If they are alphabetical then you'll avoid code duplication.

Seth
  • 6,240
  • 3
  • 28
  • 44