[Improvement] use BEM in a proper way and make plyr CSS more modular.

[wujekbogdan]

Hey,

It's great that you try to use the BEM methodology in your CSS. But your CSS is not fully compatible with BEM. You use BEM syntax (-- for modifiers and __ for elements) which is good, but there is a lot of nested selectors which is against BEM rules.

For example:

.plyr__controls {
    display: flex;
    align-items: center;
    line-height: 1;
    text-align: center;

    // Spacing
    > button,
    .plyr__progress {
    // ... code
   }
}

This it not a valid BEM syntax.

Because of this sometimes overwriting your styles is problematic - one have to deal with specificity issues.

Istead of nesting you should break your styles into smaller modules. Here's a great article on how to deal with common BEM problems: https://medium.com/fed-or-dead/battling-bem-5-common-problems-and-how-to-avoid-them-5bbd23dee319

[sampotts]

Thanks. I'll take a look. 👍

[sampotts]

Feel free to raise a PR with your suggested amends btw 👍

[wujekbogdan]

Are you OK with breaking backwards compatibility?

[sampotts]

I'm working on a new major version of the plugin in the develop branch which has breaking changes anyway. Really it'd just be so I can see where I'm going wrong. I was just under the impression that every element didn't need to necessarily extend it's parents classname if it was standalone. e.g. a button within controls...

[thasmo]

I guess @wujekbogdan is mainly referring to the nesting. The reason for using BEM is to have the advantage to not nest elements.

.plyr__controls {
    display: flex;
    align-items: center;
    line-height: 1;
    text-align: center;
}
.plyr__progress {
    // code
}

[sampotts]

As I say, totally open to suggestions and PR's on how we actually fix it 👍

[sampotts]

Can anyone take a look at the latest revision to see if it's any better? And if not maybe suggest improvements?