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