Classes? Where We’re Going, We Don’t Need Classes!

Advertisement

Classes, classes, classes everywhere. What if we don’t need CSS classes at all? What if we stopped worrying about how many classes we’re using and what we should be calling them and just finished with them once and for all? It would be no revelation to you to say that HTML elements can be styled without recourse to the class attribute, but have you considered the multitude of benefits that come from forgoing classes altogether?

In the article, I’ll demonstrate that the class is as antiquated and inappropriate for styling as the table is for layout, and that omitting them can discipline us to create more usable, reusable content. I appreciate that this is a contentious subject; I’ll meet you in the comments.

(For those who aren’t “of a certain age,” the title of this article is a play on a famous line1 from the 1980s film Back to the Future.)

It’s Not About Maintainability Link

In her recent presentation “Our Best Practices Are Killing Us2,” Nicole Sullivan addresses the horrors of maintaining inefficient style sheets. Sullivan offers some helpful ideas and observations, especially for dealing with the convoluted code of major longstanding clients. My approach is more cavalier; if the style sheet schema I’m dealing with is so convoluted that it could affect the website’s performance all by itself, then I’ll do one of three things:

Maintainability is a problem, but it’s a problem for coders by coders, and CSS classes, as Sullivan points out, aren’t even the main culprit. The class attribute is implicated in a much graver crime, and usability—not maintainability—is ultimately at stake. Rather than the overuse of classes4, I question the efficacy of the class attribute per se.

The Class As Imposter Link

A few years back, a girlfriend of mine gave me the pet name Stinky. I appreciate that this might seem off topic; please bear with me. She assured me that the name was actually not due to any malodor, but rather had some cryptic link with a fond childhood memory. Nonetheless, it was not a moniker that I wished anyone else to know about. Well, until now—but it’s important for my argument.

Name label5
View image6.

CSS classes7 are a lot like pet names. They are coined in private, where they belong and usually remain, and on the rare occasion that they are aired in public, they’re frequently a source of great embarrassment. While I’m embarrassed to have disclosed my own pet name of Stinky (there it is again), I feel equally red-faced about the .nudge-right class that I once used to deal with an awkward div.

Not all classes are ugly hacks. Many frameworks8 employ sensibly named classes, sometimes even in an “object-oriented” fashion. The question is, why have classes at all? We already have the names of elements (<p>, <small>, <address>, <ul>, etc.). Better still, like my legal name of Heydon Pickering, they actually have some currency: they can be interpreted by more than one or two people.

Parity And Disparity Link

The reason we “mark up” Web content is to create parity between the way it is perceived by human readers and the way it is read and archived by machines. This parity has many benefits, some of which are discussed in an excellent post by Dr. Mike9. Perhaps the greatest benefit is that when someone searches for some content, the engine that carries out the search request has a better chance of identifying and finding it. The machine and the human have “an understanding.” Parity is extremely important because, without it, the mechanisms of data storage and retrieval would get out of sync.

Aside from microformats10 (which, like tag names, have been endowed with agreed meanings), no class is able to affect the actual meaning of the marked-up content as read by an indexing bot or screen reader. Classes can only affect the visual appearance of the content. That’s right: all classes are “decorator classes.” You knew that already, but is it a moot point? I think not.

An Example Link

Please consider the following code and corresponding illustration. Think of the tags as pseudo-HTML.

// HTML:

<sea>
<crustacean class="crab">Shane</crustacean>
<crustacean class="lobster">Martin</crustacean>
</sea>
// CSS:

sea {
   background:blue;
}

crustacean {
   width:200px;
   height:200px;
   border:2px solid;
   text-align:center;
   color:white;
}

.crab {
   background-image:url(../images/crab.jpg);
}

.lobster {
   background-image:url(../images/lobster.jpg);
}

11
(Images: Patrick Tanguay12 and ajmexico13)

  • What the human sees
    An angry-looking crab and a yellow lobster next to each other in a watery blue box, bearing the unlikely names of Martin and Shane, respectively.
  • What the bot sees
    Two adjacent bits of text that both belong to sea and should be treated as crustacean-related.

Both the human and the bot are correct. However, they are both missing some information. The bot is not aware that the two crustaceans are, specifically, a crab and a lobster. The human, meanwhile, has not been told that the crab and the lobster both belong to the crustacea family. Despite a correct use of semantic HTML and a judicious application of CSS classes, there is a disparity between the way the machine and the human interpret the information.

We can’t expect the specification14 to contain a tag for every conceivable concept. It will be no surprise that <slippery>, <disappointing> and <airborne> are not so far being considered for HTML5. Neither could we expect parsers to be able to meaningfully interpret each and every individually authored class name. In this case, what else can we do to supply both the human and the bot with as much of the same information as possible? That is, what tool can accurately explicate the intended “lobsterness” of the second element without alienating either party?

The answer is something called content. So far, our “content” consists of a spurious label (much like your typical class attribute). I think we can do a lot better:

