*** EDIT ***
Hello Digg users, I've posted some information on how you're killing our VPS. 
Megan has written another a Padded Cell article (she's the clever one, I just do the donkey work 
):
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 posted this at 20:36 — 11th November 2008.
He has: 1,338 posts
Joined: Sep 2006
May still need to be published.
PHP Starter
JeevesBond posted this at 20:49 — 11th November 2008.
He has: 3,795 posts
Joined: Jun 2002
Wow, Drupal had cached the 'Access Denied' message as the article.
*facepalm*
Thanks pr0gr4mm3r.
Megan posted this at 21:13 — 11th November 2008.
She has: 10,764 posts
Joined: Jun 1999
Please post your own tips here as well!
decibel.places posted this at 21:21 — 11th November 2008.
He has: 1,557 posts
Joined: Jun 2008
Great article Megan!
I already do 95% of what you suggest, probably why my CSS works.
Typo Police:
"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 posted this at 14:40 — 12th November 2008.
She has: 10,764 posts
Joined: Jun 1999
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.
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
Megan
My web design blog
decibel.places posted this at 01:40 — 13th November 2008.
He has: 1,557 posts
Joined: Jun 2008
oops, sorry Megan - you got it covered... I searched for the word "hack" and - oh well
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#someidnothing 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)JeevesBond posted this at 22:17 — 11th November 2008.
He has: 3,795 posts
Joined: Jun 2002
Typo police: thanks, fixed.
teammatt3 posted this at 02:54 — 12th November 2008.
He has: 2,036 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.
My Site | Regular Expression Tester
jrbeilke posted this at 14:15 — 14th November 2008.
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.
Minnesota Design and Photography
Jon's Blog and Photos
Megan posted this at 18:19 — 14th November 2008.
She has: 10,764 posts
Joined: Jun 1999
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.Megan
My web design blog
decibel.places posted this at 20:36 — 14th November 2008.
He has: 1,557 posts
Joined: Jun 2008
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
ms2134 posted this at 06:36 — 17th November 2008.
He has: 401 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.
1. Affordable Hosting - Linux Hosting, Reseller Hosting, Domain Hosting
2. The Michael Swan Blog!
3. Help to build a website!
webwiz posted this at 16:40 — 12th May 2009.
He has: 465 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
--
"Old web developers don't die, they degrade gracefully..."
NickD posted this at 00:01 — 30th May 2009.
They have: 35 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)
SEO Services | SEO Blog | PPC Management
greg posted this at 00:52 — 30th May 2009.
He has: 1,428 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.
In a world without fences and walls, who needs Gates and Windows?
Renegade posted this at 21:43 — 31st May 2009.
He has: 2,963 posts
Joined: Oct 2002
Read this article when it was first posted and because I was bored, read it again.
Just two things I'd like to point out:
You may be working on sites with large CSS files, multiple developers ,and long development timelines.
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.
Cheng Eu Chew - Renegade
Download:
- Mozilla, Firefox
- Opera
This post may contain peanut traces