Switch to BEM syntax for v2.0 CSS?


#1

The BEM CSS syntax seems like a great methodology for easily showing the relationship of elements within a component. SASS 3.3 added parent selector support directly as well. This seems perfect for Ionic’s component CSS and I’d like to put forth the suggestion to switch to the BEM syntax for the v2.0 CSS.

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



http://mathayward.com/modular-css-with-sass-and-bem/


#2

Hey @Patrick8t. BEM is interesting, but I think in general it’s trying to solve a problem that doesn’t really exist, and in the process creating many more. It’s something machines should write, not humans.

Instead, with v2 we are going all-in with attribute styles. So, to style a button you would write:

<button primary>A Primary Colored Button</button>

instead of

<button class="button button--primary">A primary colored button</button>

I think people will find the property/attribute style much easier to write and much cleaner to read, and we think the world will start seeing a lot more of this approach to HTML and CSS.