{"_id":"b-e-m","_rev":"4-0c4b4f3cd232f32f14901260a6494f66","name":"b-e-m","description":"Typographically pleasing syntax for BEM","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"b-e-m","version":"1.0.0","description":"Typographically pleasing syntax for BEM","main":"index.js","scripts":{"test":"mocha --reporter spec"},"keywords":["bem","css","sass","preprocessor","parody"],"author":{"name":"Frederic Marx","email":"marx.frederic@gmail.com"},"license":"MIT","devDependencies":{"mocha":"^2.2.5"},"directories":{"test":"test"},"dependencies":{},"repository":{"type":"git","url":"https://github.com/fredericmarx/b-e-m.git"},"bugs":{"url":"https://github.com/fredericmarx/b-e-m/issues"},"homepage":"https://github.com/fredericmarx/b-e-m","gitHead":"710c9443a93a1f0079c6febb72bcf47fa4318417","_id":"b-e-m@1.0.0","_shasum":"1cacef5b0b656bb59a9a81615efda55a66c3b4b6","_from":".","_npmVersion":"2.7.3","_nodeVersion":"0.12.1","_npmUser":{"name":"fredericmarx","email":"hi@fmarx.com"},"dist":{"shasum":"1cacef5b0b656bb59a9a81615efda55a66c3b4b6","tarball":"https://registry.npmjs.org/b-e-m/-/b-e-m-1.0.0.tgz","integrity":"sha512-g3qTe80mw3hhNnpEt0KDiAQWBHa8HPDq9FMdLtAR4Qn5btKalMMS25mEh60SXUXDdadX9ug3T5uKFhyFgxC7aw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjmIxktpm9ItOfyegLPeHIndn0Gx7Wo7u8RztnGw3v1QIgD+BSccOZS5Rb+dYaOEQon4aHL109XxVd/VM2NX5l39I="}]},"maintainers":[{"name":"fredericmarx","email":"hi@fmarx.com"}]},"1.0.1":{"name":"b-e-m","version":"1.0.1","description":"Typographically pleasing syntax for BEM","main":"index.js","scripts":{"test":"mocha --reporter spec"},"keywords":["bem","css","sass","preprocessor","parody"],"author":{"name":"Frederic Marx","email":"marx.frederic@gmail.com"},"license":"MIT","devDependencies":{"mocha":"^2.2.5"},"directories":{"test":"test"},"dependencies":{},"repository":{"type":"git","url":"https://github.com/fredericmarx/b-e-m.git"},"bugs":{"url":"https://github.com/fredericmarx/b-e-m/issues"},"homepage":"https://github.com/fredericmarx/b-e-m","gitHead":"3eb9e13baaea8a9c90f3f15d77934e454379a950","_id":"b-e-m@1.0.1","_shasum":"3d9c41373be18806ce31474f4cd08e73bcf05fa3","_from":".","_npmVersion":"2.7.3","_nodeVersion":"0.12.1","_npmUser":{"name":"fredericmarx","email":"hi@fmarx.com"},"dist":{"shasum":"3d9c41373be18806ce31474f4cd08e73bcf05fa3","tarball":"https://registry.npmjs.org/b-e-m/-/b-e-m-1.0.1.tgz","integrity":"sha512-PsLfcwdkCkWF2tXuRqIgzqT+t3wgz9EZ32yG0yMGGh9QfyCewyre3+vO5b6YigDp/Oq6JVdvUHQqgDtP9hcWiw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG+hyIMQVkVgwZ6Wma2E8LUjuTvrjPO7CMpafy56GcyYAiEAnzkLUltDiY2iTtuWqUTWw34gu+VsvhNB4XZP4R0zy/k="}]},"maintainers":[{"name":"fredericmarx","email":"hi@fmarx.com"}]}},"readme":"# B-E-M\n**Typographically pleasing syntax for BEM**\n\n## Basic education manual\n\nIn case you haven't heard about it, [BEM](https://en.bem.info/) is the CSS structuring methodology du jour according to [thought-leaders](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) [in](http://www.smashingmagazine.com/2012/04/16/a-new-front-end-methodology-bem/) [front-end](http://webdesign.tutsplus.com/articles/an-introduction-to-the-bem-methodology–cms-19403) [architecture](https://css-tricks.com/bem-101/).\n\n```\n/* Block component */\n.article {}\n\n/* Element that depends upon the block */ \n.article—header {}\n\n/* Modifier that changes the style of the block */\n.article--new {} \n\n/* Modifier that changes the style of the element */\n.article__header--large {}\n```\n\nBEM is straightforward, scalable and easy to parse for both humans and grep alike.\n\nUnfortunately it has one major flaw, and until that hasn't been solved, we won't possibly be able to use this promising technique in production.\n\n## Double underscores got me like\n\nIt just doesn't look that nice.\n\nEverybody knows that the success of a coding convention depends hugely on how elegant the syntax looks. I mean, look at arrow functions. Why can't we have some of those in CSS?\n\nAny self-respecting web-designer will tell you that writing code which doesn't conform with their personal aesthetic preferences is simply not an option.\n\n## No mountain too high for overengineering\n\nThere are already fairly successful attempts at solving this problem with preprocessors like Sass. By abstracting those conventions into tidy mixins we will hopefully never have to see them again. Who reads compiled code anyways?\n\nStill this doesn't save us from using these class names in our HTML. That's why I built this simple node module that you can easily add to your build chain.\n\n## A dashing solution\n\nTo stop the eyesore caused by duplicate punctuation characters, the B-E-M convention replaces the double underscores and hyphens of BEM with a single em dash (—) or en dash (–) respectively.\n\nOur example from above in B-E-M syntax would look as follows:\n\n```\n/* Block component */\n.article {}\n\n/* Element that depends upon the block */ \n.article—header {}\n\n/* Modifier that changes the style of the block */\n.article–new {} \n\n/* Modifier that changes the style of the element */\n.article—header–large {}\n```\n\nNotice how the code looks much cleaner now.\n\n## How to use\n\nSimply install the package with `npm i --save-dev b-e-m`.\n\nThen use the module in your project.\n\n```\nvar bEM = require('b-e-m');\n\n// .article__header--large {}\nconsole.log(bEM('.article—header–large {}'));\n```\n\n## How to contribute\nPlease don't.\n","maintainers":[{"name":"fredericmarx","email":"hi@fmarx.com"}],"time":{"modified":"2022-06-13T03:59:04.008Z","created":"2015-06-01T02:08:58.601Z","1.0.0":"2015-06-01T02:08:58.601Z","1.0.1":"2015-06-01T02:24:21.183Z"},"homepage":"https://github.com/fredericmarx/b-e-m","keywords":["bem","css","sass","preprocessor","parody"],"repository":{"type":"git","url":"https://github.com/fredericmarx/b-e-m.git"},"author":{"name":"Frederic Marx","email":"marx.frederic@gmail.com"},"bugs":{"url":"https://github.com/fredericmarx/b-e-m/issues"},"license":"MIT","readmeFilename":"README.md"}