.content {\/* Styles *\/}\r\n.menu {\/* Styles *\/}\r\n.search {\/* Styles *\/}<\/code><\/pre>\nELEMENT<\/h4>\n
An element is a component within the block that performs a particular function. It should only make sense in the context of its block:<\/p>\n
\n- a content article<\/li>\n
- a menu item<\/li>\n
- a search input field<\/li>\n<\/ul>\n
.content__article {\/* Styles *\/}\r\n.menu__item {\/* Styles *\/}\r\n.search__input {\/* Styles *\/}<\/code><\/pre>\nMODIFIER<\/h4>\n
A modifier is how we represent the variations of a block. If you\u2019ve ever used Bootstrap, then the best example would be the button sizes. Button sizes are just size variations of the button itself, which makes it the modifier:<\/p>\n
\n- a content featured article<\/li>\n
- a menu link<\/li>\n
- a search field with or without icon<\/li>\n<\/ul>\n
.content__article--featured {\/* Styles *\/}\r\n.menu__item--link {\/* Styles *\/}\r\n.search__input--icon {\/* Styles *\/}<\/code><\/pre>\nNAMING CONVENTIONS<\/h4>\n
The primary purpose of BEM methodology is to make names of CSS selectors as informative and transparent as possible. Original BEM style is defined in this way:<\/p>\n
Block<\/strong> name is usually a single word like .header<\/code>, but if you have longer block definition then it is divided with a single hyphen -<\/code>:<\/p>\n.lang-switcher {\/* Styles *\/}<\/code><\/pre>\nElement<\/strong> name starts with double underscore __<\/code>:<\/p>\n.lang-switcher__flag {\/* Styles *\/}<\/code><\/pre>\nModifier<\/strong> name starts with single underscore __<\/code>:<\/p>\n.lang-switcher__flag_basic {\/* Styles *\/}<\/code><\/pre>\nThere is only one very critical rule in BEM methodology – a modifier cannot be used outside of the context of its owner.<\/p>\n
Example:<\/strong><\/p>\n.btn_big {\/* Styles *\/}<\/code><\/pre>\nYou can use btn_big only if header is defined also.<\/p>\n
Bad example:<\/strong><\/p>\n <div class=\u201dbtn_big\u201d>...<\/div> <\/code><\/pre>\nGood example:<\/strong><\/p>\n <div class=\u201dbtn btn_big\u201d>...<\/div> <\/code><\/pre>\nBeside these original BEM styles, there are alternative naming schemes like Harry Roberts and CamelCase styles.<\/p>\n
Harry Roberts style example:<\/strong><\/p>\n.BlockName__ElementName_ModifierName {\/* Styles *\/}<\/code><\/pre>\nThere are few others too, but these two are the most common ones. Personally, I am a fan of the naming convention proposed by Harris Roberts, which has the following rules:<\/p>\n
\n- Names are written in lowercase<\/li>\n
- Words within the names of BEM entities are separated by a hyphen
-<\/code><\/li>\n- An element name is separated from a block name by a double underscore
__<\/code><\/li>\n- Boolean modifiers are delimited by double hyphens
--<\/code><\/li>\n- Key-value type modifiers are not used<\/li>\n<\/ul>\n
The reason why this naming convention is much better formed than others is that you can easily distinguish modifier element from others. In original naming conventions, modifier would be defined like this:<\/p>\n
.block__element_modifier {\/* Styles *\/} <\/code><\/pre>\nBut as you can see, there is not very much difference between a single and double underscore. On the other hand, double hyphen provides clean separation, and you can see the modifier instantly:<\/p>\n
.block__element--modifier {\/* Styles *\/}<\/code><\/pre>\nBEM EXAMPLE IN DIFFERENT FORMATS<\/h4>\n
Please note that besides CSS, BEM is also very useful in organizing your JSON, XML, tree files, or any format supports nesting. Think of BEM methodology as a good way to build your UI.<\/p>\n
HTML structured in BEM format<\/strong><\/p>\nLet\u2019s consider the following HTML, structured in BEM format:<\/p>\n
<header class=\u201dheader\u201d>\r\n <img class=\u201dheader__logo\u201d>\r\n <form class=\u201dheader__search-from\u201d>\r\n <input class=\u201dheader__search-from__input\u201d type=\u201dinput\u201d>\r\n <button class=\u201dheader__search-from__button\u201d type=\u201dbutton\u201d>\r\n <\/form>\r\n <div class=\u201dheader__lang-switcher\u201d><\/div>\r\n<\/header>\r\n<\/code><\/pre>\nThe same can be achieved using JSON and XML format.<\/p>\n
XML:<\/strong><\/p>\n<block:header>\r\n <block:logo\/>\r\n <block:search-from>\r\n <block:input\/>\r\n <block:button\/>\r\n <\/block>\r\n <block:lang-switcher\/>\r\n<\/block><\/code><\/pre>\nJSON:<\/strong><\/p>\n{\r\n block: \u2018header\u2019,\r\n content: [\r\n { block: \u2018logo\u2019 },\r\n {\r\n block: \u2018search-form\u2019,\r\n content: [\r\n { block: \u2018input\u2019 },\r\n { block: \u2018button\u2019 }\r\n ]\r\n },\r\n { block: \u2018lang-switcher\u2019 }\r\n ]\r\n}<\/code><\/pre>\nFILE SYSTEM ORGANIZATION OF A BEM PROJECT<\/h4>\n
In BEM, it is critical to organize your files in a correct manner. Not only is BEM providing you a great organization of CSS classes and making them completely understandable, but also gives you a very maintainable file structure. Let\u2019s take an example project, using BEM file organization technique with SASS files:<\/p>\n
blocks\/\r\n input\/\r\n __box\/\r\n --big\/\r\n input__box--big.scss\r\n input__box.scss\r\n button\/\r\n --big\/\r\n button--big.scss<\/code><\/pre>\nAs you can see above, just by seeing the subfolder structure inside your main folder, everything is clear and organized. In this way, it makes no difference who is working after you or if you are working after someone, because it is incredibly easy to follow the same pattern.<\/p>\n
DIVIDING BEM PROJECT INTO PLATFORMS<\/h4>\n
Besides just organizing your files using BEM methodology techniques, you can also go into more specific things. For example, if you are building a web project which is going to be fully responsive, and the client specified that some blocks on the mobile are totally different than on desktop devices, it would be best to divide your BEM folder structure into platforms. Example of organizing buttons on various platforms:<\/p>\n
common.blocks\/\r\n button\/\r\n button.scss\r\ndesktop.blocks\/\r\n button\/\r\n buttons.scss\r\nmobile.blocks\/\r\n button\/\r\n button.scss<\/code><\/pre>\nNote that this is just an example if you want to organize your whole project using BEM methodology. File tree with BEM structure is not mandatory to use BEM correctly, you can use BEM just in some segments of the project. So far I haven\u2019t been using this strict BEM file structure organization where every element and modifier has its file created. Instead, I am just creating a file structure for blocks which are having a declaration of its elements and modifiers. Tree Organization of a BEM Project<\/p>\n
BEM IN PRACTICE<\/h4>\n
![\"\"](\"https:\/\/www.psd2html5.co\/img\/blog\/blog-post-10.2.webp\")
<\/p>\n
Since you are now familiar with naming conventions, I will demonstrate BEM methodology in practice. Let\u2019s say that we have this HTML code in action:<\/p>\n
<a class=\u201dbtn btn--big btn--primary-color\u201d href=\u201d#\u201d title=\u201dTitle\u201d>\r\n <span class=\u201dbtn__price\u201d>$3.99<\/span>\r\n <span class=\u201dbtn__text\u201d>Product<\/span>\r\n<\/a><\/code><\/pre>\nWith the following CSS markup applied:<\/strong><\/p>\n.btn__price {\/* Styles *\/}\r\n.btn__text {\/* Styles *\/}\r\n.btn--big {\/* Styles *\/}\r\n.btn--primary-color {\/* Styles *\/}\r\n<\/code><\/pre>\nNow, don\u2019t be mislead. In our examples so far we almost always had a block, element, and modifier, which doesn\u2019t always have to be the case. For example, let\u2019s say we have a block named person. A person has legs and hands, it can also be female or male. If we want to define a male person with a right hand it will look like this:<\/p>\n
.person--male__hand--right {\/* Styles *\/}<\/code><\/pre>\nNow you can see the real meaning of the BEM. We defined a person which modifier is a gender. Since it doesn\u2019t matter if a person is male or female, it has a hand, and hand is an element. And again, each person can have right or left hand which is again a modifier.<\/p>\n
In another case, if we want to define general person with a single hand, we will do it like this:<\/p>\n
.person__hand {\/* Styles *\/}<\/code><\/pre>\nAs you can notice, once you get comfortable with BEM it\u2019s very easy to structure your CSS and HTML structure with it.<\/p>\n
USING BEM WITH CSS PREPROCESSORS<\/h4>\n
Personally, I cannot imagine starting any new project without using one of the CSS preprocessors. As you all know, preprocessors are a great thing and they are providing us a lot of benefits, and most importantly they are a perfect match with BEM methodology.<\/p>\n
In the following example, you can see the most typical example of BEM, in combination with<\/p>\n
SASS<\/strong><\/p>\n.person {\r\n &__hand {\/* Styles *\/}\r\n &__leg {\/* Styles *\/}\r\n &--male {\r\n \/* Styles *\/\r\n &__hand {\r\n \/* Styles *\/\r\n &--left {\/* Styles *\/}\r\n &--right {\/* Styles *\/}\r\n }\r\n &__leg {\r\n \/* Styles *\/\r\n &--left {\/* Styles *\/}\r\n &--right {\/* Styles *\/}\r\n }\r\n }\r\n &--female {\r\n \/* Styles *\/\r\n &__hand {\r\n \/* Styles *\/\r\n &--left {\/* Styles *\/}\r\n &--right {\/* Styles *\/}\r\n }\r\n &__leg {\r\n \/* Styles *\/\r\n &--left {\/* Styles *\/}\r\n &--right {\/* Styles *\/}\r\n }\r\n }\r\n}\r\n<\/code><\/pre>\nSASS code will compile into the following CSS:<\/strong><\/p>\n.person__hand {\/* Styles *\/}\r\n.person__leg {\/* Styles *\/}\r\n.person--male {\/* Styles *\/}\r\n.person--male__hand {\/* Styles *\/}\r\n.person--male__hand--left {\/* Styles *\/}\r\n.person--male__hand--right {\/* Styles *\/}\r\n.person--male__leg {\/* Styles *\/}\r\n.person--male__leg--left {\/* Styles *\/}\r\n.person--male__leg--right {\/* Styles *\/}\r\n.person--female {\/* Styles *\/}\r\n.person--female__hand {\/* Styles *\/}\r\n.person--female__hand--left {\/* Styles *\/}\r\n.person--female__hand--right {\/* Styles *\/}\r\n.person--female__leg {\/* Styles *\/}\r\n.person--female__leg--left {\/* Styles *\/}\r\n.person--female__leg--right {\/* Styles *\/}<\/code><\/pre>\nIf you want to go even further, you can use a handy SASS mixins for BEM:<\/strong><\/p>\n\/\/\/ Block Element\r\n\/\/\/ @param {String} $element - Element's name\r\n@mixin element ($element) {\r\n &__# {$element} {\r\n @content;\r\n }\r\n}\r\n\/\/\/ Block Modifier\r\n\/\/\/ @param {String} $modifier - Modifier's name\r\n@mixin modifier($modifier) {\r\n &--#{$modifier} {\r\n @content;\r\n }\r\n}\r\n<\/code><\/pre>\nAnd you can use it like this:<\/strong><\/p>\n.person {\r\n @include element('hand') {\/* Person hand *\/}\r\n @include element('leg') {\/* Person leg *\/}\r\n @include modifier('male') {\r\n \/* Person male *\/\r\n @include element('hand') {\r\n \/* Person male hand *\/\r\n @include modifier('left') {\r\n \/* Person male left hand *\/\r\n }\r\n @include modifier('right') {\r\n \/* Person male right hand *\/\r\n }\r\n }\r\n }\r\n}<\/code><\/pre>\nWhich will produce the following CSS output:<\/strong><\/p>\n.person__hand {\r\n \/* Person hand *\/\r\n}\r\n.person__leg {\r\n \/* Person leg *\/\r\n}\r\n.person--male {\r\n \/* Person male *\/\r\n}\r\n.person--male__hand {\r\n \/* Person male hand *\/\r\n}\r\n.person--male__hand--left {\r\n \/* Person male left hand *\/\r\n}\r\n.person--male__hand--right {\r\n \/* Person male right hand *\/\r\n}<\/code><\/pre>\nI know that most likely you won\u2019t have a use case this long, but this is a great example of how BEM is used and why it\u2019s so powerful, both in small and large scale projects.<\/p>\n
STARTING YOUR BEM PROJECT<\/h4>\n
As explained in the official BEM documentation, the easiest way to start you own new BEM project is to use existing GIT repository. Simply use Git clone command:<\/p>\n
$ git clone https:\/\/github.com\/bem\/project-stub.git<\/code><\/pre>\nNext, go to a newly created directory and install all dependencies:<\/p>\n
$ npm install<\/code><\/pre>\nAll required dependencies will be installed:
\nBEM dependencies<\/p>\n
Build the project using ENB:<\/strong><\/p>\n$ node_modules\/.bin\/enb make<\/code><\/pre>\nRun a server mode for development:<\/p>\n
$ node_modules\/.bin\/enb server<\/code><\/pre>\nAs a result, the following message appears:<\/p>\n
Server started at 0.0.0.0:8080<\/code><\/pre>\nNow, this means that the server is up and running. You can now check the results on this address:<\/p>\n
http:\/\/localhost:8080\/desktop.bundles\/index\/index.html<\/code><\/pre>\nAs you can see, there are a lot of elements already created which are defined inside bemjson<\/code> file which is located here:<\/p>\nproject-stub\/desktop.bundles\/index\/index.bemjson.js<\/code><\/pre>\nYou can see and explore the current structure of the file that is generating all that HTML, which you see at your localhost index.html<\/code> file. We are going to alter this file to get our \u201cPerson\u201d BEM project which we explained in a previous chapter. You can remove (or comment) the whole code from index.bemjson.js<\/code> file, and replace it with this one:<\/p>\nmodule.exports = {\r\n block: 'page',\r\n title: 'Person BEM',\r\n favicon : '\/favicon.ico',\r\n head : [\r\n { elem : 'meta', attrs : { name : 'description', content : '' } },\r\n { elem : 'meta', attrs : { name : 'viewport', content : 'width=device-width, initial-scale=1' } },\r\n { elem : 'css', url : 'index.min.css' }\r\n ],\r\n scripts: [{ elem : 'js', url : 'index.min.js' }],\r\n content: [\r\n {\r\n block: 'person',\r\n content: [\r\n {\r\n elem: 'male',\r\n content: [\r\n {\r\n elem: 'leg',\r\n mods: {side: 'left'},\r\n content: 'Male person leg -- left'\r\n },\r\n {\r\n elem: 'leg',\r\n mods: {side: 'right'},\r\n content: 'Male person leg -- right'\r\n },\r\n {\r\n elem: 'hand',\r\n mods: {side: 'left'},\r\n content: 'Male person hand -- left'\r\n },\r\n {\r\n elem: 'hand',\r\n mods: {side: 'right'},\r\n content: 'Male person hand -- right'\r\n }\r\n ]\r\n },\r\n {\r\n elem: 'female',\r\n content: [\r\n {\r\n elem: 'leg',\r\n mods: {side: 'left'},\r\n content: 'Female person leg -- left'\r\n },\r\n {\r\n elem: 'leg',\r\n mods: {side: 'right'},\r\n content: 'Female person leg -- right'\r\n },\r\n {\r\n elem: 'hand',\r\n mods: {side: 'left'},\r\n content: 'Female person hand -- left'\r\n },\r\n {\r\n elem: 'hand',\r\n mods: {side: 'right'},\r\n content: 'Female person hand -- right'\r\n }\r\n ]\r\n },\r\n ]\r\n }\r\n ]\r\n};<\/code><\/pre>\nNow, the following HTML will be generated:<\/p>\n
<div class=\"person\">\r\n <div class=\"person__male\">\r\n <div class=\"person__leg person__leg_side_left\">\r\n Male person leg -- left\r\n <\/div>\r\n\r\n <div class=\"person__leg person__leg_side_right\">\r\n Male person leg -- right\r\n <\/div>\r\n\r\n <div class=\"person__hand person__hand_side_left\">\r\n Male person hand -- left\r\n <\/div>\r\n\r\n <div class=\"person__hand person__hand_side_right\">\r\n Male person hand -- right\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"person__female\">\r\n <div class=\"person__leg person__leg_side_left\">\r\n Female person leg -- left\r\n <\/div>\r\n\r\n <div class=\"person__leg person__leg_side_right\">\r\n Female person leg -- right\r\n <\/div>\r\n\r\n <div class=\"person__hand person__hand_side_left\">\r\n Female person hand -- left\r\n <\/div>\r\n\r\n <div class=\"person__hand person__hand_side_right\">\r\n Female person hand -- right\r\n <\/div>\r\n <\/div>\r\n<\/div><\/code><\/pre>\nAs you can see from the code above, the default BEM coding scheme was used in this scenario since we are just using default settings which BEM provided to us. There are a lot more commands and options which you can explore and use, such as creating new pages, blocks, or modifying BEM HTML. I will not go too deep into this, and it can all be found in the official BEM documentation.<\/p>\n
BEM Advantages and Concerns<\/strong><\/p>\nAdvantages and Concerns<\/h3>\nADVANTAGES<\/h4>\n
BEM is excellent for maintaining. How many times have you had to work after someone on a large scaled project and you are just too afraid to change anything without something unknown collapsing? When using BEM, you know the exact purpose of the element and in which block it may appear.<\/p>\n
Class names are logical and intuitive, and every member of the team knows what that element does on the website. BEM gives everyone on a project a declarative syntax they can share so they\u2019re on the same page.<\/p>\n
BEM eliminates nested CSS selectors. Every single HTML element has its own CSS class, and by its name you know what its purpose is. One selector to rule them all.<\/p>\n
CONCLUSION<\/h4>\n
When I saw BEM coding scheme for the first time, my first thought was:<\/p>\n
These classes are just too long to write and read.<\/p>\n
But after giving it a try, now I cannot imagine starting a new project without using it. For me, BEM massively improved my code maintainability, and I can for sure say that every developer who is going to be \u201cthrown\u201d into the BEM-based project will catch up really quickly with the whole code structure.<\/p>\n
Despite all this, there\u2019s a lot of discussion on social networks about BEM. Some say BEM isn\u2019t good, wondering why they should write such long name classes instead of just use default HTML nested elements. Well, no one says that you must like BEM, but the fact is that the majority of front-end developers embrace it and find it extraordinary useful.<\/p>\n","protected":false},"excerpt":{"rendered":"
When you are building small websites, how you organize your styles is usually not a big problem. You create your usual files, write all the needed CSS, and that’s all. However, when it comes to larger….<\/p>\n","protected":false},"author":1,"featured_media":65,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[14],"tags":[],"class_list":["post-62","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend-developement"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.psd2html5.co\/blog\/wp-json\/wp\/v2\/posts\/62","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.psd2html5.co\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.psd2html5.co\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.psd2html5.co\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.psd2html5.co\/blog\/wp-json\/wp\/v2\/comments?post=62"}],"version-history":[{"count":4,"href":"https:\/\/www.psd2html5.co\/blog\/wp-json\/wp\/v2\/posts\/62\/revisions"}],"predecessor-version":[{"id":251,"href":"https:\/\/www.psd2html5.co\/blog\/wp-json\/wp\/v2\/posts\/62\/revisions\/251"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.psd2html5.co\/blog\/wp-json\/wp\/v2\/media\/65"}],"wp:attachment":[{"href":"https:\/\/www.psd2html5.co\/blog\/wp-json\/wp\/v2\/media?parent=62"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.psd2html5.co\/blog\/wp-json\/wp\/v2\/categories?post=62"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.psd2html5.co\/blog\/wp-json\/wp\/v2\/tags?post=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}