Introduce frontend application structure guide

monterail / guidelines

[DEPRECATED] We are Ruby on Rails experts from Poland. Think hussars. Solid & winged. These are our guidelines.

71 stars 17 forks source link

Introduce frontend application structure guide #231

Closed tommy92 closed 5 years ago

tommy92 commented 9 years ago

MichalZalecki commented 9 years ago

IMO title is misleading. frontend application structure is more connected to front-end frameworks/architecture. This is not a BEM .page__login .login-form. The separate file is ok, but it should be .login-form--highlighted (yellow with red border).

venticco commented 9 years ago

@MichalZalecki I agree on name - should be frontend stylesheets structure. I think that proposed class name conventions are compatible with BEM. Could you point what exactly is not correct?

MichalZalecki commented 9 years ago

The point of BEM is to stop nesting. It leads to this: https://twitter.com/csswizardry/status/601693152701976576

.nav .nav__listItem .btn--orange {
  background-color: green;
}

That looks like it has parts of BEM going on, but it's not BEM. It has nested selectors, and the modifier doesn't even accurately describe what's going on. If we did this, we'd be screwing up the specificity flatness that is so helpful with BEM.

https://css-tricks.com/bem-101