<crustacean>
   <hgroup>
      <h1>Shane</h1>
      <h2>The Lobster</h2>
   </hgroup>
   <p>Shane is a <a href="lobsters.html">lobster</a>, which is a type of <a href="crustacea.html">crustacean</a>. He is <em>big</em> and <em>yellow</em>.</p>
   <img src="images/shane.jpg" alt="Shane sitting on the sea bed">
   <p>
      <small>Photo by ajmexico</small>
   </p>
</crustacean>

The mistake we made in the first snippet was to make two items that are similar appear different. As a general rule, if two elements are of the same type and appear in the same context, then they are alike—in which case, they should appear alike. The job of styling is to make items presentable, not to define them. Only the content should be definitive, and only the tags should be used to define the content’s taxonomy.

By depriving ourselves of the class attribute, we are forced to rely on content to add meaning to our design. In our example, the background images invoked via the classes have been replaced by image tags—i.e. actual content tags that can be interpreted by both bots and screen readers (via the alt attribute). This makes the machine’s experience of the resulting design much closer to our own.

The Document Outline Link

In the example above, we showed that, even when used sensibly and sparsely, classes can undermine the parity that should be maintained between the essence and appearance of content. However, nothing is to stop us from going completely mad: we could create as many classes as we wanted, place them in whichever elements we wanted as many times as we wanted, and name them whatever we wanted.

The Divya Debacle15
Homogeneous code like the sort referred to in this strip would not be practical if we couldn’t visually differentiate between the same elements via classes. (Strip by Kyle Weems16)

This kind of freedom allows us to break with conventions that make HTML documents apprehensible and, therefore, useful. Heeding Mark Boulton’s advice about icon design would be better:

Leave “creativity” to the bad designers.

Classes enable us to represent differences that don’t really exist, but nothing is wrong with reflecting differences that do exist. In HTML5, the document-outlining algorithm17 more than ever seeks to enforce structure in an HTML document. By harnessing this structure, we can use CSS to reflect legitimate differences between the parts of our page. This requires a basic understanding of semiotics and will be the subject of the next section.

(While not necessary to understand the following section, I highly recommend Derek Johnson’s introduction to the document outline18 as background reading.)

Semiotic Style Link

19
View image2820 of Ferdinand de Saussure.

It would be difficult to overestimate the impact that Ferdinand de Saussure21 had on the way we understand language—and, for that matter, anything we use to elicit meaning. To Saussure, how we choose to define things is not important. Rather, their relationship to one another is truly what makes them what they are. As Saussure’s translator Roy Harris22 put it, Saussure’s contribution to linguistics was to cease viewing words as “mere vocal labels or communicational adjuncts superimposed upon an already given order of things.” If you’ve been following closely so far, you’ll appreciate why I’m a big fan of Saussure: he sees no value in extraneous classification.

Saussure’s understanding of language as a system is based on two basic relationships; the paradigmatic and the syntagmatic23. The illustration below transposes these concepts to an example of some semantic HTML.

Semiotic HTML24

Paradigm Link

A paradigm is a set of words—or, in our case, tags—with functional similarities but subtle or radical differences in meaning. In the sentence, “The crab sat next to the lobster,” the word “sat” belongs to a paradigm of alternative words that include “rested” and “crouched” as well as “stood.” It is a relationship of substitution.

There are certain rules. In English, a verb cannot be substituted with a noun, just as in HTML an inline element25 cannot always be substituted with a block-level26 one. In the diagram above, omitted members of paradigms are shown in light gray.

Syntagm Link

A syntagm is essentially a structure composed of paradigmatic choices. In English, sentences, paragraphs, chapters and books are all syntagms. In HTML, a block of code made from your choice of elements could be considered a syntagm.

Each syntagm is its own semantic system, and smaller syntagms can belong to larger ones. Just as a paragraph can belong to a chapter, so can an <hgroup> belong to an <article> and an <article> belong to a <section>.

What Am I Getting At? Link

This is all pretty straightforward stuff, so what’s the point? The point is this: The Saussurian model of language recognizes that terabytes of poems, novels, essays and plays can all be written (and have all been written) without having to invent new words or redefine old ones. If this model is good enough for natural languages such as English, then it is more than good enough for a simple metalanguage such as HTML. Of course, new words are coined over time, just as new elements are slowly introduced to the HTML specification, but this is done with careful deliberation and consensus. Classes have no such mandate.

27
If you really need to add a styling hook, choose something that pertains to a function, such as the role attribute. Roles are standardized and machine-readable. (View image2820.)

Meanwhile, the Saussurian model gives us more than enough scope for elegance and invention, as well as prohibits us from making bad choices. By styling the elements that make up our documents according only to what and where they are, then misleading or confusing the user becomes extremely difficult—without conscious effort. All you are doing is using CSS to expose the inherent structure of your page.

