Smacss and bem

Editor's Notes

• #2: Scalable and modular architecture for CSS and BEM, which is a clear naming convention for your modular css
• #3: Modular CSS means breaking up your CSS into reusable components This can be incredibly powerful when working on large projects, each of your CSS files can be small, clearly named and easily removed if no longer necessary If you’re working on a complex layout, modular css can help you break the design down, the components will be easy to edit and understand. I showed a SMACSS project to a non developer friend of mine and he immediately understood what the styles were doing, who can claim that a non developer would be able to understand their usual css? SMACSS defines a common language to use within your styles, for designers and developers this is a massive time saver when adding new colleagues to a project or when discussing changes/additions.
• #4: So what does SMACSS consist of? We’ll go over these all now
• #5: A Base rule is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes. It doesn’t include any class or ID selectors. It is defining the default styling for how that element should look in all occurrences on the page. This, mostly likely includes your Reset CSS and will also include your typography rules, your default link styles, ul styles, li styles etc body background is one that lots of people overlook, never assume that the user will have a white background, always set it. Never ever use important when writing your reset styles, i would hope that would be self explanitory.
• #6: Now that we have our base styles, we need to actually start styling up things on the page, and we do this by separating them into modules Modules are sometimes referred to as minor components. They’re discrete components on the page, for example a navigation, or a dialog. lets take a look at a design and point out some modules
• #7: Modules can be thought of at an ‘element level’, they can’t be broken down any further, so like an h1, or a link
• #8: Groups of elements with particular styles are also modules, i like to think of these as molecular, as in multiple elements combine to make a molecule, so here we’ve got a piece of text with a link and an icon, or text with an icon, or three styles of text with a border
• #9: Groups of groups of molecules make up a module, and groups of modules can make up a module too! once you’ve spilt the page up into all the modules you want, then you need the rules about where these modules go, which are the layout rules
• #10: Whereas modules are minor components, the layout rules refer to major components, so header, footer, sidebar, main etc if we take a look back at our earlier example, you should be able to clearly see the layout components
• #11: so we’ve got the main content, the sidebar, the navigation and the header, the footer would also be a layout element, along with the container for the content so, we’ve build up our page from the atoms up, but we still need a few other style options, namely the state rules
• #12: these govern what the elements do if the change state, for example a button that you can or can’t click on, or a collapsed or expanded accordion. These styles can be applied to elements or to entire modules there was one state rule shown on the Live Nation layout
• #13: The final part of SMACSS is the theme rules, these you would use if you were planning on having multiple themes for your site, something like the BBC website is a great example of good theming, they have a set of designs, layouts and modules for each program and each can have its own colour scheme. How you do your theming will really depend upon what you are changing between themes, but the components that we’ve already introduced from our module and layout rules should make this easier. So, now that we’ve looked at how to break up your styles, we can talk about how to name them in a sensible way. And for that we need to take a look at BEM
• #14: A strict, logical naming structure
• #15: BEM stands for block, element, modifier It was designed to be transparent and informative, you name the modules for what they do and their internals for what they are The reason for the, somewhat ugly, double dash/hyphen is that it allows you to use a single dash or hyphen in your class names So, if we were looking at the smacss structure from before, the block would likely be your module, the element, the elements within that module and the modifiers would be used to change the style of an element, perhaps if there were multiple of the same element inside the module. The point of BEM is to make it immediately obvious what your styles are being applied to, and how each of the elements relate to one another. I know, it looks weird, but bear with me here, the gains that you get are definitely worth it. So, if we go back to the page from before, we can take a look at how to style it with this pattern.
• #16: If we look at the highlighted section, We’ve got a block, that’s our container, which contains the event information, so we’ll call it ‘eventinfo’ Then we’ve got a title, an image, a date block,a venue with an icon and a link and a time with an icon. Have a quick think about how you’d style up this component.
• #17: So, our block is eventinfo, then the elements within that are named for the block, separated with a double underscore we’ve got two elements which could theoretically extend from the same styles, they’ve both got icons, and text of the same size/color In order to do this we use the modifier, which is separated with a double hyphen. We could also put the date in here, then we’d have eventinfo__date Looking at the rest of the page from earlier, we can see that the date is actually reused in a carousel further down the page, so if it were me building it, I’d make the date a module of its own, style the components that don’t change in that date module, so in this case, the size and layout of the text, and then use our eventinfo__date to extend from that module and apply the rules for how it looks in /this/ module, eg the colour and background color.
• #18: So, you’ll notice a few things looking at these selectors, firstly lots of classes, part of the reason for that is that we’re trying to make reusable modules, there can only be one id on the page and so that would instantly make the module more difficult to make reusable the other reason is to avoid the priority hijacking that you get from IDs, if we use only classes then every style has the same priority and we’ve not ruined the cascade of the styles, making it much easier for use to make changes in the future and to maintain our lack of need for nesting. lets look at some code in the wild, this is an example of a module
• #19: You might notice that there is no modifiers in this file, I rarely find myself needing modifiers with the design you’ve seen. As far as applying modifiers to cause a state change, I personally prefer to add a new class, something along the lines of ‘.is-active’, this is because of the need to create extends if you’re using a modifier for a state and the extra complication that is caused by needing to add and remove different classes with js. This is however, a personal preference, and you’ll find the more you use BEM the more you can sculpt it to fit with your project. The other thing to notice is that there is no nesting. Like using IDs, nesting can cause all kinds of woes later on in your styling, avoid nesting and you can avoid needing to use !important as much as possible. One of the great things about BEM is that it is self regulating, if you notice that you’re needing lots of underscores or if your css files are getting too long then it is a good indication that you need to split your module up further. It is tempting, with SCSS, to use the ampersand to nest the selectors inside one another, but although that won’t cause the same issues as standard nesting, it does make your CSS immediately less legible and far less searchable for editing in the future, BEM is supposed to be making our jobs as easy as possible, don’t undo your good work! Adam gave an excellent talk earlier today (https://adz.co.de/talks/#the_brain_the_gut_and_your_job.html) To quote him, ‘The project is more important than your clever code’, if an intern can’t understand your clever code then you’ve failed. We’ve got a large number of components, i guess you can see that from the number of folders here, if these were all in one file it would be a nightmare, modularising them allows us to easily add and remove components, then we have a master CSS file for each page which imports the modules that it needs,
• #20: We have common styles that are used on every page and then we can include the modules that each page needs individually none of the files are longer than a 400 lines long, they’re a pleasure to maintain and quick to read and debug
• #21: The base styles are in a reset file, and a typography file, these can extend from other palette, sizing and viewports files to get the variables they need. Components can extend from the typography file to get the styles they need The module styles are separated into components and each component has its own scss file There is a containers file which describes how each of the available containers for modules can look and modules can extend from these containers The layout styles are written as a component, they describe how the splitting of the page works at desktop and mobile. we also have created widgets which can be repeated within components, So there you have it, that is how LN does their styles, and to be honest is is a joy to work on, most of the time!
• #22: So, to recap Make your CSS modular, separate out the layout, modules and base styles keep your modules small, if you think its getting to big, reconsider the makeup of the modules, can you break it down further? don’t nest! You’ll thank yourself in the future drop your IDs, a module can’t be reused if you’ve given it an ID name your classes sensibly, even if you don’t want to go with bem, this is an incredibly important take away I hope you’ll give BEM a go, it does seem awkward and verbose at first, but I think you’ll grow to love it.