Best practice for Global classes

Developers
1

We are trying to build a UI kit in bricks builder and I was wondering what would be the best practice for setting up the bricks classes on an element.

For example let’s say that we have a button that has different styling. You would add classes with method 1 or method 2 ?

Method 1:
.primary-button-rounded-dark-minimal
.primary-button-linear-light-modern

Method 2:
.primary-button .rounded .dark .minimal
.primary-button .linear .light .modern

Basically method 1 uses one unique classes, and method 2 uses multiple classes to compose the desired styling.

What are pro and cons of the two methods listed ?

Thanks a lot

2

Use BEM, as opposed to individual utility type classes, otherwise you create a kit where you can’t change the styling for multiple buttons in multiple places at once.

3

Thanks for the answer,

we already use BEM but the problem is that by using it you may end up having different classes for showing the same icon.

Here an example with an icon used in the “team card block” and in the “product card block” with same styling:
.team-card__icon
.product-card_icon

Let’s say I want to use the same icon style, for both block but as I’m using BEM system I need to name them based on the block name, I would end up having multiple classes showing the same thing.

What is your thoughts ?
Thanks

4

Correct me if I am wrong but the sole purpose of using BEM and understanding it correctly is exactly to make you “free” and use just one style for your use case.

So basically if you want to use one specific style of an icon in two separate places you would end up creating one style and using something like (my long initial name is for better understanding) :

.specificnameofyourchoice-card__icon

and then based on your use case you add that by cascading it into the element of your choice.

.team-card .specificnameofyourchoice-card__icon
.product-card .specificnameofyourchoice-card__icon

Block styles are never dependent on other elements on a page, so you will never experience problems from cascading.

If needed later you can change the style of that specific (icon) class and it will stream down across your whole website. That’s the whole point.