Comments on: Top 5 Mistakes of Massive CSS

By: Beth Budwig

Beth Budwig — Tue, 26 Apr 2011 21:51:26 +0000

Fantastic video, thanks for sharing! This will have a real impact on how I clean up my unwieldy codebase. We’ve got over 3K declarations for headers by element tag alone!

By: High Performance CSS code design | Eddie Welker.com

High Performance CSS code design | Eddie Welker.com — Wed, 06 Apr 2011 05:44:52 +0000

[...] properties are likely used to define header-like text sizes. Ms. Sullivan does an excellent job pointing out , that of a finite number of font-sizes that can be used on a page, there are even fewer that a [...]

By: george

george — Mon, 31 Jan 2011 15:56:56 +0000

a typicall example is
div class=”media h2 ptn pbs mts mbl” -> this is to get a heading looking media box with the respective margins (5px 0 20px 0) and paddings (0px 0px 5px 0px)

and then one day the designers decide that this element should be more prominent and have more space around it. and this elements is used in dosen of occasions (page, widget, include templates). I would have to find every ocassion and change the class names in a dosen of instances.

That was my question and I was curious what is you recommendation in this case.

Another exaple is “leftCol” and “rightCol” which in hypothetical situation one day might change visually so that the content (and its HTML) that were presented on the right / left are now in the center. You can easilly change the css but the html will become meaningless.

By: Nicole Sullivan

Nicole Sullivan — Sun, 30 Jan 2011 08:12:40 +0000

@george – can you be more specific? I don’t know which classes you are referring to.

By: george

george — Fri, 28 Jan 2011 11:14:41 +0000

Sorry for the late comment, but I’m really wondering why is it a good idea to bloat your html with these numerous classes? And then when one day you want to change the margin of half of your h1 tags from 10 to 15px you have to go through all of the html files and fix this. Isn’t it a bad idea just as naming your classes red/blue (or any other purely decorational stuff) and than one day you change the design from red to pink and you are left with a lot of really meaningless class names?

By: Vicente

Vicente — Fri, 24 Dec 2010 04:54:37 +0000

Style with IDs may be necessary some times, for example, if you a have a certain content which is dynamic (e.g. generated by a script), and you want to give it a certain, specific style. If you already have an element with an Id (pherhaps to identify it in the DOM map), why to create a new css class just for that element?

In general, I think there are no general rules, there might be approaches (like the OOCSS, which I think is great), but regards to more specific procedures nothing works better like a performance evaluation. If you learn to make a good performance evaluation for each case, the numbers will tell you what is the best to do. And the PE you make it by trial and error, stats, and case uses. You try different options and chose what works best. No general procedural ideology, particularly when website developing is changing so much and so quickly.

Anyway, great blog, keep posting (straight to bookmarks). Cheers,

Vicente

By: Francesco Ciabatta

Francesco Ciabatta — Sun, 05 Dec 2010 18:28:27 +0000

Thanks for the very interesting article, from Italy

By: Kristiaan

Kristiaan — Sat, 04 Dec 2010 10:59:55 +0000

@Nicole – ok cheers for the reply.
In the video it doesn’t show underscores, but I assume they’re supposed to be there?

Maybe they don’t show due to resolution issues; I noticed there are spaces where you’d except an underscore…

It looks like this in the video:
.media{overflow:hidden; overflow:visible; zoom:1;margin:10px}

By: Nicole Sullivan

Nicole Sullivan — Fri, 03 Dec 2010 17:19:39 +0000

@Umair – you can write all your rules to be the same strength, then the one that you want to win just gets put later in the stylesheet. Sort with the cascade rather than specificity and your stylesheets will be much simpler to maintain.

By: Nicole Sullivan

Nicole Sullivan — Fri, 03 Dec 2010 17:18:12 +0000

I don’t use IDs anymore for styling. If I have a header or footer that is really different, I’ll sometimes scope the components in that area with a class name, that way they don’t pollute the more general page components.