Skip to main content

Modern alternatives to BEM

When I first heard Nicole Sullivan talk about OOCSS, I thought “Oooh, smart.” When I read Jonathan Snook’s riff on that idea in SMACSS I thought “Oooh, smart.” When I heard Harry Roberts say “never use IDs in your CSS files” I said “Oooh, smart.” But when BEM and roboclasses came around… I didn’t have the same reaction. I never felt attracted to these tools even though thousands of developers had success with them. I’m not sure why I never jumped in, but I’m sure verbosity and/or tooling fatigue played a part. Ultimately, I ended up settling on my own SMACSS/BEM hybrid that’s more of a .block–variant .generic {} pattern with some global utilities mixed in. I’m not anti-BEM nor anti-roboclasses, but as we enter a new era for CSS I think we have an opportunity to rethink best practices around architecting CSS. Before we get lost rethinking the wheel, let’s hold on to some good principles from the past decade or so: We want to author in components We generally want low-specificity to avoid collisions We want a bucket (sometimes a very large bucket) of global utility classes or variables for ad-hoc composition or customizations With those principles, let’s dive into some CSS architecture alternatives. CUBE When Andy Bell introduced CUBE, I instantly gravitated to it. CUBE is basically the style of CSS I write but with a little more structure and language around it. – Composition – Utilities – Block – Exception One nice thing about CUBE is that it’s less prescriptive about how you author “blocks” (read: components). You could totally use BEM inside that zone if you wanted. I like how CUBE embraces the cascade, utilities, components, and one-off exceptions that always drag a codebase down over time. CUBE has a “real world” quality to understanding how CSS degrades over time. HECS Let’s go all-in on the components angle. Did you know the web platform has a native built-in to control style collisions!?! In Web Components you get component-level scoping right out of the gate with Shadow DOM and you may find yourself writing CSS like it’s the year 2000 again! :host element .class:state { } /* the `:host` part is really just here for the acronym */ Be as specific as you want, because the CSS never escapes the :host component. If the whole reason you were writing BEM or preprocessing with some other scoping mechanism was to avoid specificity collisions, the Shadow DOM eliminates that need. The tradeoff here is Web Components eject from the cascade. That means no global utility classes unless you import or adopt them into your component. CSS variables operate in a strange land of inheritable styles that do pass through the Shadow DOM, but not all Web Components support CSS variables, so your ability to control style gets limited by the components you use or the amount of Light DOM in your components. If you want to learn more about isolated styling in the Shadow DOM, check out my Web Components course on Frontend Masters. WILS If your goal is to reduce specificity, new native CSS tools make reducing specificity a lot easier. You can author your CSS with near-zero specificity and even control the order in which your rules cascade. – :where() # Zero specificity – :is() # Specificity is highest selector in group – @layer # Control order styles apply – @scope # Control when styles stop and start applying The new’ish :where() and :is() selectors give us some incredible de-specifying tools.  » Read More

Like to keep reading?

This article first appeared on If you'd like to continue this story, follow the white rabbit.

View Full Article
Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

Laravel Vs Symfony: Answering All The Questions To Make a Better Choice

How to Channel a Daily Vision into a 20-Year Photography Career

How to Channel a Daily Vision into a 20-Year Photography Career

#Silicon Valley
WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

WordPress Punts Locally Hosted Fonts for Legacy Default Themes to 6.2 Release

#Web Design
Fresh For Designers

Is the Dynamic Island plain stupid or the next revolutionary UX pattern?


Let's talk about Web Design

The term "web design" describes the layout of websites that are seen online. Instead of software development, it typically refers to the user experience components of website development. The primary focus of web design used to be creating websites for desktop browsers, but from the middle of the 2010s, designing for mobile and tablet browsers has gained significance.

What is a webdesigner?

A web designer is responsible for a website's look, feel, and occasionally even content. For instance, appearance refers to the colors, text, and images utilized. Information's organization and categorization are referred to as its layout. An effective web design is user-friendly, aesthetically pleasing, and appropriate for the target audience and brand of the website. Many websites focus on keeping things simple so that viewers won't be distracted or confused by additional information and functionality. Removing as many potential sources of user annoyance as possible is a crucial factor to take into account because the foundation of a web designer's output is a site that gains and nurtures the trust of the target audience.

Responsive and adaptive design are two of the most popular techniques for creating websites that function well on both desktop and mobile devices. In adaptive design, the website content is fixed in layout sizes that correspond to typical screen sizes, while in responsive design, information moves dynamically based on screen size. A layout that is as consistent as possible across devices is essential to preserving user engagement and trust. Designers must be cautious when giving up control of how their work will appear because responsive design can be challenging in this area. While they might need to diversify their skill set if they are also in charge of the content, they will benefit from having complete control over the final output.

What does a web design worker do?

A web designer is a member of the IT industry who is in charge of planning a website's structure, aesthetic appeal, and usability.

A skilled site designer must possess both technical know-how and creative graphic design abilities. They must be able to envision how a website will seem (its graphical design) and how it will operate (conversion of a design into a working website).

The terms web developer and designer are frequently used interchangeably but erroneously. In order to construct more complex interactions on a website, such as the integration with a database system, a web developer is frequently more likely to be a software developer who works with programming languages.