CSS Kids, It’s Time to Grow Up

Bloat the stylesheet and not the HTML markup.

Everybody agree?

The big baby way of styling:

HTML:
[code lang=”html”]
<p class="big">Tell me now, is it so<br>
Don’t let me be the last to know<br>
My hands are shaking<br>
<span class="red">Don’t let my heart be breaking</span></p>
[/code]

CSS:
[code lang=”css”]
.big {font-size:2em;}
.bigger {font-size:3em;}
.red {color:red;}
.green {color:green;}
[/code]

Isn’t that pretty? If you want to make the paragraph’s font size bigger, you only need to change its class to “bigger” and the red line could be green in no time.

But no. Like the title said, grow up CSS kids. CSS spoonfeeding stops here.

The big boy way:

HTML:
[code lang=”html”]
<p class="lyrics">Tell me now, is it so<br>
Don’t let me be the last to know<br>
My hands are shaking<br>
<span class="ouchy">Don’t let my heart be breaking</span></p>
[/code]

CSS:
[code lang=”css”]
.lyrics {font-size:2em;}
.ouchy {color:red;}
[/code]

When you’re working on HTML markups, set aside the stylesheet. All you have to do is name your HTML tags for what they are and not for what you want them to appear.

Like in the example above, that paragraph contains lyrics and not some random big texts so name it “lyrics”.

Think about this: if the developers kidnap your HTML file and all you have is the stylesheet, it would look stupid to have a “red” class name but appears to be in a different color (if the client tells you to make it green).