Getting SASS-y with BEM

A BEM Refresher, Friendsies.

BEM is a class naming structure that helps organize an create modular CSS/SASS. It does so by following somewhat specific conventions. Some find these conventions redundant, but I find them extremely helpful to understanding the DOM. To understand what BEM is ( and my flaming passion for structure and guidelines) check out my previous article on why BEM is so great. As for this article, I am going to assume that you are fully versed in the BEM mentality. I am also going to assume you are well aware of the powers of SASS.

“BEM is dumb, and looks stupid” -meanies

A lot of people think BEM is redundant, with ugly and long class names. I can definitely understand where people are coming from when they are styling class names which feels bloated and overly descriptive. When it comes to SASS (if you are not sure how to use SASS to your advantage) BEM compiles ugly. Especially if you are nesting long BEM names inside of more long BEM names. This can quickly run into specificity issues and ridiculously long CSS declarations that become very frustrating.

This is what beginners to BEM might write their CSS/SASS like. Typing out entire class names, and having sore fingers that lead to cramps and distrust. I fully understand why this looks silly and redundant. Instead of re-using styles we are writing more and more styles for different(but similar) class names and repeating ourselves a whole lot.

Enter SASS, please.

&__whatever–active

With a couple handy selectors and operators in SASS we can do a lot to make BEM excel. One of the most important selectors is a fairly new addition to SASS, the ‘&‘ selector.  This new SASS selector reference its parent from within the declaration. When nested the ‘&’ will grab the parent selector’s class. Because our class names follow really reliable patterns, we can use this to our advantage to create really readable code.

The above is an example of how BEM can be used with the ‘&‘ selector to create the visual bonus of nesting, without the specificity that comes along with nesting. When we use the ‘&’, it will compile completely without descendant CSS selectors. This is really useful and will help with avoiding specificity conflicts in your CSS. However we still get the added bonus of the visual understanding that comes with nesting selectors in SASS.

@extend the powers that be

We can make further use of SASS-y BEM by using the @extend operator. In BEM methodology, you append a ‘modifier’ to the end of the class. When styling in plain CSS, this means you have to give an element two classes in the markup, like so;

The above situation can be super frustrating. Why do you need to create this long winded class to show that an item is active? Why can’t we just add a class named active? Well using @extend, we can eliminate the redundancies.

 

@extend will let us clean up our HTML by making sure that the selected item receives all the styling of the regular nav__item class. We will still be able to change the colour of the active state without having to cramp our fingers re-writing the styles declared before it. In my opinion an element should only have one class, and we should use the powers of SASS to make that element bend to our unbreakable will.

BEM me home tonight, baby.

I hope this has convinced you that BEM has more virtues than faults. Other people will try to tell you otherwise, but BEM is a real winner. Sure it can ramble on and on sometimes, and sure  it feels like it is all redundant in the beginning – but with BEM we maintain a similar level of specificity across all selectors in our CSS. When we use the SASS ‘&‘ selector we are able to avoid nesting specificity conflicts, while still maintaining the visual benefits for organization. With SASS’s @extend operator, we are able to eliminate redundant BEM class names, and really trim down our markup! BEM forward, comrades!

CSS Attribute Selectors

More selectors, more power.

CSS3 was released in June of 2011 and with it came a a whole pantheon of new and exciting selectors. I am lucky enough to never have experienced the time before being being able to wield unfettered CSS power. We are in a time were CSS is reaching exciting new heights! I have found that in people’s learning a lot of extremely powerful selectors are often overlooked. Take a gander at these tools, for they will be able to help you when you spelunk into a dark CSS cave without a flashlight.

Attributes that equal “wow!”

element[attr=value]

The selector above translates into pure all-consuming attribute power for those of us wishing to select specific elements with unique or shared attributes. My favourite use case for this is styling pesky input elements. Instead of applying a series of classes you just write something like this.

The above selector will target all your text inputs and change their colour to red. This is extremely useful when you are using a variety of classes for various inputs, but you really want to hunt those inputs down and style the hell out of them.

Attribute Beginning With “whoa”

element[attr^=value]

“All my classes beginning with” selector is totally a real thing and pretty crazy powerful. This selector can be extremely useful in niche cases. Depending on your naming scheme, you can use the selector as follows to style your personal live journal site.

This will grab all the divs that have the class beginning with ‘journal’ and apply they styles. Instead of writing a two class names “journal journal_red”, we can just write “journal_red” and use this powerful selector to target every journal, regardless of its difference in class name suffix! So many coloured journals if you want!

Attribute Ending with “what?”

element[attr$=value]

