Changes to CSS naming standards

[luap42]

First Point

@mattjbrent

Adopting standard BEM

Disagreeing.

This was already proposed by ArtOfCode here:

What style should we use for CSS naming?

Our current CSS naming standards are based on the BEM methodology, but don’t completely stick to it: they dictate using .is-* classes instead of BEM Modifier classes. <div class="button is-icon-only"> <span class="button--icon"> ... </span> </div> On top of that, we have atomic helper classes, which are intended to modify a styling attribute ad-hoc, to make minor changes without needing a completely new component. These are of the form .has-PROPERTY-VALUE, e.g. .has-padding-left-1. Alternat…

And the responses were quite unanimously against using standard BEM. Coincidentally the three likes on Art’s post are by the users who then write dissenting opinions, so we shouldn’t take it as “affirmative votes”.

I’m just linking to my previous arguments to prevent duplication of them, but I am opposing this for multiple reasons:

What style should we use for CSS naming?

I am just repeating a few things I wrote yesterday: It’s shorter. Co-Design has already some long-ish/verbose names. Hence using the shorter prefix .is- is (IMO) better than also adding a possibly long component name. This is also better to prevent lines from growing beyond the character limit, especially, when we also have some atomic classes. There shouldn’t be any confusion. CD does not support giving one HTML element multiple components. This means, that, e.g. no element may be both a bu…

Second Point

@mattjbrent

Removing atomic class modifiers (but keeping atomic classes). IMO these are largely useless.
for eg. has-font-size-5__sm is confusing. Font size should not be this granular in a design. Most defined font size names will have 2 different sizes (at the most 3) based on screen width. These sizes should just be set using media queries on the base atomic class for example:

Mostly agreeing.

I think this is okay, for example there is no (0) use of them in Co-Design for them right now. However, what for example about things like having a border on the top on small and on the right on large screens (for examples a container that is distinguished from others with a border)?

Third Point

@mattjbrent

merging class modifiers and atomic classes. The M in BEM means modifier so that’s confusing. We can just merge all the is-* and has-* into is-*. They should basically be used when blocks or elements use a global style (ie font-size, color, background-color) so on.

Disagreeing.

Modifiers and Atomic Classes are IMO inherently different. Atomic Classes allow you to control one specific design aspect (such as border, color, padding, …), whereas Modifiers allow you to select a kind of “alternative presentation” for an element, which is still 100%-ly under the CSS’s control. Setting the color to red is something different from giving a modal a backdrop. Therefore I think it is also useful to distinguish between the two types.

However I agree, that .is-disabled would be a bad Modifier in general, as it’s idea can and should be represented by semantic HTML attributes. I don’t see, though, where this was proposed (neither in the naming standards, nor in CD), so I would not use this as an example. The same could – BTW – also apply to the .is-hidden class in combination with the [hidden] attribute.

A question

@mattjbrent

This will give us the best flexibility in terms of clear BEM standards and also reducing the amount of duplicated styles that BEM can sometimes create if its used without global element modifiers.

I don’t quite get, what you’re trying to say with the part I highlighted. Which styles are duplicate?