New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

What are the reasons for diverging from BEM? #80

Closed
ismay opened this Issue Jun 13, 2014 · 2 comments

Comments

Projects
None yet
2 participants
@ismay

ismay commented Jun 13, 2014

Since the design decisions in suit are all very deliberate, I was wondering what the reasons are for diverging from the BEM syntax (suit's syntax was originally closer to BEM with it's use of underscores for example).

Is it for efficiency reasons, or were there other concerns? I could not find this in the documentation or issues, so I hope that it isn't a problem that I'm asking this.

p.s.: it's not that I prefer one over the other, just wondering why.

@necolas

This comment has been minimized.

Show comment
Hide comment
@necolas

necolas Jun 14, 2014

Member

BEM's original syntax isn't very easy to read at a glance. I changed it a bit. Then MontageJS riffed on that and came up with the PascalCase variant which was even clearer.

"Standard BEM" is also a poor choice for migrations (such as is taking place at Twitter), because menu is going to collide with the legacy menu code that has no isolated structure to it. Whereas the name Menu won't, and it maps more obviously with associated JS functions and View code. It's also easier to write tools that check for conformance when the naming convention doesn't sometimes result in class names that are indistinguishable from those used in non-modular code.

For example, if you were using React to build your UI, you have JS component names that map directly with the names of the CSS convention. Every name is of the form "MyComponent".

Hope that answers your question.

Member

necolas commented Jun 14, 2014

BEM's original syntax isn't very easy to read at a glance. I changed it a bit. Then MontageJS riffed on that and came up with the PascalCase variant which was even clearer.

"Standard BEM" is also a poor choice for migrations (such as is taking place at Twitter), because menu is going to collide with the legacy menu code that has no isolated structure to it. Whereas the name Menu won't, and it maps more obviously with associated JS functions and View code. It's also easier to write tools that check for conformance when the naming convention doesn't sometimes result in class names that are indistinguishable from those used in non-modular code.

For example, if you were using React to build your UI, you have JS component names that map directly with the names of the CSS convention. Every name is of the form "MyComponent".

Hope that answers your question.

@necolas necolas closed this Jun 14, 2014

@ismay

This comment has been minimized.

Show comment
Hide comment
@ismay

ismay Jun 15, 2014

Hope that answers your question.

It does, thank you!

ismay commented Jun 15, 2014

Hope that answers your question.

It does, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment