A young web designer’s introduction to BEM
Naming classes in an organized and productive way is challenging. Oftentimes CSS stylesheets are littered with ID and class names that often only make sense to the designer who created the document. However, it is important for young designers to understand the content of a CSS stylesheet in order to increase coding efficiency. This is especially important when designers are involved on a project in a professional setting.
Designers need a uniform naming-system to make HTML5 and CSS3 more readable when collaborating on large scale projects.
Enter BEM.
BEM is a tool that designers use to name classes. BEM stands for block element modifier.
A block is a standalone component, like a parent, such as a section, navigation, or article that is reusable. An element falls under the block, like a child, and is an extension of the block in the naming system. An example of an element is an HTML list tag that falls under the ordered or unordered list tag and navigation links that fall under the HTML5 navigation tag.
A modifier is added to the block or element to stylize that block or element. Modifiers exist to target specific blocks or elements in order to change the color, size or other stylistic choices up to the designer’s discretion.
BEM helps developers understand the relationship between HTML and CSS on a given project. The chosen class names are easy to read, maintain and improve upon. According to getbem.com, “The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language.”
There are no hard rules on what designers should name elements, but the names should be straightforward enough for designers, both on and off the project, to easily follow on HTML and CSS stylesheets.
Before BEM, budding web designers like myself used informal naming practices. This approach sufficed in the early learning stages of web development because I named certain blocks and elements on my page as a trial to check and confirm whether or not those rules worked.
Even though I made successful and beautiful web pages, I often find myself getting lost in my own messy stylesheets when I go back to make changes or to see how I coded something. In fact, naming elements in a clear, effective and organized way without those elements riding over one another is one of the most frustrating challenges I face as a young web designer. Introducing BEM into my practice seems like the missing link to elevate my coding.
My favorite part of implementing BEM is that it allows me to be really intentional with naming blocks and elements on my web page designs. This organized naming process makes it easier for me to sift through my coded content. It also makes it easier for me to follow other designer’s work in order to learn from them.
BEM also makes the HTML5 and CSS3 coding pages more manageable because I can clearly see every single block and element, and which of those blocks or elements is intentionally modified based on the name of the class. This naming system exposes how every class is being used and styled and each classes’ relationship to other blocks and elements on the page.
My least favorite part of BEM is that this naming system is repetitive. It is annoying to have to add a class to every single list item and navigation link. In addition, stylesheets look longer and seem more complex.
Additionally, all of the rules that accompany BEM make the coding process feel more rigid. However, I believe that over time with practice BEM will be easily adapted into the coding process as if by second nature.
BEM requires a bit of planning and a big picture perspective. The BEM naming system requires coders to visualize the overarching structure of the site in order to name those structures accordingly. This approach can be difficult when designers are comfortable with the personal naming conventions they already utilize in HTML5 and CSS3.
As stated prior, BEM feels like another language in itself, and implementing BEM can be time consuming. However, BEM takes practice just like HTML5, CSS3 and all other computer languages and it adds an element of universality to frontend coding. BEM takes coding to the next level and invites budding web designers to enter the professional coding realm in order to collaborate, learn and elevate our practice.
