Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
Best practice, classes, headings, XHTML and CSS
I was recently working on a project where I was considering setting classes in the css like this:
.style1 {text-transform:uppercase;}
.style2 {color:#688DA6;text-decoration:underline;}
.style3 {color: #CCCC34;}.size1 {font-size: 13px;}
.size2 {font-size: 16px;margin-bottom:15px;}
.size3 {font-size: 20px;}
.size4 {font-size: 30px;}
and anywhere that had multiple cases of this might get
<h2 class="style1 style3 size3>I am a heading</h2>
The factors in making a decision like this are:
- What is the correct semantic method?
- What is the lightest method (size in kb)?
Anybody have any thoughts?
Matthew
- I am Squared Eye and I
am launchinghave launched Pattern Tap
Offline
Re: Best practice, classes, headings, XHTML and CSS
I’m not sure semantics would be an issue for me, because you’re just adding multiple classes to a semantic element. As for “lightness,” combining a few style rules might save you a few characters in each situation, but I don’t imagine it would have a huge impact on the overall file size.
But I like using multiple classes, or an ID on the body tag as a selector, or a combination of ID and classes, e.g. <h2 id="title" class="large red">
I would only suggest keeping the class/ID names as semantic as is reasonable, for sake of future maintenance. I am plagued on my personal site by the fact I once named styles like img.inline2, and now I have to go back and figure out what I meant, only to find I should have originally named it img.float-left.
TextPattern user since 04/04/04
Offline
Re: Best practice, classes, headings, XHTML and CSS
Hey Reid. Thx.
I was assuming it was best practice not to name your classes anything that actually suggests anything particular, but rather obtuse enough that one can utterly change it later.
Then comment ones CSS well to accomadate for that, or even do a readme.html with css comments in it? Or a commented version and a compressed version?
What do you think.
- I am Squared Eye and I
am launchinghave launched Pattern Tap
Offline
Re: Best practice, classes, headings, XHTML and CSS
I’d try to avoid using a lot of classes and instead use semantic html together with id’s as far it’s possible. My typical css-“setup” would look like this:
h1, h2, h3 {
font: normal 1em/1.5em Arial, Helvetica, sans-serif; color: #222;
}
h1 {
font-size: 1.8em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}
Let’s say my html would look like this:
<div id=“page”>
<div id=“header”>
<img src=“logo.png” alt=“My logo” />
</div>
<div id=“content”>
<div id=“main”>
<h1>header</h1>
<p>some text</p>
<h2>smaller header</h2>
<p>some text again</p>
<h3>smallest header</h3>
</div>
<div id=“sidebar”>
<h2>sidebar header</h2>
<h3>sidebar smaller header</h3>
<div class="box">
<h3>sidebar smaller header</h3>
<p>some text</p>
</div>
<div class="box">
<h3>sidebar smaller header</h3>
<p>some text</p>
</div>
</div>
</div>
<div id=“footer”>
<p>© 2007</p>
</div>
</div>
Then if I’d like to have some other font-size on the sidebar headers I would point at them like this:
#sidebar h2 {
font-size: 1.1em;
font-weight: bold;
}
#sidebar h3 {
color: #F00;
}
And then maybe the “box”-headers would have another color:
#sidebar .box h3 {
color: #0F0;
}
I usually avoid adding to much classes because it quite easily can grow to some kind of class-soup. By knowing how to use the CSS specificity you can avoid a lot of problems.
Take a look at CSS Specificity: Things You Should Know @ Smashing Magazine
Offline
Re: Best practice, classes, headings, XHTML and CSS
Jonathan,
Thanks for your methods. That’s how I’ve always done it in the past. It seems like a good method to me too.
I loved that smashing mag article. Read it the other day, I’ve already passed it on to a bunch of folks :)
M
- I am Squared Eye and I
am launchinghave launched Pattern Tap
Offline
Re: Best practice, classes, headings, XHTML and CSS
ma_smith wrote:
I was assuming it was best practice not to name your classes anything that actually suggests anything particular, but rather obtuse enough that one can utterly change it later.
I suppose there two schools of thought on that. Some say it is easier to be able to look at the HTML and have a good idea of what the class means, rather than having to track down the specific style rules and/or comments. Others prefer to detail it in the style sheet (or a separate readme document, like you mentioned) and use a more generic name.
I admit, I go both ways at times. For structures, like column1, column2, etc. there’s not much to be told by a class name. But for other more common elements, like h2, a, p, etc., I tend to be more descriptive with class names.
TextPattern user since 04/04/04
Offline
Re: Best practice, classes, headings, XHTML and CSS
My quick 2cents … avoid such class names… keep them semantic … not to say i have not done styles like that but avoid avoid avoid…
nuff-respec ::: dannyb
Offline
Re: Best practice, classes, headings, XHTML and CSS
Hi Matthew,
I think that method is known as css à la carte.
I won’t recommend it to you. As said above, that’s not very semantic and you may find it harder to maintain both your HTML and your CSS.
Offline
Re: Best practice, classes, headings, XHTML and CSS
I think you will always get more mileage out of semantics because you can always overload them. For example:
.warning {
color:red;
}
p.warning {
font-weight: bold;
}
.comments .warning {
color: blue;
}
.comments p.warning {
text-decoration: underline;
}You need some block to be a warning you know you create a warning class you can then fine tune it for that specific context later. This also allows you to create a common vocabulary that you can use from project to project. .img-float-left is fine as long as that is all you are going to do with that class, but is that really better the just doing style="float:left" inline after all you can’t suddenly change .img-float-left to float right (well you could but …) However if you use .excerpt-image (even better p.excerpt img) it can do whatever you want.
You can always use the cascade to your benefit too.
.comments p.warning {
text-decoration: underline;
}
.comments p.warning.serious {
font-size:22px;
}Shoving is the answer – pusher robot
Offline