Skip to content

Instantly share code, notes, and snippets.

@paultibbetts
Last active March 19, 2016 18:14
Show Gist options
  • Save paultibbetts/2c9cea7acabc9cb284f2 to your computer and use it in GitHub Desktop.
Save paultibbetts/2c9cea7acabc9cb284f2 to your computer and use it in GitHub Desktop.

dt-

Parses an element as a date/time

<time class="dt-published" datetime="2013-05-02 12:00:00" />
  • dt-anniversary
  • dt-bday
  • dt-duration
  • dt-end
  • dt-published
  • dt-reviewed
  • dt-start

e-

Parses an element’s whole inner HTML

<div class="e-content">
  • e-description
  • e-instructions

h-

Root classnames specify that an element is a microformat

<span class="h-card">
  • h-adr
  • h-breadcrumb
  • h-breadcrumbs
  • h-calendar
  • h-card
  • h-cite
  • h-entry
  • h-event
  • h-feed
  • h-geo
  • h-item
  • h-listing
  • h-product
  • h-recipe
  • h-resume
  • h-review
  • h-review-aggregate

p-

Specifies an element as a plain-text property

<span class="p-name">My Name</span>
  • p-additional-name
  • p-adr
  • p-affiliation
  • p-altitude
  • p-author
  • p-best
  • p-brand
  • p-category
  • p-contact
  • p-country-name
  • p-education
  • p-extended-address
  • p-experience
  • p-family-name
  • p-given-name
  • p-gender-identity
  • p-geo
  • p-honorific-prefix
  • p-honorific-suffix
  • p-ingredient
  • p-job-title
  • p-label
  • p-latitude
  • p-locality
  • p-location
  • p-longitude
  • p-name
  • p-nickname
  • p-note
  • p-nutrition
  • p-org
  • p-post-office-box
  • p-postal-code
  • p-price
  • p-rating
  • p-region
  • p-review
  • p-reviewer
  • p-role
  • p-tel
  • p-sex
  • p-skill
  • p-sort-string
  • p-street-address
  • p-summary
  • p-worst
  • p-yield

u-

Parses an element as a URL

<a class="u-url" href="/"></a>
  • u-email
  • u-geo
  • u-identifier
  • u-impp
  • u-key
  • u-logo
  • u-photo
  • u-uid
  • u-url
@paultibbetts
Copy link
Author

As I move towards namespacing my CSS I want to be sure I don't have any conflicts with microformats2.

I've included as many classnames as I could find on the wiki however I'm primarily concerned with the u- namespace as I'd like to use this for utilities.

It looks like microformats mainly use single words (u-email) and as my utility classes are often made up of two words together (floatLeft) it should be relatively safe to use.

Thought - I wonder if I could automate this using http://stylelint.io/

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