1

Single directive generic class

CSS

.text-center { text-align: center }

HTML

<p class="text-center">center me</p>

That is our (not really) generic class and while we see this more and more over the web, there is no real explanation given why one should use it. Explanations like re-usable CSS classes don’t apply here. This class is as re-usable as the old <center> tag. Also, we cannot change the body of the rule, as it would not make sense anymore. It’s absolutely not semantic either.

The good old style-attribute

HTML

<p style="text-align:center">center me</p>

In the end, we have the same as above, but only in the place where we need it.

Why?

This might be a bad question, because the answer’s may be driven by taste. But personally I’d be interested in an answer that goes along with an explanation. Maybe something like “using the CSS class will ensure that it’s rendered faster” and if possible combined with hard proof.

Interesting Reads

The following are directly related to this question, because they are the reason why I started thinking about this topic:

Improve this question
4
  • 1
    The best answer that I can come up with is, because w3.org/wiki/…
    – Igor-G
    Commented Jun 20, 2013 at 12:14
  • 1
    Well, nothing in there says anything about this specific case. But I have some really interesting links for you as well meyerweb.com/eric/thoughts/2005/02/23/keep-your-classes-clean and microformats.org/wiki/semantic-class-names
    – Fleshgrinder
    Commented Jun 20, 2013 at 13:25
  • 1
    Isn't the problem you've posed just another reason to use semantic class names though? You're trying to decide between two bad options - instead you want a semantic class that represents what's in that <p>. It might seem like overkill now, but in 6 months time when you decide you also want that text italicised and in a different font, your site is easier to update.
    – Tim Fountain
    Commented Jun 20, 2013 at 18:24
  • Yes, absolutely, it’s a reason for semantic classes. It’s just that I’m curious why people keep creating and promoting such classes.
    – Fleshgrinder
    Commented Jun 20, 2013 at 18:31

3 Answers 3

Reset to default
2

There are no strong arguments in either direction in the given case. However, it might be argued that you will later wish to apply additional styling to blocks with centered lines. Say, you might notice that centered lines look better with added word spacing. Then the class approach is much better of course. It is also better from the modifiability viewpoint: if you later decide that centered lines should not be centered after all, you would just remove the declaration in one rule, if you have used a class. Granted, the class name would look a bit odd after that.

Improve this answer
3
  • You’d end up with a class that’s not doing what she’s telling you. Additionally if you’d want to change it you’d have to start with shotgun surgery, because you’d have to change the class names on absolutely all elements. The joke is, you have to do the same if you don’t want all your centered texts not centered anymore. Thanks for your input.
    – Fleshgrinder
    Commented Jun 20, 2013 at 13:19
  • Changing the styling to something completely different would surely be a bigger problem when you have the same CSS code in several style attributes. You would have to compare this with the issue of making the class name misleading. And you don't need to use a name like text-center. It could also be foobar, or some descriptive ("semantic") name, if the elements share some structural or semantic feature.
    – Jukka K. Korpela
    Commented Jun 20, 2013 at 13:49
  • Sure thing, generic classes to achieve certain effects are more than valid and exactly what I’m utilizing all the time (e.g. the famous clearfix). But as a better example for something that you’ll find in almost every CSS framework, how about stuff like pull-[right|left] respectively float-[right|left]? They are absolutely equal to applying style="float:[right|left]" to an element. The whole thing is only a valid concern if you only apply a single class to an element (as in my question).
    – Fleshgrinder
    Commented Jun 20, 2013 at 16:35
1

CSS styling over inline styling has many benefits such as:

  • Inline does not support :hover, :focus
  • smaller in size.
  • easier to maintain on large sites (one change, changes all).
  • separates content from styling - better markup.
  • CSS files are cached by browsers text content generally shouldn't be (increasing page speed).
  • doesn't support features such as viewpoint and media queries.

You should consider CSS easier to maintain over inline code as changing one line of code is lot easier than several. Below is an example of how HTML/CSS makes code smaller and easier to maintain.

  • <h1>I am a header</h1>
  • <h2>I am a header</h2>
  • <h3>I am a header</h3>
  • <h4>I am a header</h4>
  • <h5>I am a header</h5>

Now lets pretend this was repeated many times over many pages you would need something like

  • <h1 style="font-size:44px;text-align:center;font-weight:bold;text-decoration:underline;">Header</h1>
  • <h2 style="font-size:34px;text-align:center;font-weight:bold;text-decoration:underline;">Header</h2>
  • <h3 style="font-size:24px;text-align:center;font-weight:bold;text-decoration:underline;">Header</h3>
  • <h4 style="font-size:14px;text-align:center;font-weight:bold;text-decoration:underline;">Header</h4>
  • <h5 style="font-size:4px;text-align:center;font-weight:bold;text-decoration:underline;">Header</h5>

Now the above examples is just an example but they look bulky and maintaining them would be a nightmare across a large site and also lack :focus, :hover as I mentioned eariler, the above can be simplifyed very easy in css like so:

h1, h2, h3, h4, h5{text-align:center;font-weight:bold;text-decoration:underline;{}
h1{font-size:44px;}
h2{font-size:34px;}
h3{font-size:24px;}
h4{font-size:14px;}
h5{font-size:4px;}

You can even find many more reasons at: https://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css

Improve this answer
6
  • None of the general arguments given in the answer really applies to the case presented in the question.
    – Jukka K. Korpela
    Commented Jun 20, 2013 at 12:38
  • @JukkaK.Korpela whats differcuit to understand that CSS is faster due to caching ability's, easier to maintain and supports features more than inline?
    – Simon Hayter
    Commented Jun 20, 2013 at 12:46
  • Being faster is just a claim that may be true in some cases, but the question was not about external style sheets at all. If you think the second argument applies to the given case, please specify how. Supporting more features is obviously irrelevant when the question deals with only one feature.
    – Jukka K. Korpela
    Commented Jun 20, 2013 at 12:58
  • Would be silly not to include other features such as :hover and focus as these are important everyday website attributes.
    – Simon Hayter
    Commented Jun 20, 2013 at 13:01
  • There's nothing set in stone that says you can't use inline code and I believe the OP knows this including yourself, Inline CSS and External CSS vs inline styling has benefits and features which makes it easier for people to use as well as many features that extends within the realm of inline.
    – Simon Hayter
    Commented Jun 20, 2013 at 13:04
0

I think you are asking the wrong question. Neither of the options you present are good - just because a few sites use it doesn't make it so. Plenty of sites still use popups and no one is saying they are great.

Your class names should relate to what they are containing. Or, with the more modern OOCSS principles, the general pattern used. "Centred text" is not really a pattern. But "leading-paragraph" may be.

There are situations where single-property classes are valid such as a clearfix, because in some ways "clearing what came before" is part of the content. In these situations you can use a short class name which over the course of a site greatly saves on bytes - class="clear" is shorter and clearer than style="clear: both;"

Improve this answer
1
  • Yeah, the clearfix thingy was already mentioned by myself. Although a proper modern clearfix doesn’t boil down to a simple style="clear:both" and therefor you need a class for it. But you’re right.
    – Fleshgrinder
    Commented Jun 20, 2013 at 22:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.