CODEWITHSUNDEEP
css
Moses
Moses

Reputation: 9173

CSS Best Practices for Large Scale Web Site

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?

Upvotes: 5

Views: 5497

Answers (5)

andrej
andrej

Reputation: 255

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

Upvotes: 4

Shay Rojansky
Shay Rojansky

Reputation: 16672

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

Upvotes: 1

ClosureCowboy
ClosureCowboy

Reputation: 21541

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">

Upvotes: 6

Seth
Seth

Reputation: 6260

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.

Upvotes: 0

sweetroll
sweetroll

Reputation: 176

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.

Upvotes: 0

Related Questions