APC Article: 21 ways to streamline your CSS
*** 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,502 posts
Joined: Sep 2006
May still need to be published.
JeevesBond posted this at 20:49 — 11th November 2008.
He has: 3,956 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: 11,421 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,494 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: 11,421 posts
Joined: Jun 1999
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.
See point #16
Megan
Connect with us on Facebook!
decibel.places posted this at 01:40 — 13th November 2008.
He has: 1,494 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,956 posts
Joined: Jun 2002
Typo police: thanks, fixed.
teammatt3 posted this at 02:54 — 12th November 2008.
He has: 2,102 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 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: 11,421 posts
Joined: Jun 1999
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
Connect with us on Facebook!
decibel.places posted this at 20:36 — 14th November 2008.
He has: 1,494 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
Michael James Swan posted this at 06:36 — 17th November 2008.
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.
webwiz posted this at 16:40 — 12th May 2009.
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 posted this at 00:01 — 30th May 2009.
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 posted this at 00:52 — 30th May 2009.
He has: 1,581 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 posted this at 21:43 — 31st May 2009.
He has: 3,022 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:
davidben posted this at 02:10 — 14th August 2017.
They have: 1 posts
Joined: Aug 2017
Thanks for this article, please post more tips for me to study.
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.