Skip to main content

Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #43457
    croydon86
    Participant

    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.

    #128565
    JohnMotylJr
    Participant

    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 :)

    #128567
    croydon86
    Participant

    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.

    #128571
    Anonymous
    Inactive

    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!

    #128577
    CrocoDillon
    Participant

    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.

    #128671
    croydon86
    Participant

    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.

    #128673
    Alen
    Participant

    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.

    #128675
    croydon86
    Participant

    @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.

    #128676
    CrocoDillon
    Participant

    Pretty sure option 2 has less bytes :)

    #128677
    croydon86
    Participant

    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.

    #128680
    Merri
    Participant

    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” :)

    #128682
    croydon86
    Participant

    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?

    #128683
    CrocoDillon
    Participant

    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.

    #128685
    Alen
    Participant
    #128686
    croydon86
    Participant

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

Viewing 15 posts - 1 through 15 (of 23 total)
  • The forum ‘CSS’ is closed to new topics and replies.