: CSS: single directive generic class vs. style-attribute on element Single directive generic class CSS .text-center { text-align: center } HTML <p class="text-center">center me</p> That

@Cofer257

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;"

Vote Up Vote Down

@Margaret670

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.

Vote Up Vote Down

@Radia820

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: stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css

Vote Up Vote Down