Paradigmatic styling is really just about choosing the right element for the job. There are many ways to traverse “syntagms,” so let’s look at a few examples. You’ll already be familiar with most or all of these; just imagine using this kind of styling exclusively:

  • aside h1
    A simple descendant selector that styles top-level headings that belong to asides.
  • body > div
    Styles divs that directly descend from <body> exclusively (helpful for unsemantic layout such as “wrapper” blocks).
  • p + p
    Targets all paragraphs that directly follow other paragraphs.
  • * + h2
    Styles second-level headings that do not appear at the head of their parent section.
  • section ~ article h2
    Targets all second-level headings in articles that are together preceded by a section.
  • li:nth-child(odd)
    Targets every other (i.e. odd) list item in either ol or ul elements.
  • ol li:first-child h3:before
    Styles the pseudo-content that precedes the third-level heading in the first item of an ordered list.

You will realize that any content styled using these methods will change in appearance upon being moved to another part of the page. Never fear: that is supposed to happen. Unfortunately, the employment of classes can all too easily undo this legitimate influence of context.

An Example Link

To provide an example to accompany this article, I took the step of removing all class attributes from my own blog29. The style sheet30 isn’t as neat as I’d like it to be, but that’s my fault, not Saussure’s. Note that my design is responsive and relies on a single id attribute to enable smartphone users to jump to the main navigation; however, it is not used as a styling hook.

The Importance Of Context Link

Previously, we explored how classes can be used to illustrate differences that don’t exist. By the same token, they can be used to gloss over differences that do exist.

From a semiotic perspective, perhaps the only real difference between two things that are otherwise alike is their context: the circumstances in which they are found. An English native and a French native are genetically similar but culturally different. The context of their nationality makes them, in many noteworthy ways, unalike.

Please consider the following code example:

// HTML:

<article>
   <h1 class="main-title">Article Title</h1>
   <aside>
      <h1 class="main-title">Aside Title</h1>
   </aside>
</article>
// CSS:

.main-title {
   font-size:30px;
}

By coining the class .main-title, we have created a cypher to help us easily style all top-level headings similarly. However, the two headings in our example are not similar. Any parser that understands HTML5 will know that the h1 in the aside is, in fact, less important than the one that belongs directly to the article. How does it know this? Well, the specification mandates that asides are for tangentially related31 content, not important stuff like that found in the main body of the article. Also, the parser’s understanding of the document-outlining algorithm means that it will consider the aside’s heading as a mere subheading, belonging to the h1 that precedes it.

Context Definitions32
Google is aware that the word “context” has more than one meaning… depending on the context.View image33.)

If this is all being read and understood by the parser, then shouldn’t it also be disclosed to the user? In truth, the class in this example is redundant anyway: we could just style the h1 element with the property of font-size: 30px. The point is that if we differentiate the two elements according to context (say, by using the descendent selector aside h1), then the CSS will be bound to the HTML’s structure and the appearance of the element will fall in line with its computed meaning. In practice, by moving from an aside into the main article, an h1 would automatically look more important — which would reflect its greater importance. The aside h1.main-title selector would work, too, but the class is absolutely redundant.

Seems obvious, doesn’t it? However, popular frameworks such as OOCSS34 specifically sanction the use of classes in a way that denies the influence of context. To quote OOCSS’ GitHub page35, “An object should look the same no matter where you put it.” In fact, we’re told to avoid the descendent selector altogether, thus largely negating the “cascading” part of the technology.

The innovators of OOCSS are not the only ones who discourage the use of the descendent selector either. An article on CSS Wizardry36 reads, “As soon as an element begins to rely on its parent, and their parent, and their parent’s parent then you are doing it wrong. Your styles should never rely too heavily on where they live as this makes them incredibly unportable.”

In the next section, I’ll make the case that only content, not styles, should be portable.

Modularity And Mobility Link

An element that insists on looking the same wherever it appears is a bit like a Briton who travels from country to country refusing to speak the native language and burping the English national anthem. It’s aggressive and inappropriate.

I don’t see CSS as being object-oriented; I see it as being interface-oriented. The purpose of CSS is not to make individual items look the way we want them, but to make the interfaces that we build by styling HTML documents cogent and readable. For an interface to be optimally apprehensible, all of its components should work together politely and should respect the overall visual structure, no matter where the components come from.

Get your content ready to go anywhere because it’s going to go everywhere.

With the advent of elements such as article38, which are intended to carry content to be dispersed between documents, we should consider an approach to styling that does not permit externally sourced content to spoil the coherence of the context into which it is introduced. Once again, classes get in the way.

39

Unsemantic pieces of content that are styled with classes depend on the style sheets that give their particular content visual form. The class acts as a key, pairing the HTML with a specific CSS file. This has two undesirable outcomes:

  • The document that hosts the third party’s content has to load an additional resource (i.e. the third party’s style sheet);
  • The third party’s content defies the aesthetic conventions of the page and sticks out like an obnoxious advert.

