Fix styling issues in Safari

[ebidel]

R: @paulirish @patrickhulce @brendankenny

This changes all the rating classes to have a single - prefix.

--poor is not a valid CSS class. See apache/incubator-pagespeed-ngx#993.

Safari before:

After:

[patrickhulce]

haven't really used BEM in practice, why isn't it concatenated? like .block__score--poor

[brendankenny]

it'll cause more verbose css (we need two classes on there for base styling for section-result__score and section-result__points), but it does feel like if we're going to do BEM we shouldn't do mostly BEM by having only one hyphen...

[patrickhulce]

seems like a broken naming convention if it isn't even valid CSS...

[brendankenny]

I believe the "proper" BEM thing is to have them concatenated, somebody just did .section-result__score.--good as a shortcut for something like .section-result__score.section-result__score--good

[brendankenny]

IANABEOECU (I Am Not A BEM Expert Or Even Casual User)

[ebidel]

This is a prime example of why I dislike BEM. Generic .poor/.good/.average classes that apply everywhere would DRY up our CSS (9 occurrences of duplicate styling).

What do you guys think about going that route?

[brendankenny]

sounds perfect to me, but, again, you could tell me that was valid BEM and I would believe you, so I may not be the best person to ask :)

[brendankenny]

I guess there is still validity in going all in on BEM or abandoning it completely.

@paulirish cause he has actual opinions on CSS and stuff

[ebidel]

BEM is a convention, but that doesn't mean you have to BEM all the things. There are valid places to use the cascading an reusability features of CSS 💯

[patrickhulce]

This is a prime example of why I dislike BEM. Generic .poor/.good/.average classes that apply everywhere would DRY up our CSS (9 occurrences of duplicate styling). What do you guys think about going that route?

+1
For my own edification would the "BEM approach" to reuse be something like applying a block level poor/good/average mod rule? Or is there no DRY way to achieve this with BEM convention?

[paulirish]

me too on IANABEOECU. :)

i'm fine with whatever in the CSS, tbh. It doesn't stress me out.

[ebidel]

PTAL

[brendankenny]

LGTM 🎨