APC Article: 21 ways to streamline your CSS

JeevesBond's picture

He has: 3,955 posts

Joined: Jun 2002

*** EDIT ***
Hello Digg users, I've posted some information on how you're killing our VPS. Smiling

Megan has written another a Padded Cell article (she's the clever one, I just do the donkey work Wink ):

These days, CSS development is a complex process. You may be working on sites with large CSS files, multiple developers ,and long development timelines. The more complex your CSS files become, the more difficult it is to work with them. This article will present some tips and tricks for keeping your CSS files organized and easy to work with.

http://www.apaddedcell.com/21-ways-streamline-your-css

This topic is for discussion and questions about the article.

a Padded Cell our articles site!

pr0gr4mm3r's picture

He has: 1,502 posts

Joined: Sep 2006

Access denied
You are not authorized to access this page.

May still need to be published. Smiling

JeevesBond's picture

He has: 3,955 posts

Joined: Jun 2002

Wow, Drupal had cached the 'Access Denied' message as the article.

*facepalm*

Thanks pr0gr4mm3r. Smiling

Megan's picture

She has: 11,410 posts

Joined: Jun 1999

Please post your own tips here as well!

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

Great article Megan!

I already do 95% of what you suggest, probably why my CSS works. Smiling

Typo Police:

20. Consider progessive ehnahcement

"enhancement"

I do not use the mozilla only styles, I prefer to have consistency cross browser. Matter of taste/style.

Also, on Drupal sites I DO repeat selectors because I group all my customized CSS at the end of the theme's style.css to override previous definitions, so they are easy to preserve when updating the theme - but that is a special situation.

One final suggestion - you do not discuss css hacks - I would specifically advise against using them because there is no guarantee they will be preserved in future browser updates.

Megan's picture

She has: 11,410 posts

Joined: Jun 1999

decibel.places wrote:
Also, on Drupal sites I DO repeat selectors because I group all my customized CSS at the end of the theme's style.css to override previous definitions, so they are easy to preserve when updating the theme - but that is a special situation.

Yes, that would be a different way of doing things on a large site. Although lately I've been trying to get rid of the drupal default CSS and just use my own instead of having to override everything.

One of the annoying things about Drupal is that they oftten use way too many selectors so you have to get really specific to override anything. And there's a lot of dependencies that can be annoying to deal with.

decibel.places wrote:
One final suggestion - you do not discuss css hacks - I would specifically advise against using them because there is no guarantee they will be preserved in future browser updates.

See point #16 Wink

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

See point #16

oops, sorry Megan - you got it covered... I searched for the word "hack" and - oh well Smiling

Regarding the nested Drupal selectors, yeah, that's why I use Firebug, to "Inspect" the inherited styles, I add a lot of selectors like div.someclass p#someid a (and if you try to reset just #someid nothing happens...) but I develop a lot of sites rapidly, and usually start with a gutted Framework theme for custom designs, or use 80% of an existing theme. (I like Twilight, Ability, Four Seasons - but that is probably worth a separate topic) Smiling

JeevesBond's picture

He has: 3,955 posts

Joined: Jun 2002

Typo police: thanks, fixed. Smiling

teammatt3's picture

He has: 2,100 posts

Joined: Sep 2003

That's a great article Megan. I never knew about a CSS reset like that. I just used * { padding:0; margin:0} and thought that was good enough.

The color reference thing: So now you tell me! I can't tell you how many times I have had to scroll through my CSS files looking for the right color. That's such a smart thing to do.

I actually hate shorthand style rules. I can never remember the order and I think having each side explicitly defined is easier to spot when you're scanning.

jrbeilke's picture

They have: 1 posts

Joined: Nov 2008

Nice article Megan. For the longest time I kept my css very basic, and not having additional comments, or a color reference was a bear down the road when something needed to be changed.

I now keep the original copy of my css (full comments, color reference, etc.) and then I minify my css by stripping out comments and whitespace for the smallest file size (I'm an optimization nut).

I personally use <link> instead of @import for my css files so that I can have additional css files for different media (print, etc.), and avoid a flash of unstyled content that can sometimes occur with @import.

I also sometimes use @import within my css files if I need to include an additional css file, but this can get complicated/confusing when you daisy chain style sheets together.

Megan's picture

She has: 11,410 posts

Joined: Jun 1999

jrbeilke wrote:
I personally use <link> instead of @import for my css files so that I can have additional css files for different media (print, etc.), and avoid a flash of unstyled content that can sometimes occur with @import.

I hadn't noticed that before, that the flash of unstyled content doesn't happen with <link>. I've been thiking about switching back lately because there's not much of a reason to block CSS from old browsers anymore using @import. That's why everyone started using it in the first place. AND, as you point out, some browsers ignore the media settings on @import. I usually use for print stylesheets and @import for everything else.

decibel.places's picture

He has: 1,494 posts

Joined: Jun 2008

avoid a flash of unstyled content that can sometimes occur with @import

I know that some Drupal template files have a comment "to avoid a flash of unstyled content" but I don't remember what the technique is.

Maybe it is here

Michael James Swan's picture

He has: 400 posts

Joined: May 2008

Hmm, i still need to learn css, because i have been coing a few websites recently, but then again. I can only use basic css at the moment and need to take things to a slighly more advanced level.

~ Mike

ps. Some great advice, i shall follow and use as one of my learning guides.

He has: 629 posts

Joined: May 2007

Instead of adding a DIV to IE with conditional comments (#17) I use this HTML:

<!--[if gte IE 8]><!--><body id="toolbox"><!--<![endif]-->
<!--[if lt IE 8]><body id="toolbox" class="msie5-7"><![endif]-->

In my CSS I can then put:

table ( font-size: inherit; }
.msie5-7 table { font-size: 100%; }

Also note that Steve Souders recommends you don't use @import.

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

NickD's picture

They have: 56 posts

Joined: May 2009

I used css for the first time ever in my suckerfish nav bar, and (drum roll) it works ! even in IE ! (now)

greg's picture

He has: 1,579 posts

Joined: Nov 2005

Really good article Megan.

Having read through it all, I agreed with every bit of it, and actually am glad to say I do most of that anyway.
Although I never use @import for stylesheets, IE conditional comments or reset the CSS in the start.
Resetting is probably useful, but I tend to declare everything specifically these days anyway, as it seems to make code more x browser.

Logical flow / cascading was just something that I did from my starting to code. I'm fairly logical, so putting the CSS in the exact same order as the content it's used on the page just happened by chance (fortunately) as I code the HTML from top to bottom so make the CSS from top to bottom as I go along.

It's surprising to delve into other people's code and see how many people have it all over the place.
And IE conditional comments I just never wanted to use, sounds to hack-like. I guess it will be really useful/essential sometimes, but I've managed without it so wont start now.

Although listing the colours is a good idea, I might use that. I usually have Gimp open anyway and tend to use the colour picker, or Firebug is great too. Right click on the element with the colour and just copy it from the CSS on the right.

Renegade's picture

He has: 3,022 posts

Joined: Oct 2002

Read this article when it was first posted and because I was bored, read it again. Wink

Just two things I'd like to point out:

Quote:
You may be working on sites with large CSS files, multiple developers ,and long development timelines.

Quote:
Before adding a selector — particularly a generic element selector — make sure to check through you CSS first to make sure it hasn’t already been used.

Smiling

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.