By agreeing to basic semantic conventions and refusing to superimpose our own styling rules, we can instead manufacture content nodes that travel seamlessly from document to document. This approach to styling creates a scenario that allows our HTML to be interoperable40, like RSS. Website owners will maintain CSS files that style elements according only to the elements’ ownership by and proximity to other elements. Content manufacturers, meanwhile, will produce content that (by virtue of its semantic conventionality) is ready to take on the styling of any context it may enter, integrating itself with a minimum of effort.

In short, we should aim to truly separate style and content, allowing content to travel between interfaces but with the interfaces remaining unmoved. As within any properly formatted document, attribution — not aesthetics — should be what discloses the source of a piece of content.

Conclusion Link

“Roads? Where we’re going, we don’t need roads!” exclaims the inventor, Doc Brown, as his Delorean41-based time machine’s wheels fold under its chasis and the car takes off, headed for 2020. It’s a great line for its defiance: Roads, which have literally paved the way for automobile travel and made it viable, are no longer even needed. At all.

XHTML, which sought to enforce well-formed42 code, did little to enforce or cater to well-formed content. CSS classes, like the roads in Doc Brown’s line, were a costly and substandard necessity. We wouldn’t have gotten very far as UI designers without them. However, classes were only ever a polyfill43. Now that the new technology has arrived, they have become obsolete.

(al) (km)

Footnotes Link

  1. 1 http://www.youtube.com/watch?v=flge_rw6RG0&feature=related
  2. 2 http://www.slideshare.net/stubbornella/our-best-practices-are-killing-us
  3. 3 https://twitter.com/#!/markboulton/statuses/3576335793/
  4. 4 www.steveworkman.com/html5-2/standards/2009/classitis-the-new-css-disease/
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2012/03/label.png
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2012/03/label.png
  7. 7 http://www.tizag.com/cssT/class.php
  8. 8 https://github.com/stubbornella/oocss
  9. 9 http://html5doctor.com/lets-talk-about-semantics/
  10. 10 http://microformats.org/
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2012/03/crustacea.jpg
  12. 12 http://www.flickr.com/photos/patrick/45087811/
  13. 13 http://www.flickr.com/photos/ajmexico/3315595873/
  14. 14 http://dev.w3.org/html5/spec/single-page.html
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2012/03/divya.png
  16. 16 http://cssquirrel.com/
  17. 17 html5doctor.com/outlines/
  18. 18 http://www.smashingmagazine.com/2011/08/16/html5-and-the-document-outlining-algorithm/
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2012/03/saussure.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2012/03/saussure.jpg
  21. 21 http://en.wikipedia.org/wiki/Ferdinand_de_Saussure
  22. 22 http://en.wikipedia.org/wiki/Roy_Harris_%28linguist%29
  23. 23 http://www.aber.ac.uk/media/Documents/S4B/sem03.html
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2012/03/paradigm_syntagm.png
  25. 25 http://en.wikipedia.org/wiki/HTML_element#Inline_elements
  26. 26 http://en.wikipedia.org/wiki/HTML_element#Block_elements
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2012/03/roles.gif
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2012/03/saussure.jpg
  29. 29 http://www.heydonworks.com
  30. 30 http://www.heydonworks.com/css/main.css
  31. 31 http://html5doctor.com/aside-revisited/
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2012/03/context1.gif
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2012/03/context1.gif
  34. 34 http://oocss.org/
  35. 35 https://github.com/stubbornella/oocss/wiki
  36. 36 http://csswizardry.com/2012/03/hacker-news-rebuttal/
  37. 37 http://bradfrostweb.com/blog/web/for-a-future-friendly-web/
  38. 38 http://html5doctor.com/the-article-element/
  39. 39 http://www.smashingmagazine.com/wp-content/uploads/2012/03/my-class.gif
  40. 40 http://en.wikipedia.org/wiki/Interoperability
  41. 41 http://en.wikipedia.org/wiki/DeLorean_Motor_Company
  42. 42 http://en.wikipedia.org/wiki/Well-formed_element
  43. 43 http://remysharp.com/2010/10/08/what-is-a-polyfill/

↑ Back to top Tweet itShare on Facebook

Heydon has a love/hate relationship with CSS and a lust/indifference relationship with javascript. He writes a lot and makes fonts.

