Comparação entre BEM e SMACSS

Prévia do material em texto

<p>CSS methodologies can be mind bogglingly confusing and tough to decide upon. Let’s</p><p>consider two of the most well known options: BEM and SMACSS.</p><p>Should you choose one of these for your next project? What are they best suited for? What</p><p>might go wrong? If you’re already working with one – are you using it as intended? To the</p><p>fullest potential? How do you know if you’re doing it right? I thought I’d be nice to ask people</p><p>who’ve already been through those questions in their own projects and learn from their</p><p>experiences.</p><p>I asked developers who’ve worked with BEM and/or SMACSS for their success stories,</p><p>horror stories, advice, and words of caution. I gave some developers a whole list of</p><p>questions and others just free-formed their thoughts to me. I’ve compiled the results into</p><p>what I hope will be valuable reading for those considering optimizing their CSS.</p><p>For those new to BEM and SMACSS, I’ll start by giving a very high-level overview of what</p><p>BEM and SMACSS are.</p><p>What is BEM?</p><p>BEM stands for Block Element Modi�er and originated at Yandex. It provides a rather strict</p><p>way to arrange your CSS classes into independent modules. There are a few variations on</p><p>the idea but the most common one looks like this:</p><p>BEM and SMACSS: Advice From DevelopersBEM and SMACSS: Advice From Developers</p><p>Who’ve Been ThereWho’ve Been There</p><p>By Patrick Catanzariti</p><p>HTML & CSS</p><p>January 7, 2015</p><p>Share:</p><p>https://bem.info/</p><p>https://smacss.com/</p><p>https://www.sitepoint.com/</p><p>https://www.sitepoint.com/author/pcatanzariti</p><p>https://www.sitepoint.com/html-css</p><p>.block {}</p><p>.block__element {}</p><p>.block--modifier {}</p><p>.block__element--modifier {}</p><p>A Block represents an object in your website. For example:</p><p>a person</p><p>a login form</p><p>a menu</p><p>a search form</p><p>An Element is a component within the block that performs a particular function. It should</p><p>only make sense in the context of its block. For example:</p><p>a hand</p><p>a login button</p><p>a menu item</p><p>a search input �eld</p><p>A Modi�er is how we represent the variations of a block. For example:</p><p>a tall/short person</p><p>a condensed login form (e.g. we’re hiding the labels in one version)</p><p>a menu modi�ed to look differently for a footer or sitemap</p><p>a search input �eld with a particular button style</p><p>In the example of our menu, the class names could look like this:</p><p>.menu {}</p><p>.menu__item {}</p><p>.menu__item--featured {}</p><p>.menu--footer {}</p><p>There are other architectural principles and tools for BEM on the bem.info website,</p><p>however, when developers discuss BEM, they’re often focused mainly on the naming</p><p>convention above and that is true of the majority of the discussion below.</p><p>What is SMACSS?</p><p>SMACSS is a CSS framework by Jonathan Snook. On the SMACSS website, he says it is</p><p>more like a “style guide” than a rigid CSS framework. It focuses on �ve categories for its</p><p>rules:</p><p>Base is used for defaults like html , body , a , a:hover . This includes your CSS resets</p><p>and would often be in its own base CSS �le or at the start of your main CSS.</p><p>Layout divides a page into sections with elements like header, footer, and article. Often</p><p>developers show layout elements by pre�xing the class with l- .</p><p>Module is a reusable, modular element in the design. The SMACSS documentation sees</p><p>modules as the majority of your elements and thus doesn’t require that you pre�x them but</p><p>you could do so if you choose.</p><p>State is used for the variations possible for each element (e.g. active, inactive, expanded,</p><p>hidden). These are pre�xed with is- , e.g. is-active , is-inactive , is-expanded ,</p><p>is-hidden or are via pseudo-classes such as :hover and :focus or media queries.</p><p>Theme is similar to state but de�nes how modules and layouts will look. It is more</p><p>applicable for larger sites with shared elements that look different throughout. You would</p><p>add theme variations on a per page or per section basis.</p><p>Child elements in SMACSS (like what an “element” is to a “block” in BEM) have the parent</p><p>item pre�xed with a dash. e.g. menu and menu-item .</p><p>SMACSS states that it’s all up to developer preference and isn’t as prescriptive as BEM.</p><p>SMACSS just provides basic guidelines Use your own naming conventions for each of the</p><p>http://www.bem.info/</p><p>http://snook.ca/</p><p>SMACSS just provides basic guidelines. Use your own naming conventions for each of the</p><p>categories and arrange them in your preferred way, as long as you document your</p><p>approach so that other developers can follow along.</p><p>Guidance from those who’ve used BEM</p><p>It is applicable to all projects, big and small</p><p>Hamish Taplin, a front-end developer from Cardiff, UK, believes BEM is suitable for projects</p><p>big and small and it offers plenty of advantages:</p><p>“BEM is touted as being for large projects but I don’t believe that at all. If you like writing</p><p>code that is clean, maintainable, and not battling with speci�city problems then BEM is for</p><p>you. Some say that the HTML it produces is ugly or redundant but I think it’s beautiful. I can</p><p>read some HTML and see exactly what is going on and how elements are related to each</p><p>other. It’s great.”</p><p>It avoids nesting</p><p>Alec Raeside, a front-end developer from Sydney, Australia has found BEM to be a good</p><p>way to avoid too much nesting of selectors:</p><p>“BEM is a good way to build UI. The descriptive, sometimes long, class names are good for</p><p>understanding straight away where this class/selector sits within your UI architecture. It</p><p>also means you rarely need to nest selectors, a common downfall with Sass codebases.</p><p>Usually when I’m nesting with BEM is when I want to target an element via HTML tag name,</p><p>or to win a speci�city battle when components styling overlaps.”</p><p>It helps you rediscover the power of classes</p><p>Hamish Taplin sung the praises of BEM and object-oriented principles. He raises interesting</p><p>thoughts on the concept of “semantic” markup:</p><p>“The advantages of BEM were apparent immediately. Prior to adopting BEM and OOCSS</p><p>principles I had been an advocate of what is (incorrectly) known as “semantic” markup. I</p><p>think a lot of developers (me included) have largely misunderstood what this actually</p><p>means and had been neglecting the power of classes under the guise of them not being</p><p>“semantic” enough. Search engines and screen-readers don’t care about the classes you</p><p>use or some extra divs used for a grid. Twitter engineer Nicholas Gallagher totally nailed</p><p>this with his blog post “About HTML semantics and front-end architecture” when he says:</p><p>‘…not all semantics need to be content-derived. Class names cannot be “unsemantic”.</p><p>Whatever names are being used: they have meaning, they have purpose. Class name</p><p>semantics can be different to those of HTML elements.’”</p><p>Makes working on larger sites easier</p><p>One huge strength of BEM that a lot of the developers mention is its ability to handle</p><p>developing and implementing large and modular projects in a cleaner fashion. While BEM is</p><p>not only for large sites, it does appear to have great advantages in this space. Hamish</p><p>discussed his experience and even has a whole blog post about it:</p><p>“I dabbled on a few small projects and got to grips with it — it was quite hard at �rst as it</p><p>was contrary to the way I had been working for years but the bene�ts were becoming</p><p>obvious. Then, we started on a project that was quite big and very modular in nature — My</p><p>Health Skills. This was the �rst Bluegg project I had worked on where I was working with</p><p>another developer (Paul Good�eld, who had also been using BEM) — I did the front-end and</p><p>Paul the backend. The bene�ts were immediately obvious, Paul could understand exactly</p><p>what my markup was doing and write his Laravel templates around it. If he needed to �ll in</p><p>some gaps then the predictable nature of BEM meant he could write the HTML just as I</p><p>would have and the whole process was made much smoother. I wrote about this in a blog</p><p>post “Building My Health Skills”.”</p><p>Alec Raeside also found bene�ts to large projects through the modular nature of BEM</p><p>naming. He says:</p><p>“BEM is well suited to large projects. CSS is complex and large projects can fall down where</p><p>unspeci�c selectors can cause unintended consequences elsewhere. For example,</p><p>targeting all <ul> s under a selector like .container ul {} may work when that code</p><p>was written, but once many other components are nested in a .container component,</p><p>the ul styling may not be appropriate. With encapsulation and speci�city at the heart of</p><p>the BEM methodology it can help prevent naming clashes between components and</p><p>http://nicolasgallagher.com/about-html-semantics-front-end-architecture/</p><p>http://www.bluegg.co.uk/building-my-health-skills-part-3/</p><p>the BEM methodology, it can help prevent naming clashes between components and</p><p>unspeci�c selectors from accidentally styling some of the page.</p><p>The BEM methodology encapsulates your code for reuse</p><p>Harry Roberts, a Consultant Front-end Architect, designer and developer from the UK who</p><p>has contributed a huge amount to the ideas in the area of BEM and authoring clean CSS,</p><p>pointed out that the BEM methodology makes it easier to reuse components across</p><p>websites through its encapsulation:</p><p>“The BEM methodology is ideally suited to projects where your components might need to</p><p>be moved from one codebase to another; they need to be fully encapsulated so that you</p><p>can just move one chunk of HTML, CSS, JS across to another project, and you don’t have to</p><p>take any dependencies with you. Let’s imagine you work for a company that has �ve</p><p>different sites, and they all need the same carousel on the homepage. You’d write that</p><p>carousel in the BEM methodology so that you can pick it up in one piece and move it</p><p>around.”</p><p>Works well with frameworks with a component-based focus</p><p>Josh Hunt, a front-end developer from Sydney, has found it plays nicely with other</p><p>frameworks with a similar component focus:</p><p>“BEM does really well for sites that have lots of self-contained widgets or components, like</p><p>web apps. Frameworks that promote HTML components (Angular, React, Polymer/Web</p><p>Components) also make it a lot easier to apply BEM methodologies.”</p><p>Quick way to deliver prototypes</p><p>Bob Donderwinkel, a front-end developer from Rotterdam, the Netherlands, gave a great</p><p>presentation on “The bene�ts of BEM CSS”. He points out the biggest advantage he found</p><p>with working with BEM:</p><p>“I have been dabbling with BEM for half a year now and used it in two projects: a new</p><p>scrolling gallery page for www.viewbook.com and reworking an old Flash site to an HTML</p><p>version. The designs for these projects were well de�ned and I would say the biggest win</p><p>using BEM was delivering a prototype fast. And that’s mainly because “deciphering” your</p><p>design in Blocks Elements and Modi�ers gives you a nice head start to code up some</p><p>http://www.slideshare.net/BobDonderwinkel/bem-presentation-40907446</p><p>http://www.viewbook.com/</p><p>design in Blocks, Elements, and Modi�ers gives you a nice head start to code up some</p><p>CSS.”</p><p>Makes you think twice</p><p>Josh Hunt �nds that the naming convention helps you think twice before making things too</p><p>complex:</p><p>“I’ve found due to the fact that it is a bit ugly, it forces you to think twice when going to write</p><p>really long class names.”</p><p>Make sure you plan!</p><p>Hamish Taplin also provided these words of advice for those starting a new project:</p><p>“Have a degree of planning when you start a project. I tend to go through the mockups and</p><p>look for patterns I can abstract into BEM modules. This can be hard at �rst but you get</p><p>better at it to the point where you start to re-use old patterns. Re-using code is the nirvana</p><p>of development and something your boss will thank you for when production costs go</p><p>down because you’re more e�cient!”</p><p>Don’t get too strict with it</p><p>Josh warns about getting too restrictive with your projects when aiming to use BEM:</p><p>“Don’t feel restricted by BEM or feel like you’re being forced to follow some weird pattern.</p><p>I’m drawn to these two tweets by Harry Roberts:</p><p>· Dec 2, 2014Harry Roberts @csswizardry</p><p>Modularity, DRY, SRP, etc. is never a goal, *it’s a trait*. Don’t let the pursuit</p><p>of theory get in the way of actual productivity.</p><p>Harry Roberts</p><p>@csswizardry</p><p>That’s not to say Modularity, DRY, SRP, etc. aren’t great ideas</p><p>—they are!—but understand that they’re approaches and not</p><p>achievements.</p><p>8:25 AM · Dec 2, 2014</p><p>30 2 Share this Tweet</p><p>Tweet your reply</p><p>https://twitter.com/csswizardry/status/539726989159301121</p><p>https://twitter.com/csswizardry?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E539726989159301121%7Ctwgr%5E%7Ctwcon%5Es2_&ref_url=https%3A%2F%2Fwww.sitepoint.com%2Fbem-smacss-advice-from-developers%2F</p><p>https://twitter.com/csswizardry/status/539697101853429760?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E539726989159301121%7Ctwgr%5E%7Ctwcon%5Es2_&ref_url=https%3A%2F%2Fwww.sitepoint.com%2Fbem-smacss-advice-from-developers%2F</p><p>https://twitter.com/csswizardry?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E539726989159301121%7Ctwgr%5E%7Ctwcon%5Es2_&ref_url=https%3A%2F%2Fwww.sitepoint.com%2Fbem-smacss-advice-from-developers%2F</p><p>https://twitter.com/csswizardry/status/539697101853429760?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E539726989159301121%7Ctwgr%5E%7Ctwcon%5Es2_&ref_url=https%3A%2F%2Fwww.sitepoint.com%2Fbem-smacss-advice-from-developers%2F</p><p>https://twitter.com/csswizardry?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E539726989159301121%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fwww.sitepoint.com%2Fbem-smacss-advice-from-developers%2F</p><p>https://twitter.com/csswizardry?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E539726989159301121%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fwww.sitepoint.com%2Fbem-smacss-advice-from-developers%2F</p><p>https://twitter.com/csswizardry/status/539726989159301121?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E539726989159301121%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fwww.sitepoint.com%2Fbem-smacss-advice-from-developers%2F</p><p>https://help.twitter.com/en/twitter-for-websites-ads-info-and-privacy</p><p>https://twitter.com/intent/like?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E539726989159301121%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fwww.sitepoint.com%2Fbem-smacss-advice-from-developers%2F&tweet_id=539726989159301121</p><p>https://twitter.com/csswizardry/status/539726989159301121?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E539726989159301121%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fwww.sitepoint.com%2Fbem-smacss-advice-from-developers%2F</p><p>https://twitter.com/intent/tweet?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E539726989159301121%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fwww.sitepoint.com%2Fbem-smacss-advice-from-developers%2F&in_reply_to=539726989159301121</p><p>Josh explains, “BEM shouldn’t be the goal of a project, it should be something you keep in</p><p>mind as you’re developing and apply where useful. Don’t get too carried away trying to stick</p><p>to some theoretical ‘standard’. Helper classes (like .pull-right or .text-center ) are</p><p>totally cool to co-exist with BEM. Where you might have had class="story--centered" ,</p><p>class="story text-center" will do just as well (perhaps even better).</p><p>If you’ve been hesitating, just jump in and give it a go</p><p>Hamish didn’t take the leap into BEM straight away. It took a bit of time, an in�uential</p><p>presentation, and changing jobs, to get him to reassess and put BEM to work on rethinking</p><p>his classes. But he’s glad he did.</p><p>“I’d seen BEM mentioned a few times and thought it looked interesting but still carried on as</p><p>I was, attempting to minimise the amount of markup and classes I was writing, using Sass</p><p>@extend to work around the problems this causes. One day I watched Harry Roberts’</p><p>video “Breaking Good Habits” and was blown away. This guy was spot on — what problems</p><p>were we actually solving by doing this?”</p><p>Hamish goes on to say, “I was moving jobs at the time, starting at my current job at Bluegg</p><p>and saw it as a clean break for trying BEM out.”</p><p>I asked Harry, that same developer who blew Hamish away with his talk on “Breaking Good</p><p>Habits” and who inspired Josh with his tweets, if he had any particular</p><p>success stories to</p><p>share. His words echoed the “give it a go” mentality:</p><p>“Every project I’ve worked on has bene�ted from the BEM naming convention. It’s not an</p><p>instantly life changing thing, so it’s hard to cite success stories per se: usually it is just one</p><p>of many parts that come together to create a much better whole. Like a steering wheel</p><p>itself isn’t very profound, but it’s a vital part of a car; BEM naming is one thing that makes an</p><p>entire project a lot better.</p><p>“The closest I have to a success story, perhaps, is the time I introduced BEM naming to a</p><p>client of mine. He’d avoided BEM naming for a long, long time, citing the oft-used “But it’s</p><p>just so ugly!” I convinced him to at least give it a try on a project for just half a day and see</p><p>Tweet your reply</p><p>https://vimeo.com/44773888</p><p>https://twitter.com/intent/tweet?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E539726989159301121%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fwww.sitepoint.com%2Fbem-smacss-advice-from-developers%2F&in_reply_to=539726989159301121</p><p>just so ugly! I convinced him to at least give it a try on a project for just half a day, and see</p><p>what he thought then. He loved it. After only a few hours he was putting underscores in</p><p>here, and double-hyphens in here. It’s always great to see people have that light bulb</p><p>moment.”</p><p>Harry also put the following question out there for those who are uncertain:</p><p>“If you’re unsure about BEM, answer this question: What is there not to like about a strict,</p><p>transparent, and meaningful way of naming things? Honestly, there are no downsides to</p><p>using BEM naming.”</p><p>I’ll leave the �nal words on this to Hamish Taplin who said:</p><p>“Just try it. BEM is about solving problems so see if it does that for you. I’ve seen it</p><p>dismissed on many a forum or discussion by people who have never tried it and wish to</p><p>keep their markup “semantic”. I was the same until I took the plunge and it completely</p><p>changed my entire outlook on how I should write HTML and CSS. You have to be prepared</p><p>to adapt and admit when you are wrong if you want to build great products.”</p><p>Guidance from those who’ve used SMACSS</p><p>Ease of demonstration and handover</p><p>Chris Wright, a Sydney-based developer, is a big fan of SMACSS and offered his advice.</p><p>Chris’ main praise of SMACSS is the ease of use of its categorization features:</p><p>“Once I started leveraging the reason why SMACSS was so powerful, the categorization</p><p>features, I found it to be a really readable and teachable methodology compared with the</p><p>other popular CSS methodologies.”</p><p>“I’ve been using it as a contractor because it’s so much easier to demonstrate to people –</p><p>here’s my stylesheet: classes with an l- in front of it concern layout, things with m- in</p><p>front of it are modules, and so on. While I still have to handover and explain, the amount I</p><p>have to explain and document has been reduced so it’s saved me more time outside of the</p><p>work as well. As of last year, I’ve started using it on every project I can.”</p><p>Good for newcomers to a CSS methodology</p><p>Chris particularly found he had trouble getting others to work with early versions of BEM</p><p>and OOCSS but SMACSS was easier to explain:</p><p>“I’ve found that it’s far easier to explain to a developer that’s never encountered a CSS</p><p>methodology before – what the value of that methodology is and how to use it.</p><p>“I tried for a while with BEM but always found people would get confused. With OOCSS I</p><p>found that people’s naming conventions were often all over the place but they generally got</p><p>it. SMACSS offers categorisation that helps you see straight away what the purpose of a</p><p>class is.”</p><p>Ease of reading</p><p>Chris also said he found early versions of BEM to be a bit verbose but has seen it</p><p>developing over time, he prefers SMACSS here.</p><p>“Also from a reading point of view, all those underscores and dashes and crazy long classes</p><p>in BEM tended to turn me away from it – I’ve seen some more adapted versions like what</p><p>Harry Roberts has done as a pretty huge improvement on the methodology, but I still don’t</p><p>feel like it’s for me.</p><p>Scalable for all projects</p><p>Chris also points out that SMACSS doesn’t need to be completely followed in the same way</p><p>on larger sites compared to smaller ones, which allows for �exibility and applicability in all</p><p>projects:</p><p>“I think it’s safe to say varied forms of SMACSS can be suitable for all projects. As Snook</p><p>states in his book – on a smaller project you probably wouldn’t use things like theme as a</p><p>category ( t- ), but being able to differentiate a layout class from a module class from a</p><p>glance is pretty valuable.”</p><p>You can use SMACSS and BEM</p><p>Hamish Taplin actually takes a hybrid approach using some SMACSS concepts within his</p><p>Hamish Taplin actually takes a hybrid approach, using some SMACSS concepts within his</p><p>BEM. I found quite a few developers have found a sweet spot between the two, so it might</p><p>not be a matter of choosing one over the other:</p><p>“I do use some SMACSS concepts and I don’t see them as mutually exclusive. I organise</p><p>my Sass into “base”, “layout” and “modules” which are broadly SMACSS conventions. I’m</p><p>also a big fan of using ‘state’-based classes in my JavaScript. For example, a module that</p><p>can be visible or hidden might have is-visible or is-hidden classes controlled by</p><p>JavaScript. I �nd this helps distinguish what is controlled by JavaScript rather than using</p><p>BEM-style modi�ers. I wouldn’t be against that though.”</p><p>Bob Donderwinkel agreed that a mix of both BEM and SMACSS is possible in most</p><p>situations:</p><p>“I would say using one does not exclude the other, although there is some overlap with BEM</p><p>if you consider the module and state rules from SMACSS. But besides these you can mix</p><p>and match both up as needed.”</p><p>Harry Roberts recommends choosing the best bits from everywhere and uses his own</p><p>methodology that he calls “ITCSS” with a combination of BEM, SMACSS, and OOCSS.</p><p>“I actually use my own — as yet unpublished — ITCSS methodology alongside smatterings</p><p>of OOCSS, BEM, and SMACSS. It’s hugely important to pick bits from everywhere, rather</p><p>than blindly follow one methodology right to the bitter end. I always use BEM naming, and</p><p>would use the BEM methodology on projects where I need fully encapsulated components</p><p>that need sharing across multiple codebases. I would write these components using</p><p>OOCSS, and then I would wrap these components up into an ITCSS architecture.</p><p>“It doesn’t start and stop with BEM and SMACSS. ITCSS is designed to encompass entire</p><p>projects; OOCSS is a great little methodology that is everything-compatible; SOLID</p><p>principles can be used to write better quality CSS.”</p><p>If you’re keen to �nd out a bit more on ITCSS, Harry has a a video available for you to</p><p>watch. For more info on SOLID CSS principles, Harry also offered these two articles:</p><p>https://www.youtube.com/watch?v=1OKZOV-iLj4#t=406</p><p>The single responsibility principle applied to CSS</p><p>The open/closed principle applied to CSS</p><p>If you haven’t done so, read the SMACSS guide</p><p>Harry Roberts strongly recommends reading the SMACSS guide:</p><p>“Just read up on it. SMACSS is one of the best bits of front-end reading that’s come out in</p><p>the last few years, and it’s very di�cult to disagree with the logic it puts forward.”</p><p>Horror stories on BEM and SMACSS</p><p>I tried to get some horror stories and words of warning from our developers – lessons we</p><p>could learn from their missteps while they were in the learning process. Here are their</p><p>thoughts.</p><p>Alec Raeside on BEM</p><p>“It is quite a learning curve, it isn’t conceptually too di�cult to understand, but it takes a</p><p>while to change your habits of writing normal CSS/Sass. It’s very easy to NOT think in a</p><p>purely component based way. I’ve been writing BEM all year and still feel like I’m learning</p><p>and upgrading the way I write it. Sometimes you have to write a bit more CSS with BEM</p><p>compared to non-BEM CSS to achieve something which is annoying, but it’s best to have</p><p>consistency.</p><p>“BEM in itself isn’t enough to build UI the best way possible, we combine</p><p>BEM, mobile �rst</p><p>CSS, appropriate use of Sass and strict coding standards. We haven’t got it perfect but it’s</p><p>getting better. We have also recently started using scss-lint to help enforce our coding</p><p>standards and to a lesser extent our BEM usage.”</p><p>Chris Wright on SMACSS</p><p>“Most of my horror stories aren’t really horror stories but places of pain. I have been</p><p>encountering agencies that are really Bootstrap framework heavy who want to continue</p><p>with more of an OOCSS approach, which is �ne (OOCSS is pretty good too) – but trying to</p><p>convince someone that uses an approach that comes with their particular framework to</p><p>slightly adjust their methodology for their projects that don’t use the framework is a fairly</p><p>http://csswizardry.com/2012/04/the-single-responsibility-principle-applied-to-css/</p><p>http://csswizardry.com/2012/06/the-open-closed-principle-applied-to-css/</p><p>https://smacss.com/</p><p>https://github.com/causes/scss-lint</p><p>futile argument to be having. So I have had to leave it in those cases. SMACSS’ biggest</p><p>weakness I’d say is actually that it’s less widely adopted than BEM or OOCSS – it seems like</p><p>fewer people have heard of it.</p><p>“My own personal stories with implementing it have been not really adhering to the point of</p><p>the methodology. It’s very easy to fall in to the trap of “module all the things”, and forget that</p><p>the categories that were suggested were exactly that, a suggestion. The hardest part is</p><p>understanding what quali�es in each category. Is a globally used primary button a module</p><p>called .m-btn-primary ? Or is the thing it lives in the module? It can be confusing when</p><p>you �rst start using methodologies, and in the case of SMACSS where you’re clearly</p><p>de�ning things like layout, modules, and themes; I’ve run into a few situations where I had</p><p>to stop and think where something belonged, but that’s also been a positive for me, and the</p><p>point is we want more organised classes that people can read and understand easily.”</p><p>Josh Hunt on BEM</p><p>“First time using BEM will more often than not be a nightmare. My �rst time I was creating</p><p>.classes__about__five__levels__deep . BEM is not supposed to be a one-to-one</p><p>mapping of DOM structure to class names.</p><p>“What I’ve found di�cult to apply BEM to is when you need extra elements purely for styling,</p><p>like .wrapper or .inner . It’s not really right to have an .article__inner (inner isnt</p><p>an element of an article). Sometimes you can be creative with the words you choose</p><p>( div.article__media img.article__img ), but other times it’s perfectly �ne to “break”</p><p>BEM and go .article-wrapper or .article-inner .</p><p>Hamish Taplin on BEM</p><p>“I think the biggest challenge with BEM is inherent in abstraction — it can be di�cult to get</p><p>your head around sometimes. It requires a degree of planning to spot the patterns that can</p><p>be abstracted and you sometimes end up having to refactor when you don’t spot things the</p><p>�rst time. This is common in development though and planning and experience can help a</p><p>lot.</p><p>“Another sticking point is that it requires total control over markup—something that can be</p><p>di�cult if you’re working in an environment (such as .NET) where this isn’t always possible.”</p><p>Harry Roberts on BEM</p><p>“Because BEM naming is just a GoodIdea™, it’s very rare that you’ll hear any horror stories.</p><p>The closest I can think of took place with a really great client of mine back at the beginning</p><p>of the year. They were a really diligent team who’d done a lot of research and reading into</p><p>better CSS architecture, and they got me in for a week of training to try and iron out any</p><p>rough spots. One of the roughest spots was with their implementation of BEM naming.</p><p>Unfortunately, they’d read an article (which, in the interests of not perpetuating, I will not link</p><p>to here) that gave some really, really bad advice on BEM naming. Fundamentally �awed</p><p>information that was just plain wrong. The client followed this advice to the letter and it got</p><p>them into some real troubles. Things were more tangled and interconnected than ever</p><p>before—something that BEM naming is meant to solve! That is, however, the only incident I</p><p>am aware of.”</p><p>Bob Donderwinkel on BEM</p><p>“Well I wouldn’t call it a horror story exactly ;) But I made a little BEM scaffolding tool called</p><p>kaBEM. The mistake I made there was using BEM CSS class names with multiple elements</p><p>(like block__element__element ). Mainly because that helped in generating a nicely</p><p>nested folder structure based on those CSS class names. In essence I was capturing HTML</p><p>structure in CSS class names, but that actually makes BEM a little bit more rigid, which is</p><p>not needed.</p><p>“Another little gotcha was that nesting BEM CSS selectors like you can do with Sass or</p><p>LESS actually adds CSS speci�city where it is not needed. BEM works best as single class</p><p>names, so that’s perhaps something to keep in mind.”</p><p>Conclusion</p><p>After going through everyone’s responses and ideas, it was clear that the best approach</p><p>seemed to be a hybrid. Read up on everything, give both BEM and SMACSS a go with an</p><p>open mind and see whether your CSS and work�ow improve. You don’t need to choose one</p><p>methodology; combine the concepts of a few methodologies into one that works for you</p><p>and your team If you need help there are plenty of developers out there willing to share</p><p>https://github.com/bobd/kabem</p><p>and your team. If you need help, there are plenty of developers out there willing to share</p><p>some thoughts and advice.</p><p>Credits</p><p>A very big thank you to the following developers who were kind enough to give up their time</p><p>to answer my questions and share their thoughts and experiences:</p><p>Alec Raeside – Website, Twitter</p><p>Bob Donderwinkel – Website, Twitter</p><p>Chris Wright – Website, Twitter</p><p>Hamish Taplin – Website, Twitter</p><p>Harry Roberts – Website, Twitter</p><p>Josh Hunt – Website, Twitter</p><p>Share This Article</p><p>Related Articles</p><p>How to Create a CSS Typewriter Effect for your Website</p><p>7 of the Best Code Playgrounds</p><p>Using SVG with Media Queries</p><p>Tags</p><p>advanced-css-tools bem css methodology LouisL smacss</p><p>http://alecraeside.com.au/</p><p>https://twitter.com/smartalec43</p><p>http://www.bdcreations.nl/</p><p>https://twitter.com/bobdonderwinkel</p><p>http://chriswrightdesign.com/</p><p>https://twitter.com/cwrightdesign</p><p>http://www.hamishtaplin.com/</p><p>https://twitter.com/hamishtaplin</p><p>http://csswizardry.com/</p><p>https://twitter.com/csswizardry</p><p>http://joshhunt.is/</p><p>https://twitter.com/joshhunt</p><p>https://www.sitepoint.com/css-typewriter-effect/</p><p>https://www.sitepoint.com/css-typewriter-effect/</p><p>https://www.sitepoint.com/7-code-playgrounds/</p><p>https://www.sitepoint.com/7-code-playgrounds/</p><p>https://www.sitepoint.com/using-svg-with-media-queries/</p><p>https://www.sitepoint.com/using-svg-with-media-queries/</p><p>https://www.sitepoint.com/tag/advanced-css-tools/</p><p>https://www.sitepoint.com/tag/bem/</p><p>https://www.sitepoint.com/tag/css-methodology/</p><p>https://www.sitepoint.com/tag/louisl/</p><p>https://www.sitepoint.com/tag/smacss/</p><p>Patrick Catanzariti</p><p>PatCat is the founder of Dev Diner, a site that explores developing for emerging tech such as virtual and augmented</p><p>reality, the Internet of Things, arti�cial intelligence and wearables. He is a SitePoint contributing editor for emerging tech,</p><p>an instructor at SitePoint Premium and O'Reilly, a Meta Pioneer and freelance developer who loves every opportunity to</p><p>tinker with something new in a tech demo.</p><p>Stuff we do</p><p>Premium</p><p>Newsletters</p><p>Forums</p><p>Deals</p><p>About</p><p>Our story</p><p>Terms of use</p><p>Privacy policy</p><p>Corporate memberships</p><p>Contact</p><p>Contact us</p><p>FAQ</p><p>Publish your book with us</p><p>Write an article for us</p><p>Advertise</p><p>Connect</p><p>© 2000 – 2021 SitePoint Pty. Ltd.</p><p>This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.</p><p>https://www.sitepoint.com/author/pcatanzariti/</p><p>https://www.facebook.com/patrickcatanzariti</p><p>https://twitter.com/thatpatrickguy</p><p>http://www.devdiner.com/</p><p>https://www.sitepoint.com/premium/library/</p><p>https://www.sitepoint.com/newsletters/</p><p>https://www.sitepoint.com/community/</p><p>https://www.sitepoint.com/premium/deals/</p><p>https://www.sitepoint.com/about-us/</p><p>https://www.sitepoint.com/legals/</p><p>https://www.sitepoint.com/privacy-policy/</p><p>https://sitepoint.typeform.com/to/fNY7XG</p><p>https://www.sitepoint.com/contact-us/</p><p>https://support.sitepoint.com/hc/en-us</p><p>https://sitepoint.typeform.com/to/HtAXVN</p><p>https://www.sitepoint.com/write-for-us/</p><p>https://www.sitepoint.com/advertise/</p><p>https://www.facebook.com/sitepoint</p><p>https://twitter.com/sitepointdotcom</p><p>https://www.sitepoint.com/feed/</p><p>https://policies.google.com/privacy</p><p>https://policies.google.com/terms</p>