Comments on: Building a Scalable CSS Architecture With BEM and Utility Classes https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Sun, 07 Nov 2021 11:35:12 +0000 hourly 1 https://wordpress.org/?v=6.1.1 By: Ben https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/#comment-1785325 Sun, 07 Nov 2021 11:35:12 +0000 https://css-tricks.com/?p=306134#comment-1785325 What is the prerequisite for using this method, I’m assuming one would have to make use of a style guide or have system design in place.

]]> By: Ilya Ratner https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/#comment-1761456 Thu, 13 Aug 2020 16:15:06 +0000 https://css-tricks.com/?p=306134#comment-1761456 I’m starting to go down the bem path, and have been using utility classes for some time. I’m wondering if keeping with the bem double dash modifier convention for utility classes would be a good idea? so for something like .color-attention or .text-lg name the class .–color-attention or .–text-lg

They are essentially modifiers and it would stick to the bem convention. Thoughts?

]]> By: meduz' https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/#comment-1756135 Sun, 26 Apr 2020 21:45:16 +0000 https://css-tricks.com/?p=306134#comment-1756135 Globally a similar approach here: BEM for everything, with a few utility classes here and there (smallest example I can come with is in Can We). For me it’s the best approach to enforce maintainability of both HTML and the CSS.

]]> By: Marko https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/#comment-1756004 Wed, 22 Apr 2020 21:33:18 +0000 https://css-tricks.com/?p=306134#comment-1756004 This is roughly the same conclusion I came to! First I styled stuff using classes and generic tag selectors, you know the usual:

.card p {}

.card a {}

But then if you have another paragraph in that card, these first rules messs it up so you name it .card-text and so on.

After working with Bootstrap for quite some time and then wanting to learn more I came across BEM and started adopting BEM more and more. Unfortunately in the beginning I tried to use BEM as much as possible and would have maybe 5-6 utility classes.

But then later as I gained more experience I realized that BEM doesn’t work for me if I exclusively just rely on it, so I decided to experiment by adding some more utility classes into the mix.

In the end I realized that using BEM for most of the work and using utility classes for some common styling such as typography, spacing, maybe color and few other things allowed me to work more quickly and efficiently, especially when I have to create a new screen in some application. Spacing (padding/margin) utility classes help out a ton here for fast prototyping and establishing consistent layout.

So my go to methodology for some time now has been BEM + utility classes. Although not on this level as the setup you have here with all globals and all that, but I found the setup that works for me.

Unfortunately designers don’t always make everything super consistent and this is one area where utility classes helped me out a ton. I’m sure we all had a situation where a designer just asks you to “remove this margin here” or “this text needs to be highlighted in primary color” and by using utility classes this change is a breeze.

I just love the flexibility this approach gave me.

]]> By: Emanuel https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/#comment-1755995 Wed, 22 Apr 2020 18:20:27 +0000 https://css-tricks.com/?p=306134#comment-1755995 I use a similar methodology: https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

I also prefix every class with its type. For example, c-card and g-radius-lg.
It is benefic for 2 reasons:
1. If someone, that doens’t know the famework, creates a class card, it won’t override your c-card.
2. c-card g-radius-lg g-col-6@sm g-col-4@md -> it is easier to know what’s a component and a global.

]]> By: Zachary Dunn https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/#comment-1755994 Wed, 22 Apr 2020 17:01:55 +0000 https://css-tricks.com/?p=306134#comment-1755994 In reply to Phil.

Same! And I stumbled on this pattern in a similar way as the author, using BEM and getting tired of naming things with the same modifier and then extracting it to a utility class.

]]> By: Mike https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/#comment-1755980 Wed, 22 Apr 2020 07:03:21 +0000 https://css-tricks.com/?p=306134#comment-1755980 I like this approach:

https://www.npmjs.com/package/@michu1234/goel?activeTab=readme

]]> By: Sebastiano Guerriero https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/#comment-1755979 Wed, 22 Apr 2020 06:41:24 +0000 https://css-tricks.com/?p=306134#comment-1755979 In reply to Blallo.

Interesting! I guess you’re using stuff like .foo { @include radius; @include padding-top;} in order to control it all in a separate _mixins.scss file. Even though I’ve never used this approach, I can see many advantages of going down that road. Thanks for sharing

]]> By: Sebastiano Guerriero https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/#comment-1755978 Wed, 22 Apr 2020 06:23:14 +0000 https://css-tricks.com/?p=306134#comment-1755978 In reply to Phil.

Thanks! ABEM is great too

]]> By: Sebastiano Guerriero https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/#comment-1755977 Wed, 22 Apr 2020 06:22:26 +0000 https://css-tricks.com/?p=306134#comment-1755977 In reply to Doug.

Thanks, Doug!

]]> By: Blallo https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/#comment-1755972 Tue, 21 Apr 2020 21:01:06 +0000 https://css-tricks.com/?p=306134#comment-1755972 I tend to use utility mixins because i want to avoid the bootstrap hell to check for tons of classes inside an element, but still mantaining some kind of centralized point of control.
Ok, the final CSS is a little bit heavier (not so much thanks to gzip compression) but i can literally style html without even knowing where it is, in this way.

]]> By: Phil https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/#comment-1755968 Tue, 21 Apr 2020 18:00:21 +0000 https://css-tricks.com/?p=306134#comment-1755968 Nice article, thanks! I’ve been using that methodology for a while now. I mix ABEM and bootstrap 4 utility classes and have found it to be a fairly decent combination :)

]]> By: Doug https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/#comment-1755967 Tue, 21 Apr 2020 17:42:09 +0000 https://css-tricks.com/?p=306134#comment-1755967 I fully support utility classes since I discovered tailwind. I think your assessment of the whats and whys is great. It’s not thought of combining with BEM but it’s and interesting thought.

]]>