-
-
Save felipescalice/6255231 to your computer and use it in GitHub Desktop.
Revisions
-
csswizardry revised this gist
Oct 3, 2012 . 1 changed file with 10 additions and 10 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -27,21 +27,21 @@ BEM would also enforce stricter use of classes. A lot of times (and I have seen Another benefit I can see is the combatting of the following situation. If we take the media object again: <div class=media> <img src=logo.png alt="Foo Corp logo" class=img-rev> <div class=body> <h3 class=alpha>Welcome to Foo Corp</h3> <p class=lede>Foo Corp is the best, seriously!</p> </div> </div> How are the classes `.media` and `.alpha` related to each other? Are they? What about `.body` and `.lede` or `.img-rev` and `.media`? From that HTML (unless we’re very familiar with the media object) we have no idea what makes up that component and what else is optional. If we were to rework it with BEM: <div class=media> <img src=logo.png alt="Foo Corp logo" class=media__img--rev> <div class=media__body> <h3 class=alpha>Welcome to Foo Corp</h3> <p class=lede>Foo Corp is the best, seriously!</p> </div> </div> -
Oct 3, 2012 . 1 changed file with 10 additions and 10 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -27,21 +27,21 @@ BEM would also enforce stricter use of classes. A lot of times (and I have seen Another benefit I can see is the combatting of the following situation. If we take the media object again: <div class=**media**> <img src=logo.png alt="Foo Corp logo" class=**img-rev**> <div class=**body**> <h3 class=**alpha**>Welcome to Foo Corp</h3> <p class=**lede**>Foo Corp is the best, seriously!</p> </div> </div> How are the classes `.media` and `.alpha` related to each other? Are they? What about `.body` and `.lede` or `.img-rev` and `.media`? From that HTML (unless we’re very familiar with the media object) we have no idea what makes up that component and what else is optional. If we were to rework it with BEM: <div class=**media**> <img src=logo.png alt="Foo Corp logo" class=**media__img--rev**> <div class=**media__body**> <h3 class=**alpha**>Welcome to Foo Corp</h3> <p class=**lede**>Foo Corp is the best, seriously!</p> </div> </div> -
Oct 3, 2012 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -35,7 +35,7 @@ Another benefit I can see is the combatting of the following situation. If we ta </div> </div> How are the classes `.media` and `.alpha` related to each other? Are they? What about `.body` and `.lede` or `.img-rev` and `.media`? From that HTML (unless we’re very familiar with the media object) we have no idea what makes up that component and what else is optional. If we were to rework it with BEM: <div class=media> <img src=logo.png alt="Foo Corp logo" class=media__img--rev> -
Oct 2, 2012 . 1 changed file with 3 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -53,4 +53,6 @@ inuit.css is a powerful framework. It’s not a framework that’ll give you som BEM allows us to namespace our styles for stricter and appropriate implementations, it allows us to work out HTML’s relationship to itself (or if there is no relationship at all), it allows us to see what role a piece of HTML plays in a wider picture. inuit.css was designed to be scalable and used on larger projects with larger teams and I believe, although unsightly at first, BEM will massively help that. I think the odd looking syntax (and my open hatred of underscores) is a fair price to pay for the value BEM notation would give us… Thoughts? [Comment on this post on GitHub.](https://gist.github.com/3822990) -
Oct 2, 2012 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,56 @@ # Bringing BEM to inuit.css <abbr title="Block, Element, Modifier">BEM</abbr> is a methodology for naming and classifying CSS selectors in a way to make them a lot more strict, transparent and informative. The naming convention follows this pattern: .block{} .block__element{} .block--modifier{} * `.block` represents the higher level of an abstraction or component. * `.block__element` represents a descendent of `.block` that helps form `.block` as a whole. * `.block--modifier` represents a different state or version of `.block`. If you are familiar with OOCSS then you will no doubt be familiar with [the media object](https://github.com/csswizardry/inuit.css/blob/master/inuit.css/partials/objects/_media.scss). In BEM form, the media object would now read: .media{} .media__img{} .media__img--rev{} .media__body{} From the way this CSS is written we can already glean that `.media__img` and `.media__body` must live inside `.media` and that `.media__img--rev` is a slight variation on `.media__img`. All that information gathered from CSS selectors alone! This is a powerful feature. This is what inuit.css is about. BEM would also enforce stricter use of classes. A lot of times (and I have seen it) developers will use a class in their HTML because the styling applied to that class simply happens to work in a certain context. It shouldn’t be used in that context, but by pure coincidence it just works. This means that—if the styles on the class they used ever change—it may have negative ramifications in their implementation that they might not be able to explain or understand. By namespacing things (e.g. `.media__img` rather than `.img`) then developers are a lot less likely to use classes in the wrong place. BEM will enforce much stricter limitations. Another benefit I can see is the combatting of the following situation. If we take the media object again: <div class=media> <img src=logo.png alt="Foo Corp logo" class=img-rev> <div class=body> <h3 class=alpha>Welcome to Foo Corp</h3> <p class=lede>Foo Corp is the best, seriously!</p> </div> </div> How are the classes `.media` and `.alpha` related to each other? Are they? What about `.body` and `.lede` or `.img` and `.media`? From that HTML (unless we’re very familiar with the media object) we have no idea what makes up that component and what else is optional. If we were to rework it with BEM: <div class=media> <img src=logo.png alt="Foo Corp logo" class=media__img--rev> <div class=media__body> <h3 class=alpha>Welcome to Foo Corp</h3> <p class=lede>Foo Corp is the best, seriously!</p> </div> </div> We can now instantly see that `.media` is the block, `.media__img--rev` is an element of `.media` that has a modifier applied and `.media__body` is an unmodified element of `.media`. All through the names of their classes. That is **incredibly** useful. BEM may look a little funny, and it might require more typing (most text editors have autocomplete, and gzip will negate any differences in filesize) but it is _so_ powerful, and inuit.css is all about power… inuit.css is a powerful framework. It’s not a framework that’ll give you some nice glossy buttons; it’s a framework that will allow you to scale a 1,000+ page website, it’s an object oriented framework designed for use on big projects with big teams. One of the things I spoke about most recently was handling CSS in larger teams and I believe BEM is a great step in that direction. BEM allows us to namespace our styles for stricter and appropriate implementations, it allows us to work out HTML’s relationship to itself (or if there is no relationship at all), it allows us to see what role a piece of HTML plays in a wider picture. inuit.css was designed to be scalable and used on larger projects with larger teams and I believe, although unsightly at first, BEM will massively help that. I think the odd looking syntax (and my open hatred of underscores) is a fair price to pay for the value BEM notation would give us… Thoughts?