- This topic is empty.
March 17, 2013 at 7:30 pm #43457
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.March 17, 2013 at 7:44 pm #128565JohnMotylJrParticipant
Without choosing option 1
<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 :)March 17, 2013 at 8:01 pm #128567
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.March 17, 2013 at 8:20 pm #128571AnonymousInactive
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!March 17, 2013 at 9:41 pm #128577
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.March 18, 2013 at 3:53 pm #128671
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.March 18, 2013 at 4:23 pm #128673AlenParticipant
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.March 18, 2013 at 4:46 pm #128675
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.March 18, 2013 at 4:48 pm #128676
Pretty sure option 2 has less bytes :)March 18, 2013 at 4:51 pm #128677
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.March 18, 2013 at 5:29 pm #128680MerriParticipant
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” :)March 18, 2013 at 6:23 pm #128682
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?March 18, 2013 at 6:57 pm #128683
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.March 18, 2013 at 7:16 pm #128685AlenParticipant
Please read this: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/March 18, 2013 at 7:34 pm #128686
I’ve read it, what’s your point? You need to explain your links
- The forum ‘CSS’ is closed to new topics and replies.