If we have a selector for grabbing attributes that begin a certain way, we sure as hell have one that grabs elements ending a certain way. My favourite use for this selector is on image elements. Take a look;

The above would grab all images on your page that end .jpg and apply styles to them! This can be extremely useful when trying to style a series of images and make them all circles because circle images are in right now I guess.

There are Two More… but They Come at a Price

To round off our attribute selectors, we have two more available to us. They are a little risky though, because they lack inhibition. They WILL invite everyone to your party and then wreck your carpet with pizza grease.

element[attr~=value]

This will grab all elements on the page that contain an attribute with the complete value.

This will grab all divs which have a class containing the word “container” in it, no matter where it falls in the class name. This can be extremely useful, OR extremely dangerous depending on this situation! So use this jerk at your own risk.

element[attr*=value]

Lastly we have the most dangerous of all. A global attribute selector. This bad bot will grab all match values that even look like it might be right.

This selector above will grab all divs with a class containing any ‘et’ in it, and apply the styles declared. So like ‘clarinet’, ‘cabinet’, ‘alanis morrisette’. It will grab all of them. And make them disappear.

So now you Have More Power, Kay?

Go into the CSS world and select those attributes! Use all these lovely selectors – but maybe not all at once. They will give you the upper-hand when battling specificity daemons, or exorcising an over-classed terror, or when you’re in a life or death CSS battle with dreaded FORMS. These attributes will help you keep your code a little bit drier, and your toolkit a little more stocked to  better deal with adventures into the unknown!

For more clarity, be sure to look through MDN’s CSS documentation on the subject!

 

 

 

BEM helps beginners learn HTML/CSS

What is BEM?

BEM is a naming convention that aims to create a consistent structure for creating CSS class names. The goal of BEM is to help the developer better understand exactly what they are targeting in their CSS. Too often  new developers (myself included) ask themselves “what the hell do I name this div? I already called the other dive a container!”. BEM aims to clear up confusion and that feeling of helpless class naming by providing a clear structure.

Block. Element. Modifier.

First we examine a ‘block’. A block is a top level extraction of an element. This element has children within it. A BEM ‘block’ is often a block element; buttons, navs, and sections.

Next is an ‘element’. These are characterized as html elements which are tied to a parent. BEM elements have no meaning outside the block that they are in. These can range from containers, to list items, or even table cells. Elements often require their parents (blocks) in clarification of where they are in the HTML structure.

Last we have ‘modifiers’. Modifiers flag elements or blocks for different states. They often define unique properties about a block or elements that are used once or twice. These might be colours, sizes, or booleans(true/false).

Okay. What does BEM even look like?

BEM follows a very specific structure.

BLOCK__ELEMENT--MODIFIER.

This convention ensures absolutely clarity in creating very specific class names. As seen above we have the header. Within the header, there are two elements, the logoContainer (which I have chosen to write in camelCase, but any naming convention works within BEM), and the nav.

Nav and logoContainer their own children. These two elements now become the BEM blocks. In the nav we have list items, and in the logoContainer we have a logo. In the nav we can see an example of a BEM modifier showing us a separate ‘state’. One of the list items, the page we are currently on, is tagged with ‘–selected’. Thanks to we BEM know that this one item will look different than it’s siblings because of this modifier tag.

Why is this even helpful again?

When you are simply writing BEM HTML the class names seem redundant. Why not just target the list items in the nav by writing something like this;

The above looks like it will create the desired result, but once documents get more and more complicated, the above CSS will begin to target more than expected. Imagine a scenario where you have multiple navs elements on one page, with many lists inside of them. Do you truly want all those items to have red text?

Moreover the above CSS will lead to specificity issues. When you begin to try and change things via adding more classes, these declarations will still reign supreme. You will run into confusing messes of scattered red texts in lists throughout your page because specificity will be scattered and harder and harder to determine. This can lead to a lot of frustrating situations for new developers.

Oh gosh, that sounds terrible.

Enter BEM CSS.

\

The above is an example of creating CSS selectors that all have the same specificity. Because we are only target classes to apply styles all that matters is the cascade of CSS. Moreover, BEM ensures that upon returning to your code you will be able to know what all your declarations are targeting.

So what’s bad about BEM?

In my limited experience, adding more structure and guidelines to my front-end naming style has had no draw backs. BEM Class names can end up being very long but they are very specific. As long as you stay vigilant with BEM naming convention, you will be sure of what you are targeting.

BEM is a fantastic tool for devs beginning their journey because it really enforces the hierarchy of HTML. In every class you create you have to ask yourself “which is the block, and which is the child?”. The addition of modifiers enforces the idea of modular reusable css, introducing the idea of states, themes and various more advance html/css concept that will help you create more dry and maintainable code.