It sounds simple, and it is. As an HTML & CSS developer, I take great care to write clear, organized, streamlined HTML & CSS markup. To me, front-end markup isn’t an afterthought. It’s a vital step in crafting wonderful user experiences.
Interested in what I have to say about HTML & CSS? Let’s chat. Contact me
I build websites in HTML5. I utilize many of the new spec’s additions and improvements over its predecessors, but I have a unique way of doing so. My markup depends heavily on classes to attach CSS rules to elements. So even though older versions of Internet Explorer may not natively support the
<header> element, it can still style it by matching the
This technique allows me to provide greater backwards compatibility for older browsers, and fits neatly into my object oriented methodology.
But there are still some limitations to HTML5 currently imposed by older browsers. A forward-looking HTML5 website may feel different to Safari, Firefox & Chrome users than it would to IE users. I am sensitive to the tendencies of all browsers and always deliver a great experience to users, regardless of their browser.
Further reading on HTML
If you’d like more information about HTML5 and my methodologies & experience, please check out these blog posts on the subject.
- On Back-end Beauty, published on December 12, 2007.
- On Googling Flash, published on July 2, 2008.
- On HTML5, published on January 19, 2009.
Want to see what kind of HTML I can write for you & your project? Contact me
My CSS follows an “object-oriented” approach, a method not often associated with front-end markup. But at the core of object-oriented programming lies the idea of “reduce and reuse,” or modularity. CSS can (and should!) be modular and reusable too.
Structuring my styles into reusable classes allows for lightweight, streamlined stylesheets, easily understood and extended by any other developer in the future.
What I mean by OOCSS
The principles of object-oriented programming, in a traditional sense, say to define your objects and methods independently of anything else and call them as necessary later. That way, they are defined once and used any number of times. The same principle can apply to CSS.
As an example, how many times do you think a typical CSS document lists a
float rule? Nicole Sullivan did some research and found that, of the Alexa top 1000 websites, 56% had more than 10
float rules, 13% had more than 100
float rules, and the worst offender had 733
float rules (source).
Now imagine of we could define that
float rule once and apply it any number of times, whenever necessary. We could save ourselves 10, 100, or 700+ lines of CSS markup.
A note on semantics
The principles of OOCSS, at face value, don’t play nice with those of semantic markup (or responsive web design, but that’s another issue altogether). After all, a CSS class called “float_left” is about the furthest thing from semantic.
I’m generally a fan of semantic markup and, in fact, the majority of my HTML & CSS are written that way. But, when it comes to things like grid systems and common classes, I basically look the other way. I think the benefit gained from reusing modular CSS classes far outweighs the potential pain in the butt Theoretical Redesign Future™.
Further reading on CSS
If you’d like to read more about object-oriented CSS3 and my techniques, please check out these blog posts.
- An Event Apart Roundup – Part 1, published on May 31, 2010.
- On CSS Tables, published on October 22, 2008.
- On Hacks (and Internet Explorer), published on August 29, 2008.
Want to see what kind of CSS I can write for you & your project? Contact me