├── LICENSE └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Stuart Robson 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # BEM Resources [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) 2 | 3 | Everyone loves a bit of BEM in their development. Here's just the starts of hopefully a large list of resources. 4 | 5 | ## Articles 6 | 7 | - [A CSS Guideline Tutorial: BEM with Sass](https://assist-software.net/blog/css-guideline-tutorial-bem-sass) 8 | - [BEMantic - DRY like you mean it](https://medium.com/@stowball/bemantic-dry-like-you-mean-it-133ea3843d98#.a2ivj7ny9) 9 | - [BEM & Atomic Design: A CSS Architecture Worth Loving](https://www.lullabot.com/articles/bem-atomic-design-a-css-architecture-worth-loving) 10 | - [Battling BEM (Extended Edition): 10 Common Problems And How To Avoid Them](https://www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/) 11 | - [BEM and SMACSS: Advice From Developers Who’ve Been There](http://www.sitepoint.com/bem-smacss-advice-from-developers/) 12 | - [MindBEMding – getting your head ’round BEM syntax - CSS Wizardry](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) 13 | - [A New Front-End Methodology: BEM - Smashing Magazine](https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/) 14 | - [BEM 101 - CSS Tricks](https://css-tricks.com/bem-101/) 15 | - [An Introduction to the BEM Methodology - Tuts Plus](http://webdesign.tutsplus.com/articles/an-introduction-to-the-bem-methodology--cms-19403) 16 | - [Scaling Down The BEM Methodology For Small Projects - Smashing Magazine](https://www.smashingmagazine.com/2014/07/bem-methodology-for-small-projects/) 17 | - [Fifty Shades of BEM - Kaelig](http://blog.kaelig.fr/post/48196348743/fifty-shades-of-bem) 18 | - [Keeping the Front-End Modular with BEM - Thoughtbot](https://robots.thoughtbot.com/keeping-the-frontend-modular-with-bem) 19 | - [The Evolution Of The BEM Methodology - Smashing Magazine](https://www.smashingmagazine.com/2013/02/the-history-of-the-bem-methodology/) 20 | - [BEM Basics - 8th Light](http://blog.8thlight.com/nelsol-batalla/2014/08/01/bem-basics.html) 21 | - [How To BEM - Roman Kuba](https://medium.com/@Codebryo/how-to-bem-4a55fa3cd429) 22 | - [Expressive BEM with Sass: a different approach - Anders Hansen](http://codepen.io/andersschmidt/post/expressive-bem-with-sass-a-different-approach) 23 | - [Expressive BEM with Sass Part II: A first draft of mixins - Anders Hansen](http://codepen.io/andersschmidt/post/expressive-bem-with-sass-part-ii-a-first-draft-of-mixins) 24 | - [Learning to love BEM](http://mono.company/journal/frontend/learning-to-love-bem//) 25 | - [Working with BEM at Scale — Advice From Top Developers](http://www.sitepoint.com/working-bem-scale-advice-top-developers/) 26 | - [CSS Architecture: BEMCSS — Block, Element & Modifier](https://medium.com/@mjtweaver/css-architecture-bemcss-block-element-modifier-e642bd0f4218) 27 | - [BEM Guidelines for component focused development](http://www.joelambert.co.uk/article/bem-guidelines/) 28 | - [BEMIT: Taking the BEM Naming Convention a Step Further](http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/) 29 | - [CSS BEM Syntax Basics](https://coryrylan.com/blog/css-bem-syntax-basics) 30 | - [BEM official naming convention](https://en.bem.info/method/naming-convention/) 31 | - [BEM for CSS - An Introduction](http://www.gapintelligence.com/blog/2015/bem-for-css-an-introduction) 32 | - [Getting Started With BEM (with a little help from Sass)](https://www.packtpub.com/books/content/getting-started-bem-little-help-sass/) 33 | - [BEM (Block element modifier) - CSS Methodologies Part 3](http://techblog.buyapowa.com/css/frontend/scss/sass/2015/10/07/css-methodologies-part-3.html) 34 | - [How I stopped worrying and learned to love the CSS with BEM](http://www.theodo.fr/blog/2015/10/how-i-stopped-worrying-and-learned-to-love-the-css-with-bem/) 35 | - [BEM CSS Basics for WordPress Themes Developers](https://ahmadawais.com/bem-css-basics-for-wordpress-themes-developers/) 36 | - [Generate responsive BEMIT classes with Sass](http://codepen.io/craigmdennis/post/generate-responsive-bemit-classes-with-sass) 37 | - [The BEMIT naming convention](http://www.jamesturneronline.net/beautifulweb/bemit-naming-convention.html) 38 | - [BEM by example](https://sparkbox.com/foundry/bem_by_example) 39 | - [Introducing BEM: The popular CSS naming convention](https://assortment.io/posts/introducing-bem-css-naming-convention) 40 | - [7 Reasons To Use BEM CSS](https://medium.com/soliddigital/7-reasons-to-use-bem-css-a7c8475318fe) 41 | 42 | ## Resources 43 | 44 | - [BEM Official Website](https://en.bem.info/) 45 | - [Get BEM](http://getbem.com/introduction/) 46 | - [BEM Cheat Sheet](https://gist.github.com/ingdir/0b211b9253c376f9cfa5) 47 | 48 | ## With Pre-processors 49 | 50 | - [Generating BEM selectors with CSS preprocessors - Frontend Babel](http://frontendbabel.info/articles/bem-with-css-preprocessors/) 51 | 52 | ### Sass 53 | 54 | - [Even Easier BEM-ing with Sass 3.3 - alwaystwisted](http://alwaystwisted.com/articles/2014-02-27-even-easier-bem-ing-with-sass-33) 55 | - [BEM Mixins - CSS Tricks](https://css-tricks.com/snippets/sass/bem-mixins/) 56 | 57 | ### Stylus 58 | 59 | - [Stylus and BEM: a quick mixin - Frank M Taylor](http://blog.frankmtaylor.com/2014/07/16/stylus-and-bem-a-quick-mixin/) 60 | 61 | ### PostCSS 62 | 63 | - [PostCSS BEM Linter](https://github.com/postcss/postcss-bem-linter) 64 | 65 | ## Repos, CodePens and Things 66 | 67 | ### Repos 68 | 69 | - [BEM Constructor](https://github.com/danielguillan/bem-constructor) 70 | - [WordPress BEM Menu](https://github.com/roikles/Wordpress-Bem-Menu) 71 | - [BEM Grid](https://github.com/bem-incubator/bem-grid) 72 | - [Flexible Grid System with BEM](https://github.com/flexiblegs/flexiblegs-bem) 73 | - [BEM.js](https://github.com/maykinmedia/bem.js) 74 | 75 | ## Slides & Videos 76 | 77 | ### Slides 78 | 79 | - [BEM CSS Workshop - Varya Stepanova](http://varya.me/bem-css-workshop/) 80 | - [BEM - Luciano Battagliero](https://speakerdeck.com/battaglr/bem) 81 | 82 | ### Videos 83 | 84 | - [Writing Modular CSS With Sass and BEM - Tuts Plus](https://www.youtube.com/watch?v=WH4U4K5W8N8) 85 | - [MindBEMding – Rethink Web Development - Kevin Mack](https://www.youtube.com/watch?v=vgg-NsKZaE4) 86 | 87 | ### Other Awesome Lists 88 | 89 | - [A curated list of awesome lists - @sindresorhus](https://github.com/sindresorhus/awesome) 90 | --------------------------------------------------------------------------------