Heavier CSS File vs. more classes in your HTML

[clicknathan]

Just wondering if anyone’s done any research or has an opinion on this. I do a lot of minimizing in my CSS, where I’ll have something like:

.class1, .class2, .class3, #id1, #id2 {color:black;}

.class1, .class2 {border-radius:5px;}

#id1, #id2 {text-shadow:5px 5px 5px black;}

That’s just an example, but imagine this over a very large site with lots of different elements and whatnot. My question is, do you think it would just be better to have more classes, like class=”rounded-corners”, class=”text-shadow”, class=”black”?

Those horrible semantics aside (I used them for making the point of the example), what do you think is lighter on page weight in general?

[Maikel]

Sorry, double post

[Maikel]

You can have a few classes in one.

Ever seen a code like

Test

However, they should probably allow more.

[TheDoc]

I think it’s important to have standards when building a site. For example, you could have a ‘button’ class to ensure that all of your buttons across the site are styled the same. If you need to change color depending on the section, you could always do #sidebar .button … or .disabled.button, etc.

[jamygolden]

I’ve started reading SMACSS ( Scalable and Modular Architecture for CSS ) and Jonathan Snook really promotes using classes all over the place for scalability. I’ve previously used as little classes as possible, but I’m realizing that semantic classes really help for larger and growing projects.

[clicknathan]

Yeah @jamy_za, that’s how I was: try and keep classes and IDs out of my HTML as much as possible and use CSS wherever I can to style things based on where they are in the document…

Now I’m suddenly wondering if that’s the wrong ticket, if something more like Hompimpa’s solution above is better…

[vindicateme]

Im not sure what the point is of creating 4 classes and 2 id’s with the same properties, when 1 overall class would suffice. I’d say that would work more towards keeping your css light and having less classes. Your original post kind of contradicts itself because you seemed to have thought your second option was creating MORE classes, when it’s the exact opposite.

pulling from your example:

.class1, .class2, .class3, #id1, #id2 {color:black;}

.class1, .class2 {border-radius:5px;}

you could just say:

.blackText { color: black;}

.rounded { border-radius: 5px;}

then your html could be like:

A div with rounded corners and black text.


A div with rounded corners


A span with black text

[clicknathan]

Good point, about my example, @vindicateme.

What I didn’t mention, I suppose, is those classes will all have other properties that they don’t share.

For example, class1 might have height, width, and positioning values that class2 doesn’t have. Also, beyond what I’d described above, sometimes the case wouldn’t be the multiple classes at all, but something more like:

header p, footer a, section aside {color:black;}

header p, footer a {border-radius:5px;}

footer a, section aside {text-shadow:5px 5px 5px black;}

In your two examples, the issue is that though some elements share some common properties & values, they all typically have their own properties that they don’t share. So just using “rounded blackText” wouldn’t work in those scenarios (and most real world examples of non-text only items).

My main concern, while still trying to figure out what is best practice but also least page weight for the HTML & CSS combo, is that adding a class like “blackText” or “rounded” is not particularly semantic, right? I mean, purely for the fact that we’re defining the class as “blackText” we’re mixing our markup with our styling. Even though that would be the easiest way for a developer to see what’s going on. I guess simply renaming things like “emphasized” and “standout-div” vs. “blackText” and “rounded” is the way to go.

Thoughts?

[vindicateme]

@clicknathan
“In your two examples, the issue is that though some elements share some common properties & values, they all typically have their own properties that they don’t share. So just using “rounded blackText” wouldn’t work in those scenarios (and most real world examples of non-text only items).
“

that’s where you would use ID’s or another class to apply any differences to that element, obviously. For example:

header {

margin: 0 auto;

background: #000;

color: #666;

width:960px;

}



#container {

width: 400px;

height: 400px;

background: #fff;

box-shadow: 0 0 10px #000;

}

.wrapper { width: 960px; }

.rounded { border-radius: 5px;}

.blackText { color: #000; }

this paragraph has the default text color,

but this text is black


this text is black too

you still end up with less classes and css overall.

you are essentially right about things being less semantic that way, however i tend to weigh efficiency against semantics and vice versa – semantic html does not always win, but also does not always lose. It’s partly a judgement call, and mostly a preference.

if i really think about it though, i’ve never used a class just for black text – i just followed your example in this case. if it were my code, i’d just use strong or em tags:

strong {color: #000;}

[vindicateme]

@Hompimpa precisely my point

[jamygolden]

According to me, this is a very very bad idea:

.blackText { color: black;}

.rounded { border-radius: 5px;}

The styles should describe what the content is, they shouldn’t be based on the CSS?

Client: ‘Could you please make the text orange’.
Now you have to go and change the CSS along with all the pages you’ve added that class. It totally defeats the point of CSS.

If it’s a notification box, you could do this:

.notification-box { border-radius: 5px; color: black; }

You shouldn’t describe what it looks like with the CSS class.

Multiple classes can be very useful for describing what exactly an element is without basing the classes on the CSS. Also, an ID is unique therefore an element can only contain 1 ID.

[vindicateme]

@jamy_za as i mentioned at the end of my last post, i would never actually use those class names, but was just following the OP example. more typically, i would use a specific element or choose a class name like “emphasis” or “accent” – something to that effect.

[Author]

Posts