Naming things isn't that hard

Editor's Notes

• #3: Phil Karlton, formerly at Netscape, once said “There are only two hard problems in computer science: cache invalidation and naming things.”
• #4: In CSS, as in computer science, naming stuff can be really hard. Even when you’re using frameworks like Bootstrap and Foundation or methodologies like OOCSS, SMACSS and BEM they may not provide names for your elements in your project.
• #5: But naming stuff is really important when we’re writing code that’s easy to read and maintain and can scale to large sites, as we should be.
• #6: Maybe you’ve given up. Maybe you’ve got to the point I have and just said “Can’t someone else do it?”.
• #7: And the answer my friends is “Yes”. Yes, someone else can do it.
• #8: In fact there are whole groups of people who have been doing all the hard work for us: coming up with names for everyday web objects and things so that we don’t have to think for ourselves.
• #9: Which is awesome.
• #10: By adding extra semantic markup using recognised standards like Microformats, RDFa Lite or Microdata, we can not only solve the problem of what to call things
• #11: but add valuable metadata about our sites’ content which makes it more findable by search engines and more useful to other tools.
• #13: Probably the simplest to understand is Microformats. Microformats uses a system of class names to add extra meaning to your elements.
• #14: The classes are not just easy for us as developers to understand, but they are also understood by search engines and will be displayed in search results. For example I can mark up contact details using the h-card Microformat
• #15: Or mark up an address using h-adr
• #16: And I can embed the address as part of the contact details. There’s a whole system of classes for people, places, events, recipes, reviews and so on.
• #17: While Microformats uses class names, RDFa and Microdata use their own HTML attributes. The parent element references a URL of the thing’s schema, in this case Person, and uses either the property or itemprop attribute for each item’s properties.
• #18: So, using RDFa we can mark up
• #19: contact details
• #20: an address and, as with Microformats
• #21: we can embed properties inside each other.
• #22: Microdata was going to be part of the HTML5 spec but isn’t any more. Microdata seems to have been developed because people had forgotten there was such a thing as RDFa and then went “Oh yeah”. So now everyone is backing RDFa.
• #23: But, I’ve left it in here because Microdata is still used in the wild,
• #24: and it’s still recommended by Google and supported by the other search engine vendors.
• #25: Now you’ll notice that both RDFa and Microdata both reference a site
• #26: called schema.org
• #27: This is where the magic happens because schema.org is an Aladdin’s cave of names for elements which describe things: people, places, events, recipes, reviews and so on. There are names for pretty much everything.
• #28: Including Things. It’s not the only source of schemas. You can use Facebook’s Open Graph, Dublin Core, Friend of a Friend (FOAF) and many more. You can also write your own, but you probably don’t need to.
• #29: But enough with the HTML semantic thing already! Where’s the CSS? Once all that groundwork is in place, the CSS is easy. Just select the element and style it, same as always. Use the Microformats classes …
• #30: … Or use the attribute selectors for RDFa and
• #31: Microdata
• #32: Or, as on the Lexus site,
• #33: … use a class as well as the attribute.
• #34: So, by adding semantic markup we’ve made our site more useful and we have a ready-made naming system to help make our CSS easier to read, maintain and scale.