{"id":46462,"date":"2017-02-28T11:19:47","date_gmt":"2017-02-28T05:49:47","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=46462"},"modified":"2017-02-28T11:19:47","modified_gmt":"2017-02-28T05:49:47","slug":"an-introduction-to-bem-do-less-get-more-css-approach","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/an-introduction-to-bem-do-less-get-more-css-approach\/","title":{"rendered":"An Introduction to BEM \u2013 \u201cDO Less Get More\u201d CSS Approach"},"content":{"rendered":"

Front end development<\/a> and Coding is an art. Efficiency of code increases if it is organized in a right way. Certain questions that you need to address are:<\/p>\n

a) How long it takes for you to write code? (Consider efficiency while writing the code)<\/em>
\nb) How much code you will have to re-write for similar task? (Make sure the code is reusable)<\/em>
\nc) How much time does browser take to read your code? (Optimize the performance)<\/em><\/p>\n

BEM provides more structured way to organize your CSS<\/a> code thereby increasing the productivity. BEM stands for Block, Elements and Modifiers. These three approaches or techniques\u00a0help to maintain a single codebase and reduce\u00a0complexity.<\/p>\n

Block:<\/strong> Block is a standalone entity or piece of html code that is meaningful by its own. eg: header, menu, container, input, checkbox
\nElement:<\/strong> Element is a part of the block that has no standalone meaning. eg: header title, menu item, list item, checkbox caption
\nModifier:<\/strong> Modifier is\u00a0a flag on the block or element that is used to modify the behaviour or appearance. eg: disabled, checked, fixed, size big, color red.
\nSyntax:-<\/em><\/p>\n

[html]
\n .block {}
\n .block__element {}
\n .block–modifier {}[\/html]<\/p>\n

If you want to categorize a search bar in BEM, it can be broken down as:-<\/p>\n

[html]
\n .site-search {} \/* Block *\/
\n .site-search__field {} \/* Element *\/
\n .site-search–full {} \/* Modifier *\/[\/html]<\/p>\n

\"BEM\"<\/p>\n

Let\u2019s take an example of above buttons. As a usual case, we are using normal buttons here:<\/p>\n

[html]
\n .button {
\n background-image: linear-gradient(#EEE, #DDD);
\n display: inline-block;
\n border-radius: 2px;
\n border: 1px solid #D5D5D5;
\n padding: 6px 12px;
\n font: 600 13px\/18px Helvetica, arial;
\n }
\n .button–success-state {
\n background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
\n color: #FFF;
\n border-color: #4A993E;
\n }
\n .button—danger-state {
\n color: #900;
\n }[\/html]<\/p>\n

Here’s more information and a\u00a0Demo Link<\/a><\/p>\n

Why should you consider using BEM? Outlined below are the few benefits:<\/strong><\/p>\n

1. Modularity<\/strong>: There is no problem of cascading. This helps in using the codebase of one project to another.
\n2. Reusability<\/strong>: Writing code for independent blocks and using them intelligently reduces the CSS to be written.
\n3. Organised Structure<\/strong>: Easy and simple to understand with the help of declarative syntax given BEM.<\/p>\n

Other benefits include easy debugging, increase in development speed and quick implementation of new features. Hope with so many benefits and multiple applications, you would be able to use BEM successfully for your projects.<\/p>\n","protected":false},"excerpt":{"rendered":"

Front end development and Coding is an art. Efficiency of code increases if it is organized in a right way. Certain questions that you need to address are: a) How long it takes for you to write code? (Consider efficiency while writing the code) b) How much code you will have to re-write for similar […]<\/p>\n","protected":false},"author":901,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":2},"categories":[3429,3917,1994,1],"tags":[4447,4485,245,4451,4452,4453,4450,4448,4449,1787,4118],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/46462"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/901"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=46462"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/46462\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=46462"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=46462"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=46462"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}