Advertisement
  1. 1

    This is a well-written and well-argued piece, but I have to ask: have you ever built a large site with many templates, components and layouts? This approach is arguably impossible to implement for that context, not to mention inappropriate. Yes, CSS3 has some fairly advanced selectors, but littering your stylesheet with HTML-dependent stuff like “section ~ article h2” is only going to cause you pain when you want to refactor, or simply target headings that don’t follow a section. Either you end up with 20-line-long lists of selectors, or you’re afraid to touch your HTML structure in case everything blows up.

    I really don’t follow your argument about elements looking the same in different places being aggressive/inappropriate. Have you ever designed a user interface? The goal is to produce consistent and reusable components that the user will intuitively recognise and use. If my “post comment” button looks different each time I put it somewhere new, what kind of experience does my user have? Do my comment counts decline as a result? This doesn’t just effect nerdy semantics, it’s real-world usability too.

    Finally, I don’t really buy your argument that we should avoid using classes because some mysterious third party content providers might use our entire HTML structure and it won’t look right. If we designed for that use case we’d all have sites like Jakob Nielsen’s (eg: plain and vanilla). It’s also possible to use semantic markup (blockquote tags for quotes, etc) *and* use classes, they’re not mutually exclusive. Also, if somebody pulls in my HTML which uses my custom classes, who says they have to load my CSS too? The classes won’t impact their site’s design unless there’s a naming overlap.

    In summary: classless HTML might work well on small, mostly trivial sites, but long term, it’s not scalable or modular (as Jonathan Snook’s SMACSS framework explains).

    171
  2. 2

    In the words of Tennis legend John McEnroe, you can not be serious.

    42
  3. 3

    You’ve linked to a tweet from 2009 at the beginning of the article. I stopped reading at that point.

    -30
  4. 4

    While I have always liked the idea of not using classes on small/simple sites, like yours in the example, it’s just not practical in larger/more complex CMS-driven sites.

    I think the whole issue of content looking the same everywhere being a problem when you appropriate content from another site is a bit of a non-issue, as you would have to copy their .class CSS in order for it to NOT be styled like your content – sure their may be *some* overlap on classes, but probably not as many as you’d think. Of course, should you *want* the content you’re embedding to look like the source site, using OOCSS classes makes it relatively easy!

    Having said that, I do agree that where possible, the tools we’ve been given by HTML should be used to appropriately structure content and not over relying on CSS to “structurally style” content. Of course, given the context of a “corporate CMS” sometimes you just have to do what you can to make things look like they should in a timely manner.

    Thought provoking for sure, and sensibly achievable for a small/simple site with one/few devs, but I think I’ll be sticking to classes for styling my more complex sites.

    8
  5. 5

    Ricardo Magalhães

    June 19, 2012 3:16 am

    Matt Andrews said it all. The whole idea behind it is very appealing, but nowhere near of being possible in the real word. And by real world, I don’t mean our personal blog or single page portfolio. I mean the world where you have to work with a team, know what to expect in the front-end side, and be ready for design changes on the spot which require markup to be changed.

    For instance, we still need a lot of wrapper elements in divs, sections, whatever. Some overly specific CSS targeting could kill your entire styling just by adding this necessary extra element that the client insisted on having at the very last minute. And that’s just too much work when you’re on the spot. I like the reassurance of knowing that if I need to add an entire block of something else, my styling rules will not break. With your approach, hell would break lose.

    We need to build with a modular and scalable frameset, otherwise we’re just asking for trouble in the long run.
    I agree with you in the sense that we shouldn’t cultivate a ‘classitis’ workflow, and not everything needs to be a reusable element on its own. The trick lies in knowing where the middle ground is.

    29
  6. 6

    Trolling published as link-bait.

    Try building something bigger than a brochure site without using classes and you’ll quickly learn the error of your ways.

    16
  7. 7

    Stephen Melrose

    June 19, 2012 3:25 am

    My problem with your argument is, frankly, that you don’t make it very well. You have some good points, but most of them are completely unrelated to your actual argument and are just waffle in this tirelessly long article.

    I think I can sum up this article in a couple of sentences,

    “Don’t use classes to define content. The *context* of content is what defines content.”

    That about right? The problem with your argument is that the limitation of what is considered valid HTML does not allow you to do this, therefore, we have to use classes to *enhance*, not define, content.

    Also, I would genuinely love to see you code up a big, corporate, CMS managed website without classes. In fact, I extend to you that very challenge. And if you succeed, I will completely rescind my argument and declare you the victor.

    12
  8. 8

    Stop Using Drupal???

    Due to Views module markup??

    Semantic View + Semantic CCK… and fears become small!

    Platform is not a problem… but the way you use it…

    ;)

    12
  9. 9

    Oh okay, yeah I really do respect people who have enough time to search twitter for out-of-date information. And then use it to misinform everyone else.

    -17
  10. 10

    One of the problems with this article is that it sees classes as mere styling-hooks. While CSS has a big impact (especially today), classes (and ids) are there for all scripts. They divide your site in logical, portable components that could be used wherever on your page/site.

    If tomorrow the Analytics guy passes by and asks you to track all the clicks on “read more” links in news article teasers across your site, you need to be ready. Without the proper use of classes and ids you won’t get anywhere.

    Apart from that, I’d love to see a use case for a 10-template site using this idea. I don’t think you’ll get very far, unless you keep your design very slim (and thus highly dependent on your method of working).

    1
  11. 11

    People slamming this article as being not attached to the real world only read the title.

    This article was extremely thought provoking, and has caused me to think much more about why and how I do things. It’s these types of articles that push our profession forward.

    Before slamming something, at least try to implement some of the ideas presented an come back in a few weeks with a proper rebuttal with some annecdotal experiences for us.

    19
  12. 12

    You declare that one should stop using Drupal, and then proceed to link to a tweet from Boulton that are dated back to ’09? Nice.

    Views is easy to adjust to whatever truth you want.

    Also: It is very easy to style Drupal the wrong way, but it’s also powerful in the way it enables clean, well-targeted CSS. Yes, the standard markup is dreadful, but it’s your job to make it lean. It works out-of-the-box as it should, and can be molded to fit whatever reality you want it to.

    3
  13. 13

    no.

    I do not believe that you have afforded this topic so much thought and managed to arrive at the conclusion that classes are redundant.

    I would go as far as to say that had you worked on large project that demands a scalable modular css architecture you would have been unable to arrive at these conclusions.

    I normally attempt to implement ideas such as this before offering a response. However as I have been considering this topic throughout my career I feel I am well placed to offer an instant rebuttal on the back of experience.

    Specificity wars, lack of maintainability, just a no.

    4
  14. 14

    Heydon Pickering

    June 19, 2012 4:02 am

    The Sizzle selector engine does not rely on id or class attributes.

    -4
  15. 15

    I suspect Heydon is playing devil’s advocate to a certain extent. I can’t imagine he would attempt this on anything larger or more complex than his personal blog (correct me if I’m wrong). However as a concept it is very intriguing.

    Although I wouldn’t go so far as to avoid classes altogether I can see the logic and benefit of keeping them to a minimum. How many times have you seen:

    <article class=”product”>…</article>
    <h1 class=”product-heading”>…</h1>
    <img class=”product-img” />
    <p class=”product-description”>…</p>

    I don’t see why you can’t get rid of all classes except .product and then use descendant selectors for the product module. This way you achieve the best of both worlds.

    7
  16. 16

    Stephen Melrose

    June 19, 2012 4:06 am

    Most, if not all, selector engines don’t *rely* on id or class attributes, they merely support them, like any other selector syntax.

    1
  17. 17

    Heydon Pickering

    June 19, 2012 4:06 am

    I just checked. Drupal is still rubbish.

    10
  18. 18

    The ambition of this article is awesome! Having said that I can’t quite bring myself to agree…

    I think there were two points which I am 100% behind (actually only alluded to in the crustacean example)
    1. Don’t use classes to give your content meaning.
    2. Have meaningful content.

    Which, yeah, sounds good!

    I just don’t see what this means you *shouldn’t* use any classes though. Since all classes are “decorator classes” why can’t we use them for decoration? The idea seems to be that each piece of content should be visually distinct and that doesn’t sit well with me. To me that’s like an interior decorator saying your armchair and sofa shouldn’t look the same. Of course the shape is different, as is the context; but I want both in a luxuriant orange zebra print! Of course the armchair in my study should be a rustic brown leather, just like the bar stools in the kitchen-diner and the sofa in the den.

    Let’s assume all users (human or bot) can understand all these items of furniture. That is: what they are, how they function, etc. All I need to do now is ‘add the fabric’. This is the exact purpose of classes. If I only had one sofa, sure maybe I don’t need a .zebra-print class. Actually let me correct myself – I probably never *need* a class; but I should use one here. It will make my life easier with no detrimental effect.

    To push the example further: what if I have two armchairs in my den but I want these to be upholstered differently? The purpose is the same but just for kicks I want them to look different. So I know they are both in the and they are both ‘s. So that’s easy right? I’ll just do den > armchair + armchair { whatever }. Sweet, done! But what if I remove (delete) the first chair? I could use last-child, but there is that pot plant… So last-of-type? Now I can’t add more chairs. It’s starting to get confusing… I’m left with 3 choices:
    1. Use a class
    2. Try deal with the problems as they arise (i.e. fancy selectors)
    3. Live with matching armchairs

    The order of these is not random – the first option is clearly preferable. Option 2 will be what the client/designer pushes. Option 3 will lead to a very dull web indeed….

    Now let’s say I’m worried about syndication. Let’s say someone gets hold of my html classes and all. Getting a class of .zebra-print is not going to adversely affect them. They can quite happily strip this and ‘re-upholster’ it – as you might do when you get a second-hand sofa. If they don’t want to strip the classes, that’s their problem. My content is meaningful enough for them to do so and, therefore, they must be choosing not to.

    I really do applaud this effort; I think it’s great to push the boundaries and get people looking at the issues differently. Additionally your argument, although flawed, is very thorough and eloquent; so seriously, thanks for going out on a limb and writing this!

    18
  19. 19

    I don’t rely on the phone to communicate but it’s a hell of a lot better than traveling to the other side of the country when I want to talk to my friend.

    9
  20. 20

    My trash fueled flux capacitor is now at maximum charge thanks to this post. See you in the Future!

    9
  21. 21

    Heydon Pickering

    June 19, 2012 5:52 am

    Not quite. My argument is that classes do *not* enhance content; only its appearance. This is true of all CSS but, in the case of classes, there is no obligation to the semantics of the page.

    I think that it is self-evident that a larger volume of content does not render this false.

    Feel free to recommend me to your corporate clients. There’s absolutely no reason content should need to rely on class-attributed markup just because it is managed. Structured content is well managed content and needs classes least of all.

    -5
  22. 22

    This article reminds me all of the elaborate theory that I learned in college but have yet to experience in the real world.

    That also reminds me – we live in the real world.

    3
  23. 23

    I tend to agree with the w3c best practices on classes: http://www.w3.org/QA/Tips/goodclassnames

    The biggest issue with CSS objects is that they are directly coupled to HTML making layouts incredibly inflexible. Remember CSS Zen Garden? All the same HTML with no layout classes made the layouts incredibly diverse using only CSS. This has been irrelevant for the most part until responsive web design became so popular. Now we need this flexibility again to change layouts at different screen sizes and device capabilities, layout classes are getting in the way of that.

    To give OOCSS and SMACSS credit they solve very real language issues with CSS itself. In order to build sites at scale styles need to be abstracted into smaller shared objects. They do this by containing these objects in classes. The issue is that there is no way to execute these objects within CSS. If CSS had a feature like Sass @extend or @mixin developers would be able to adequately write and execute objects within CSS and retain the much needed flexibility and semantic markup, even at a large scale.

    2
  24. 24

    Some people get paid by the word.

    2
  25. 25

    I can definitely agree to that, the era of “classes for semantics” is clearly in the past. That doesn’t mean they’ve become obsolete though, they’re just adapting to a new function.

    1
  26. 26

    The only advantage of this article is to make us think and debate. But the conclusion is : continue to use classes guys.

    4
  27. 27

    Heydon Pickering

    June 19, 2012 9:27 am

    By not defining styles via classes that are manifest in the markup, necessary change is actually easier to achieve.

    Otherwise, you could be left with a bowling alley with a sign that reads ‘wig shop’.

    -3
  28. 28

    Heydon Pickering

    June 19, 2012 9:29 am

    Tell the Photoshoppers “no”.

    -8
  29. 29

    This article is terrible. The crux I got was, don’t use class names in conjuction with CSS for styling but, that is exactly what CSS is for!

    As has been touched on in previous comments, building anything more than a brochure site without classes is nigh-on impossible. I’d love to see an example site from the author where he’s not used classes, as otherwise this is just pie-in-the-sky speculation and published just to bait the web community.

    It’s alright specifying the look of an article and a heading within an article, but then how do I differentiate styles for different types of articles, i.e. a news feature and a video item, which may both be marked up in article tags, but one I may want a green background on and the other a blue background? You’ve guessed it: I’m going to use a class name.

    3
  30. 30

    Web components (the emerging standard) provides a great platform for using Heydon’s approach, while also nicely handling your concerns. With modular components and scoped styles, selectors are very well contained and your component design can scale beautifully up to very large and complex sites and apps.
    A good lot of it is available now in Chrome Canary, and parts are starting to be developed in Firefox. The +Web Components page has more.

    13
  31. 31

    Enrique García

    June 19, 2012 3:17 am

    Do you have any evidence that this way of doing CSS is feasible on anything but trivial webpages, or is this all speculation?

    If not, why don’t you make like a tree and get out of here? (and come back with some evidence later)

    5
  32. 32

    Should have given you even more reason to read. Have you any idea how hard it is to find a tweet more than 2 days old?

    Takes some serious skill.

    27
  33. 33

    *I think* what you’re trying to say is that in structuring our content in better, more meaningful ways that we can reduce the reliance on classes? The very structure of our content would make them unique and portable and that by using selectors to style them based on their “context” we could control how they appear when not in their typical setting?

    That’s all well and good but would what you’re suggesting would be near unmaintainable in the event of changes to containing structure.

    You also don’t seem to account for the dynamic nature of websites. Classes are essential for indicating “states”. You can chain classes to extend the module/pattern/component and thus reduce the amount of code you need to write and maintain.

    I think you’re missing the point of methodologies such as OOCSS. I recommend you give Mr Snook’s “Scalable and Modular Architecture for CSS” (SMACSS) a read: http://paulmsmith.at/ve5YF4 – I think you’ll really like it. He talks about using certain context based selectors to help reduce the need for classes and control the “Depth of Applicability”, etc which I think is along the lines of what you’re getting at?

    4
  34. 34

    Well … I was about to tear him apart but you already did it…

    17
  35. 35

    This has to be one of the most mis-guided articles I’ve read in years. The author clearly has no concept (or practical knowledge) of creating complex online applications.

    9
  36. 36

    Sure, but how are you going to differentiate between different components with identical html structures?

    1
  37. 37

    “Stop using Drupal” – In other words, stop using anything that you are too lazy to investigate on how to make the output better. (And yes, even with Drupal it is possible to output whatever markup you want).

    0
  38. 38

    If you don’t take this article too literally it makes sense to carefully look at how you are using classes to style content and reduce classes on structural elements where possible. I’ve inherited many web applications over time that have gathered lots of css cruft where different developers have refactored content and hacked around the associated css to try and accommodate change – Time and time again I’ve inherited things like mis-named classes (‘outerContainer’ on a div that’s inside an ‘innerContainer’), and elements with a class like ‘hotRedBackground’ where: .hotRedBackground { background-color: yellow;}

    It’s common sense really, eliminate classes on structural elements where possible, keep them on discrete ui widgets (buttons etc), and use either Sass or Less to make mixins for re-use. Also, they still may be necessary if you’re adjusting styling in response to dynamic behaviour using jQuery’s toggleClass/addClass etc.

    5
  39. 39

    Heydon Pickering

    June 19, 2012 1:25 pm

    I wholeheartedly recommend using microdata etc to add semantic meaning to your markup and even to use semantic microformat-like classes as styling hooks. Why? Because these classes pertain to computable differentiation.

    Why would you want to style the second article differently with a class or otherwise? What is the case?

    -3
  40. 40

    Heydon Pickering

    June 19, 2012 1:27 pm

    I’m not saying (nor did I say) that classes are sub-optimal. I’m saying they are not fit for purpose.

    -15
  41. 41

    Fair enough then, as long as you actually checked.

    2
  42. 42

    I agree that throwing a new class name at every styling issue is not the right way to do things. But your highlighted comment right here is a nice example of something I find impossible to implement without the class attribute. How would you propose, in a list of comments, to visually distinguish the ones made by original post author without resorting to something like class=”bypostauthor”?

    10
  43. 43

    Aside from the flaws in this, summed up very well by the top comment, I was quite taken aback by the swipe at Drupal. He links it to a tweet from 2009 that’s taken out of context and references one particular Drupal module. It’s a very flexible CMS/framework – if you’re building Views it’s up to you to customise the output to your liking. He’s demonstrating a rather poor and naive understanding of it.

    6
  44. 44

    great Quoting mark on a tweet thats 3 years old… *coughs*
    Before you lash out please learn the cms you attacking, im not expecting you to understanding how Drupal, views & the theme layer actually works (it can be a pita) but i can point you towards the Semantic views module (or just read views documentation) or take the mothership theme for a spin ;) … its not that hard actually.

    5
  45. 45

    Don’t let the door hit you on your way out.

    Even if the article here was written by Justin Bieber on meth and arguing about why we should put peanut butter in our shoes, your reason to “stop reading” would still be far more ridiculous.

    15
  46. 46

    I can only guess this post is one of two things:

    1 – the author still believes that “any publicity is good publicity” and has posted an intentionally inflammatory post that makes no real points, but rambles a lot (to give the impression of thought going into it), strictly to drive hits / get his name out.

    2 – this is a parody post, authored in direct response to the opposite (equally misguided) extreme of “no ids, ever” being supported by some (not all) users of “OOCSS”.

    We get it, kids – you’re trying to make your mark and do something “different”. Sometimes different isn’t better – it’s just different. Or worse.

    0
  47. 47

    Wait, the trolls have been elevated to writing articles these days, rather than comments?

    I’m sure the article makes some good points, somewhere, but the Drupal FUD, and the exaggerated “Never ever use classes ever” approach removes any credibility.

    Bravo sir, great trolling. :-|

    0
  48. 48

    You need classes (at least) for states like: #pan.open

    0
  49. 49

    So what you’re saying is: since when can a weatherman predict the weather, let alone the future?

    Continuing your point, a lot of the examples given are against best CSS practices of efficient selectors.

    Heydon’s “nudge-right” class example is rightly embarrassing, but there are plenty of proper uses of “semantic” class selectors. They may not convey meaning to search engines and bots, but they are meaningful to the designer/developer that is incorporating them into a document structure.

    It’s consistent use of those conventions that results in the new semantic tags that he discusses. Someone recognized that div’s with class or id=”header” were common enough to create a dedicated tag. So I see this behavior as productive, as consensus in implementation helps evolve new semantic tags of the future.

    Discussed in other threads: I can’t speak much towards the output of Drupal, but the WordPress templates and engine utilize lots of *structurally* meaningful class selectors that can be styled against in a modular and reusable way. Take a look at the default output for posts or sidebars/widgets and you’ll see what I mean.

    1
  50. 50

    Tom Giannattasio

    June 19, 2012 5:46 am

    Have you ever asked for directions? Which is easier?

    1. (contextual directions) Go past the bocce ball court and turn left in front of Milfred’s Wig Shop. If you pass the third Starbucks, you’ve gone too far.

    OR

    2. (explicit directions) Go up to Market Street and turn left?

    Roads are named for a reason. They’re shortcuts that help humans find their way. In a small town of only a few roads, you could probably do away with explicit naming and rely on context. If you’re building a city, however, you need more sophisticated wayfinding. Context works for those who fully understand the scope, but is meaningless to those who don’t.

    I don’t know about you, but I want to build cities.

    23

↑ Back to top