Client-First vs BEM, which to use? If none of this means anything to you, and you’re building websites, then this post is even more important for you and your clients!
We're going to cover the following points:
BEM stands for Blocks, Elements, and Modifier, and it began it’s rise in 2006 as a means to manage large projects:
Together this produces code that looks something like this nav_link--current, although there are various versions depending on preference. Below you’ll see an example of a homepage banner element created using BEM. This is representative of a typical layout as well as an alternative style modifier on the button (Figure 1).
Client first is a modification of BEM that was developed by Finsweet to adapt the BEM approach to work better with Webflow websites. It follows an approach that looks something like component_[element-name] but it also focuses on having global utility classes like padding-global, margin-large and so on.
To add style modifiers, it uses classes like is-blue
The typography naming system and spacing systems are also component-based so you’ll often see things like text-size-[size], text-color-[color] or [padding-direction] + [padding-size] used together.
When styling blocks, it's structure does resemble BEM - as you’ll see in the hero block in figure 2. There’s more to the system but these are the fundamental features required to grasp the basic concepts.
BEM is great for dealing with SCSS/SASS since the nested page elements follow a chronological structure, as you can see in figure 3. It creates a clear relationship between the whole homepage banner and it’s child elements. You can then manage them in a single file, like _home-banner.scss, making change management easy.
Global styles can be defined in a separate SCSS/SASS file, like the container class in figure 1, and you modify sizes, spacings and colours by styling the block, elements and modifiers.
BEM puts you in charge of defining your class names and their properties. There's also a few different implementations so you can choose one that better suits your preferences. Learning a framework can slow down development until you become proficient.
BEM is great for writing code, however clients get no semantic information from the class name alone eg home-banner__title tells the client it’s a title but it doesn’t tell us about its size, colour or weight to name a few properties. Having said that, we've never worked with any client who's wanted to update the frontend themselves so this isn't a major drawback.
The flexibility of BEM can also be it's biggest drawback. Since there are a few different implementations and you're in charge of defining class names, it's very easy to run out of ideas and to create duplicate stylings. Sticking to a singular implementation and reviewing designs for repeating elements can usually circumvent this issue.
Since Webflow empowers clients to mange the websites themselves, it can be helpful to know the function of each class just by reading their names. Additionally, if you set up a page with all your components, the client can update it once and it’ll change all styles throughout the website.
This system is good, particularly when scaling projects and when collaborating with multiple, non-technical stakeholders. It does require some setting up but there is a clonalable to help get things started!
The Client-first clonalable also has some custom code which makes your websites page elements stay the same size, and aspect ratio, if you change the browsers width. This is all done with accessibility in mind and it's vitally important for more complex layouts.
The major issue with Client-First is div soup, a phenomena which occurs when elements have several wrapping divs just to display a piece of text. The library itself if also quite large which can slow down your website. Having a high HTML to content ratio is bad for your SEO, and larger CSS files can slow down your website and also negatively impact SEO performance.
The real power of client first comes from it's style guide, particularly the headings and buttons. Having spacing utility classes is nice, but accessing their full capabilities means limiting yourself to standard SAS-like brochure websites since it can't cover all use cases.
So website layouts that are more adventurous often find themselves at a loss due to the extra CSS utility classes which aren't being used.
The Saddle framework aims to mix the flexibility of BEM with the utility of component-based libraries like client-first. It's advantage over client first is it's more lightweight and it grants BEM-like flexibility when defining layouts. Additionally, the naming convention looks cleaner since they took inspiration from tailwind.
Like saddle, MAST intends to empower users with flexibility whilst reducing the bulkiness of the framework. It even provides guidance on mindset in order to negate some of the drawbacks of BEM that we discussed. Saddle also used mast as inspiration for their framework so there are several similarities.
Having used both approaches now, I’m leaning towards favouring Client-First for Webflow projects. This decision is aided by the fact you can clone the Client-First components from Finsweet and get things up and running quickly.
The classes are easily understood and you don’t get undesired results from adding combo classes, since a lot of the styling is handled by clearly defined global components.
I still find BEM superior when writing code with SCSS/SASS because its very easy to nest your styes, in a chronological format, in the one file. To use client first, without webflow, you’d often find yourself jumping between different files, or navigating to multiple locations within the same file, just to change the spacing, or weight, of a single element.
A well configured list of SCSS variables, mixins and global CSS styles can almost entirely eradicate the need for component-based SCSS/SASS. Or you can use a library like tailwind to easily add semantic global components.
Finsweet Website
Client first
BEM
- BEM link
Tailwind Css
