CSS Best Practice

[HungryHippos]

Hi,

I run a website at work for internal use that is pretty simple really, it's running ASP.NET C#. Currently I am using a single style sheet for styling my elements.

One of the problems I've had is that sometimes I get a bit lost on how best to approach styling my page content, and often wind up having different classes for specific things that could probably be better served by being cleverer with how I define my page elements and subsequently deciding how they should look. I then wind up getting a bit "lost" in my CSS as there is probably way too much CSS considering most of my content is standardised.

Most of my pages are either full page width contents, as I'm generally just displaying data, allowing users to filter the data. Occasionally I split my page down the middle and have a "left side" and a "right side". Often when doing such things I find myself having a separate class in my CSS for .LeftSide and .RightSide, and then of course I have to define things such as .LeftSide h1, and .LeftSide p for my <divs> and subsequent HTML elements.

I would like to re-approach how I've done the CSS and almost start over, but using more sensible CSS that makes updates easier. Can anyone suggest the best approach to this? what works well for you?

At a guess I should really define my basic styling for all heading elements, all page backgrounds, all paragraph fonts/spacing etc, and then when I want an element to look different give it a different class?

 

[MissileMoose]

Take a look at Block-Element-Modifier (Explanation).

 

[HungryHippos]

Hmm not sure that's entirely what I'm after, I guess I'm more interested in how people go about structuring their CSS and making it easy to update, and apply to the elements of the page without creating classes and id's all over the place!

 

[Randomface74]

usually start with something like...

* { margin:0; padding:0; font:11px Verdana sans-serif; }
h1 { font-size:20px; }
h2 { font-size:16px; }
p { margin:15px; }

because I find that quite efficient. but most people start with this http://html5boilerplate.com/

if your left and right sides genuinely are different, I don't see what choice you have tho.

 

[uniQ]

 

[Mailman86]

To sum it all up in a few words is quite difficult, but one important thing to be careful of is when you are overriding styles. Doing so is fine but be aware that at some point you may have to override your override and then also override that and so on. So think carefully when you do to avoid getting yourself in to a mess in the future. When you define a class, think carefully what you want it to represent and style it as such and nothing else. Define some base styles and override where necessary and where appropriate. Don't forget the styling of an element can be done with an accumulation of classes. If you are stuggling what to name your classes, the BEM format that has been suggested might be something you might want to look at.

There are certain stylistic things meaning there are several right answers to the same question. Have a google for tutorials on semantics and mananging the cascade are a good start.

A css pre compiler like SASS might help, but they are not the holy grail and can do more harm than good. However, if used well, they are invaluable and will help with some of css's shortcomings.

 

[fez]

This is a pretty good book http://smacss.com/ although it deals in SASS rather than pure CSS but the principles are all valid.

I have been using SASS for a few months now and love it. You can separate all your CSS into logical files and build to a single file (or multiple) for deployment.

 

[HungryHippos]

Thanks for all the replies guys, been busy last week but got around to putting some time into this. I think some of the recommendations here are a little overkill for my little project/site, but I have fine tuned the CSS and tried to do better with assigning styles to my pages and elements.

So far I've managed to bring my .css file down from 1464 lines, to 592