This is blog I wrote a few years ago. I thought it’d be useful to republish it here as it’s an excellent starting ground for creating semantic markup that can be rendered well across all devices.
If you write any HTML, then you’ll soon realise that careful choice of HTML elements and class namings will reap many a reward. The HTML document you create ‘'’is an interface’’’, an interface that is not only read by a browser to render your page to the user’s screen, but also the interface in which:
Plain Old Semantic HTML (POSH) gives us the POSH check list and helps drive some semantic HTML that I create.
since this allows the class time to be used in other contexts to identify times of different items, but still allows you to pick out the event time with .event .time
The following :
are better than
The extra characters saved by shortening the words does not make the pain for reading of code by third parties worthwhile. And, anyhow, downstream automatic optimisers could always deal with minification if it was worth while. Don’t let the goal for keeping pay load to a minimum, lead to unreadability.
Be careful of using too much specificity in a CSS selector rule, e.g.
Today, you may have
but you may move it out to a ol our out of a list tomorrow. Only use the
ul in selector if you only wanted to apply the rule if it was in a
<ul>. Also in the runtime stack this ul might be adapted
to alternative elements on another, perhaps legacy, device - so locking the
style selector unnecessarily to the
<ul> could have an
adverse affect on alternative renderings of the site.
Be careful with locating an element through relative traversing APIs, like parent(), prev() and next()
If you move an element slightly this logic might mis-fire. Consider locking down the rule a little, e.g.
i.e. go up to find the ancestor with class event and then within that find the element with class set to time. This second approach is more robust to HTML shuffles.
For example you may have a display control that displays a content item, but also provides an edit button update the content item. You might toggle between the display and update controls as follows:
ids must be unique in a complete HTML page, so ensure that it is. Don’t use an id on an element that is likely to be repeated or reused across a page, e.g. a date control. If in doubt, then you probably should be using a class.
The way you write your selectors can have an adverse effect on how efficiently a browser can render your site.