7

Ask DN: SMACCS, BEM, OOCSS..what works for you?

over 8 years ago from , UI Developer

I'm currently structuring out a project using the SMACSS method, but have read a lot about BEM, and its ability to perhaps be a bit easier to maintain in the long run. Now sure, there's lots of ways to skin the cat, but what are your thoughts? pros? cons?

18 comments

  • Damian MakkiDamian Makki, over 8 years ago (edited over 8 years ago )

    Using BEM with SASS has been a great experience so far. Nesting with a "&--" or "&__" pseudo selector is immensely powerful.

    5 points
  • Andrew SapiensAndrew Sapiens, over 8 years ago (edited over 8 years ago )

    I use a system that essentially incorporates all three. I think it's best to use whatever makes sense and works for you (or your agency/place of work). Here's an example of what I do:

    .moduleName { ... } .moduleName.is-active { ... } .moduleName--moduleModifier { ... } .moduleName-moduleElement { ... }

    I wasn't a fan of the underscoring used in BEM, so I adopted a system that doesn't do that. I use camel-casing as necessary if one word isn't enough to convey the purpose. It's very similar to the way Medium's is set up, but with some liberties taken in other areas.

    2 points
  • Andy BaudoinAndy Baudoin, over 8 years ago (edited over 8 years ago )

    Definitely BEM, especially in context of maintaining styles in a product as our UI system has grown. It's allowed for easily refactoring when needing to and creating an easily organized system for other developers to understand.

    2 points
  • Gadzhi KharkharovGadzhi Kharkharov, over 8 years ago

    Schnapps for me please.

    2 points
  • Namit ChadhaNamit Chadha, over 8 years ago

    BEM all the way

    Smatterings of OOCSS using extends / mixins - but not too much, over abstracting makes changes hard.

    2 points
  • Gilles BertauxGilles Bertaux, over 8 years ago

    Here's a answer that'll help: it depends :) But they play well together! I use SMACSS for file organization and BEM for naming. BEM naming might be odd at the beginning but it's definitely worth it in terms of scalabilty.

    2 points
  • Fitz Haile, over 8 years ago (edited over 8 years ago )

    BEM with influences of OOCSS and SCMASS. Don't think they have to be 100% mutually exclusive.

    BEM in particular has changed the way I write CSS and and I love it. It doesn't always make for the prettiest markup (though I've grown to like it) but maintaining my stylesheets is soooo much easier.

    +1 Harry Roberts' CSS guidelines. http://cssguidelin.es

    Also, check out InuitCSS. Basically a library of re-usable components that's a great example of how to organize modules and has no bloated design assumptions. It's his new "pre-alpha" version but I started playing with it on a current project and ended up using most of it in production. https://github.com/inuitcss

    1 point
  • Jeremy HooverJeremy Hoover, over 8 years ago

    Yes, BEM + SCSS. I like the css guidelines that Harry Roberts laid out.

    1 point
  • Colin Toh, over 8 years ago

    SMACSS

    1 point
  • Shaun DillonShaun Dillon, over 8 years ago

    BEM and SCSS, we're all in agreement in my team, amazingly manageable, significantly reduces specificity-related problems and easy to pick up for new starters.

    0 points
  • Hamish TaplinHamish Taplin, over 8 years ago

    I use BEM a lot and absolutely love it. That said, I can live without the __ and -- syntax, the principles of OOCSS are the most powerful bit for me.

    Nowadays I cringe whenever I see some blog post or library talking about 'semantic' HTML in terms of avoiding using styling hooks or grid markup.

    0 points
  • Alvaro NistalAlvaro Nistal, over 8 years ago

    We're using BEM with SMACSS in my agency, and it's been great so far.

    0 points
    • David MDavid M, over 8 years ago

      if you dont mind, how exactly have you been using the two together? one for naming conventions (BEM) and structuring with SMACSS?

      1 point
      • Alvaro NistalAlvaro Nistal, over 8 years ago

        Hey, sorry for the late reply.

        Yes, we're using BEM for naming conventions and SMACSS for maintaining and structuring the code. :)

        0 points
  • Alfonse SurigaoAlfonse Surigao, over 8 years ago

    OOCSS for me. Especially easy when defining and using extends in Sass

    0 points