Skip to content

Instantly share code, notes, and snippets.

@joshgillies
Created November 22, 2012 00:00
Show Gist options
  • Save joshgillies/4128628 to your computer and use it in GitHub Desktop.
Save joshgillies/4128628 to your computer and use it in GitHub Desktop.
In defence of... I dunno, smart CSS?

Some notes around the article I've just read from JZ; http://www.zeldman.com/2012/11/21/in-defense-of-descendant-selectors-and-id-elements/

Whilst OOCSS is the new hotness (or at least was a few years ago), I can faithfully agree with the notion of every element in your mark-up DOES NOT require a class... In fact use classes as a way to describe your mark-up where a descriptive/semantic tag ins't available.

By the same token, the use of an ID where appropriate is totally fine, as JZ

for instance with ID's seeing something like this in CSS is completely wrong:

#paraInsideAside {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
}

Not to mention this little gem will either look something like this

<style type="text/css">
/*********** inline all the things ***********/
#paraInsideAside {
  margin-top: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  /*********** FIFTY additional differently styled attributes here... whyyyyyy! ***********/
}
/*********** ASTERISKS ***********/
</style>

or be nested like a son of a gun!

<div id="insideLeftHand">
    <div id="innerAside">
        <p>Rock and roll!</p>
        <p id="paraInsideAside">I don't even do anything</p>
    <div>
</div>

specificity rocks

At the end of the day what does it all boil down to, standards, and the lack there-of within the wider development community. Code smart, code better!

@yargalot
Copy link

Yeh, pretty much.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment