‘DRY’ HTML vs OOCSS Approach? Better to have less HTML or CSS code?

[croydon86]

Hi guys

Would be good to get some of your opinions on what is the best approach to styling content.

1. Approach one – OOCSS – Classes for everything. Results in clean maintained CSS but messy HTML.

2. Approach two – Clean HTML, relying on more specific selectors via CSS

It would make more sense to look at this code pen http://codepen.io/anon/pen/logbE

Which would you choose, option 1 or 2? And why? I am thinking whilst it is good to create unique classes, I feel in case like this, to avoid repetition in HTML, it may be better to use option 2.

[JohnMotylJr]

Without choosing option 1 || 2, personally my methodology is to use html elements as semantically as possible. If i need to style an element, i give it a class with a semantic naming convention, and if i need to target it with javascript, then i just give it an ID to hook. Now im not saying if you have 25 different <p> tags to give them all classes, just style that tag.

So, i guess my answer would be a little bit of 1 && 2. Give elements classes to style but still maintain semantic html.

All this is just how i roll, there are far more experienced folks here that may shoot down what i say or may support it. When in doubt, read documentation :)

[croydon86]

Yes @JohnMotylJr that goes without saying and doesn’t really help tbh. In this specific example, I would have thought it is either option 1 or 2.

I am thinking of going with option 2. I think as long as you are not later undoing your css with additional classes, causing unnecessary bloat, that is the main thing, and one of the main goals of OOCSS.

[Anonymous]

I’ve always done option 2, but I just read an article about slower css performance that way, but I think it’s a really small hit for most small-medium sites.

It’s preference more than anything, but I like keeping my HTML as clean as possible and rarely even use IDs or classes because I can target things pretty easily most of the time without them.

I bought a book called SMACSS that talks about the option 1 method, but I personally don’t like having to break things down into smaller pieces unless it’s way more efficient to do so.

I can’t stand when I have to work on other people’s code and there’s no rhyme or reason to their naming conventions, so either way, the names should make sense. Good luck!

[CrocoDillon]

I like to keep markup and style as separate as possible, so semantic html elements and classes as style hooks, option 2. What’s the point keeping markup and style separate if you end up with classes like `.float-left` or `.bottom-border-10px`, might as well use inline styles.

[croydon86]

Totally agree with you @msguerra74.

I have spent a lot of time looking into this today and you’re right in saying the OOCSS/SMACSS approach is better for performance but only noticeable on huge sites. In fact, it seems most small-medium websites wont even notice the difference at all, and if you gzip, there will probably be NO difference, as Gzipping works best with repetitive data.

I still feel it’s a good idea to try and create reusable classes for common styles around the site, but used with care and maintaining a balance between CSS performance and HTML bloat/semantics.

@CrocoDillon – There is a lot of benefits to this approach.

[Alen]

This is ridiculous. What performance gain are you looking for with OOCSS? You would be better off optimizing images on your site for greater impact.

Adopt a method that works for you. Unless you’re building large scale websites, CSS shouldn’t be your optimization concern.

[croydon86]

@AlenAbdula

Adopting a workflow that benefits performance (albeit minimal) is not ridiculous, it’s good practice, although I agree performance enhancements could be better gained elsewhere.

And for your information, I do work on sites that use this approach, where every byte counts, so it is good for me and others to know.

[CrocoDillon]

Pretty sure option 2 has less bytes :)

[croydon86]

In this example, yes, but in a realistic environment where those classes are being repeated 100’s of times, then no, hence why it is more beneficial to larger sites with huge css files.

[Merri]

I guess the thing with big corporate sites is that there is no option: to keep maintenance easy and development cycles high it is better to give class to everything so that anyone can take on CSS and HTML, even if they’re pure developers with minimal CSS & HTML understanding. And it is kind of sad. Practically in those environments it often seems like there is no CSS optimization or cleanup to reduce syntax soup, only technical optimization (minifying & compression). I really dislike the resulting soup of divitis and classitis. You can even see regular HTML elements being replicated in JavaScript or jQuery (that are likely to have accessibility issues! Like select dropdown replacements with no keyboard support or if they have support it doesn’t work according to any expected standards…).

Of course I’m an extremist from the opposite side of the viewpoint. I really like the challenge of pushing CSS styling with minimal semantic HTML. I like to keep my HTML almost perfectly indented and thus readable. Everything has to have a reason to be declared, no things like `position: relative;` if it doesn’t have effect on anything else or `text-align: center;` if I already have a parent element that has it. Aim for perfectionism even if it isn’t always possible. It is time consuming but I enjoy doing stuff like that, and less surprisingly this has given me pretty deep CSS understanding – even if I lack “book knowledge” :)

[croydon86]

I hear what you’re saying @Merri but when you look at companies like amazon, ebay, etc, where performance and management is crucial, HTML markup is less of a concern. (Their source code is shocking!)

I used to be like you, in fact, I still am. All my mark up is as semantic as can be, will only use a span/div unless there is no other HTML tag that accurately represents the content, however, I am starting to move away from being to anal about how clean my HTML markup is. Truth is, adding a load of classes doesn’t make your HTML any less semantic.

Look at the source code for this CSS Tricks home page for example. There are a load of divs, spans, multiple classes on elements and this isn’t even a huge site (in comparison to the above), yet would you say this site is un-semantic?

[CrocoDillon]

I think for huge sites it’s more about maintainability than performance. And while CSS Tricks has a lot classes, at least most of them are semantic and describe content instead of style.

[Alen]

Please read this: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

[croydon86]

I’ve read it, what’s your point? You need to explain your links

[Author]

Posts