{"id":28333,"date":"2019-09-04T00:00:00","date_gmt":"2019-09-03T22:00:00","guid":{"rendered":"https:\/\/blexin.com\/semplifichiamo-i-css-con-bem\/"},"modified":"2021-05-20T18:53:41","modified_gmt":"2021-05-20T16:53:41","slug":"how-to-simplfy-css-with-bem","status":"publish","type":"post","link":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/","title":{"rendered":"How to simplfy CSS with BEM"},"content":{"rendered":"\n
\"\"<\/figure>\n\n\n\n

What BEM is<\/h2>\n\n\n\n

Let\u2019s start with basics: BEM is not a framework, but a methodology, a special way to write and organize the CSS code that I love to define as \u201cBEM Philosophy\u201d, a pun that explains the inner peace you can obtain through the use of this technique.<\/p>\n\n\n\n

Do you remember about CSS Zen Garden? Although there\u2019s nothing in common on a technological point of view about it, it\u2019s the same principle to work on stylesheets with no need to risk a nervous breakdown. The modification of a CSS is similar to the neutralization of a bomb: you never know whether the modification you are going to make on a component, may cause the explosion of another one.<\/p>\n\n\n\n

First things first: let\u2019s start to analyze one of the most common problems deriving from CSS codification. How many times you will ever stylized a button and then you re-used it inside another code block and you lost the whole expected personalization?<\/p>\n\n\n\n

Let\u2019s look at this code example:<\/p>\n\n\n

\n<main class="container">\n\u00a0\u00a0\u00a0\u00a0<button type="button" class="btn">\n\u00a0\u00a0\u00a0\u00a0ENTER\n\u00a0\u00a0\u00a0\u00a0<\/button>\n<\/main>\n\u00a0\u00a0\u00a0\u00a0\u00a0\n<aside class="sidebar">\n\u00a0\u00a0\u00a0\u00a0<button type="button" class="btn">\n\u00a0\u00a0\u00a0\u00a0ENTER\n\u00a0\u00a0\u00a0\u00a0<\/button>\n<\/aside>\n<\/pre><\/div>\n\n
\n\/* CSS *\/\n\u00a0\u00a0\n.container .btn {\n           background: red;\n           color: white;\n           font-size: 15px;\n           height: 50px;\n           padding: 5px 10px;\n\u00a0\u00a0\u00a0\u00a0\u00a0}\n<\/pre><\/div>\n\n\n
The button inside .container<\/strong> will be rendered as follows:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
But look what happens when we move the button inside.sidebar<\/strong><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
In this example, we used a descendant selector. The button changes its form, because the CSS properties are applied only when .btn<\/strong> is put inside the block .container<\/strong>. Inside any other different block, like .sidebar<\/strong>, therefore, it will take a different form.<\/p>\n\n\n\n
It would be nice to have univocal components that can be moved from point A to point B in our layout and maintain them unchanged: well, this is finally possible thanks to BEM methodology!<\/p>\n\n\n\n
Let\u2019s see how: BEM stands for Block – Element -Modifier<\/p>\n\n\n\n
  • .block<\/strong> : it represents the parent element and it can be inserted in other blocks, but it has to be independent from them;<\/li>
  • .block__element<\/strong> : the element, it is dependent from the block;<\/li>
  • .block\u2014modifier<\/strong> : it is used to modify the basis style and it can be applied both on a block and on an element.<\/li><\/ul>\n\n\n\n
    A class must be assigned to every element in the markup and IDs are not allowed. At first glance, the syntax might be not pleasant to see, but you have to get used to it.<\/p>\n\n\n\n
    This is a practical example, where .card<\/strong> represents the parent block and .card__title<\/strong> and .card__content<\/strong> are child elements related to it. The name of the block, from which the element depends, must be specified in the first part of the selector, ahead of the double underscore (__). Then the name of the element (semantic, if possible) itself must be inserted right after.<\/p>\n\n\n
    \n<div class="card" >\n\u00a0\u00a0\u00a0\u00a0<h1 class="card__title" >Hello World!<\/h1 >\n\u00a0\u00a0\u00a0\u00a0<p class="card__content" >Text... <\/p >\n<\/div >\n<\/pre><\/div>\n\n\n
    In this case, .card\u2014red<\/strong> represents the Modifier<\/strong> of card and it replaces its background by default. The name of the Block<\/strong>, to which the Modifier<\/strong> must be applied, should be inserted ahead of the double dash (–) and after that it must be inserted the name of the Modifier<\/strong> itself.<\/p>\n\n\n
    \n<div class="card card--red">\n\u00a0\u00a0\u00a0\u00a0<h1 class="card__title">Hello World!<\/h1>\n\u00a0\u00a0\u00a0\u00a0<p class="card__content">Text... <\/p>\n<\/div>\n<\/pre><\/div>\n\n\n
    The related CSS is instead:<\/p>\n\n\n
    \n.card {\n\u00a0\u00a0\u00a0\u00a0background: white;\n}\n\u00a0\u00a0\u00a0\u00a0.card.card--red {\n\u00a0\u00a0\u00a0\u00a0background: red;\n}\n<\/pre><\/div>\n\n\n
    Is it possible to nest the blocks?<\/h2>\n\n\n\n
    The answer is yes! A classical example is a form<\/strong> positioned inside a .card<\/strong> block.<\/p>\n\n\n
    \n<div class="card">\n\u00a0\u00a0\u00a0\u00a0<h1 class="card__title">Contacts <\/h1>\n\u00a0\u00a0\u00a0\u00a0<p class="card__content">Text... <\/p>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0<form class="form-contact">\n\u00a0\u00a0\u00a0\u00a0<input type="text" class="form-contact__input">\n\u00a0\u00a0\u00a0\u00a0<textarea ows="10" class="form-contact__message"><\/textarea>\n\u00a0\u00a0\u00a0\u00a0<button class="form-contact__btn">SUBMIT<\/button>\n\u00a0\u00a0\u00a0\u00a0<\/form>\n<\/div>\n<\/pre><\/div>\n\n
    \n\/* CSS *\/\n\u00a0\u00a0\u00a0\u00a0.form-contact { ... }\n\u00a0\u00a0\u00a0\u00a0.form-contact__input { ... }\n\u00a0\u00a0\u00a0\u00a0.form-contact__text { ... }\n<\/pre><\/div>\n\n\n
    How to manage nested elements<\/h2>\n\n\n\n
    When we choose selectors\u2019 names, we always have to refer to the Block<\/em><\/strong>, with no need to follow the DOM structure. By doing so, we can move elements inside the block at taste, with no need to re-write the code from time to time. The example below should NOT<\/span> be followed:<\/p>\n\n\n
    \n<div class="block">\n\u00a0\u00a0\u00a0\u00a0<header class="block__header">\n\u00a0\u00a0\u00a0\u00a0Hello\n\u00a0\u00a0\u00a0\u00a0<strong class="block__header__strong">World! <\/strong>\n\u00a0\u00a0\u00a0\u00a0<\/header>\n<\/div>\n\u00a0\u00a0\n<div class="block">\n\u00a0\u00a0\u00a0\u00a0<header class="block__header">\n\u00a0\u00a0\u00a0\u00a0<h1 class="block__header__title">\n\u00a0\u00a0\u00a0\u00a0Hello\n\u00a0\u00a0\u00a0\u00a0<strong class="block__header__title__strong">World! <\/strong>\n\u00a0\u00a0\u00a0\u00a0<\/h1>\n\u00a0\u00a0\u00a0\u00a0<\/header>\n<\/div>\n<\/pre><\/div>\n\n
    \n.block { ... }\n.block__header { ... }\n.block__header__title { ... }\n.block__header__title__strong { ... }\n<\/pre><\/div>\n\n\n
    This is the correct approach instead:<\/p>\n\n\n
    \n<div class="block">\n\u00a0\u00a0\u00a0\u00a0<header class="block__header">\n\u00a0\u00a0\u00a0\u00a0<h1 class="block__title">\n\u00a0\u00a0\u00a0\u00a0Hello\n\u00a0\u00a0\u00a0\u00a0<strong class="block__strong">World!<\/strong>\n\u00a0\u00a0\u00a0\u00a0<\/h1>\n\u00a0\u00a0\u00a0\u00a0<\/header>\n<\/div>\n<\/pre><\/div>\n\n
    \n\/* CSS *\/\n.block { ... }\n.block__header { ... }\n.block__title { ... }\n.block__strong { ... }\n<\/pre><\/div>\n\n\n
    How to use it with SASS<\/h2>\n\n\n\n
    Using BEM together with SASS is really wonderful because, thanks to the use of the Nesting and the directive &<\/strong>, that allows us to obtain an interpolation with the name of the block, we have the opportunity to make some components, that can be easily moved from project to another, without problems. This is a classical example of a stylized button:<\/p>\n\n\n
    \n\/* SCSS *\/\n\u00a0\u00a0\n.btn {\n\u00a0\u00a0\u00a0\u00a0background: black;\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&__label {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0color: white;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0&#{&}--red {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background: red;\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\u00a0\u00a0&#{&}--blue {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0background: blue;\n\u00a0\u00a0\u00a0\u00a0}\n}\n<\/pre><\/div>\n\n\n
    In this case, in addition to the directive &<\/strong> we used to define selectors of elements, we will use also the directive #{&}<\/strong> , which allows us to create a further interpolation of the name of the block. The compiled CSS would be then:<\/p>\n\n\n
    \n\/* CSS compilato *\/\n.btn {\n\u00a0\u00a0\u00a0\u00a0background: black;\n\u00a0\u00a0}\n\u00a0\u00a0.btn__label {\n\u00a0\u00a0\u00a0\u00a0color: white;\n\u00a0\u00a0}\n\u00a0\u00a0.btn.btn--red {\n\u00a0\u00a0\u00a0\u00a0background: red;\n\u00a0\u00a0}\n\u00a0\u00a0.btn.btn--blue {\n\u00a0\u00a0\u00a0\u00a0background: blue;\n}\n<\/pre><\/div>\n\n\n
    In addition, we can further divide our SCSS in many files, then insert everything in a single stylesheet through the directive @import<\/strong> of SASS. We will have a structure like this:<\/p>\n\n\n
    \nwebsite \/\n\u00a0\u00a0\u00a0\u00a0\u251c\u2500\u2500 scss \/\n\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0 \u251c\u2500\u2500 style.scss\n\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0 \u251c\u2500\u2500 _header.scss\n\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0 \u251c\u2500\u2500 _footer.scss\n\u00a0\u00a0\u00a0\u00a0\u2502\u00a0\u00a0 \u251c\u2500\u2500 _button.scss\n\u00a0\u00a0\u00a0\u00a0\u251c\u2500\u2500\n\u00a0\u00a0\n\u00a0\u00a0\nSTYLE.SCSS\n\u00a0\u00a0\u00a0\u00a0@import header;\n\u00a0\u00a0\u00a0\u00a0@import footer;\n    @import button;\n<\/pre><\/div>\n\n\n
    How to use it with Bootstrap?<\/h2>\n\n\n\n
    Even if the trend of recent years is to use frameworkless<\/em> solutions, Bootstrap is still one of the most used tools: how can we use it with BEM then? We can proceed like that: we will not define the blocks size, we can define only the height if needed. In this case, we need to abstract the grid from the components and we should avoid adding classes to Bootstrap columns. This is a practical example:<\/p>\n\n\n
    \n<div class="row">\n\u00a0\u00a0\u00a0<div class="col-md-6">\n\u00a0\u00a0\u00a0\u00a0<div class="block">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<header class="block__header">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1 class="block__title">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hello\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<strong class="block__strong">World! <\/strong>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/header>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<div class="col-md-6">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div class="block">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<header class="block__header">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1 class="block__title">\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Hello\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<strong class="block__strong">World! <\/strong>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/h1>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/header>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\n\u00a0\u00a0\u00a0\u00a0<\/div>\n<\/div>\n<\/pre><\/div>\n\n\n
    Decoupling components from the grid, we will have the possibility to substitute bootstrap with another framework or with CSS grid (in next article, we will talk about it)<\/p>\n\n\n\n
    What are advantages<\/h2>\n\n\n\n
    • better code maintainability;<\/li>
    • possibility to create components, that can be used in other projects;<\/li>
    • performance optimization: avoiding the use of descendant selector and assigning a class to any element, we don\u2019t force the browser to make too many calculations.<\/li><\/ul>\n\n\n\n
      What are the disadvantages<\/h2>\n\n\n\n
      Obviously, all that glitters is not gold: in the real world, we need sometimes to compromise with BEM methodology. Especially when we need to make many reset on the elements, in fact, and selectors could be very verbose, in case we had Blocks with Modifiers and Elements that presents Modifiers in their turns. For example, the same button in some pages could have the shadow and in other pages it could have it not: to avoid the application of more Modifiers to the element, I tried to solve with three possible paths to be taken.<\/p>\n\n\n\n
      In the first one, the button could be defined as Block, and, in extreme situations, we will use an element instead of the modifier, in order to use the selector .activity-main__btn<\/strong> to obtain specific personalizations, as the application of the shadow.<\/p>\n\n\n
      \n<div class="activity-main activity-main--white">\n       <button type="button" class="btn-main btn--red activity-main__btn"><\/button>\n<\/div>\n<\/pre><\/div>\n\n\n
      A second path could be to use \u201chelpers\u201d classes (to be clear, those that describe properties they are going to apply) without exaggeration, and we obtain then a markup as:<\/p>\n\n\n
      \n<div class="activity-main activity-main--white">\n\u00a0\u00a0\u00a0\u00a0<button type="button" class="btn-main btn--red shadow"><\/button>\n<\/div>\n<\/pre><\/div>\n\n\n
      the last option is to ask to the designer to modify the button, because it is not congruent to others on the website and avoid this problem…but this is another story.<\/p>\n\n\n\n
      Best practices<\/h2>\n\n\n\n
      Theoretically: elements must not be moved from a block to another. For this reason, when you start a new project, it would be a good idea to create a styleguide<\/em>, in order to define all blocks, elements and modifiers.<\/p>\n\n\n\n
      Practically: if we are asked for typical \u201clast minute\u201d modifications, we can easily move an element from a block to another one, with no fear to find it stylized in a different manner, and then we can optimize the code too.<\/p>\n\n\n\n
      Selectors name might appear fragmented, due to the use of dashes and underscores: we can solve this problem with the use of camel case. A .activity-main__title<\/strong> could become .activityMain__title<\/strong> then.<\/p>\n\n\n\n
      In my next article, I will write about CSS grid and we will see together how to use it together with BEM methodology.<\/p>\n\n\n\n\n","protected":false},"excerpt":{"rendered":"
      Let’s see how to simplify the creation of CSS with the BEM methodology<\/p>\n","protected":false},"author":196716237,"featured_media":28316,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"","_et_gb_content_width":"","_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","_crdt_document":"","inline_featured_image":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_wpas_customize_per_network":false,"jetpack_post_was_ever_published":false},"categories":[688637524],"tags":[688637456],"class_list":["post-28333","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-en","tag-css-en"],"yoast_head":"\nHow to simplfy CSS with BEM - Blexin<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to simplfy CSS with BEM - Blexin\" \/>\n<meta property=\"og:description\" content=\"Let's see how to simplify the creation of CSS with the BEM methodology\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/\" \/>\n<meta property=\"og:site_name\" content=\"Blexin\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-03T22:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-20T16:53:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i2.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"608\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Carmine Alfano\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carmine Alfano\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-simplfy-css-with-bem\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-simplfy-css-with-bem\\\/\"},\"author\":{\"name\":\"Carmine Alfano\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\"},\"headline\":\"How to simplfy CSS with BEM\",\"datePublished\":\"2019-09-03T22:00:00+00:00\",\"dateModified\":\"2021-05-20T16:53:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-simplfy-css-with-bem\\\/\"},\"wordCount\":1260,\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-simplfy-css-with-bem\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1\",\"keywords\":[\"CSS\"],\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-simplfy-css-with-bem\\\/\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-simplfy-css-with-bem\\\/\",\"name\":\"How to simplfy CSS with BEM - Blexin\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-simplfy-css-with-bem\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-simplfy-css-with-bem\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1\",\"datePublished\":\"2019-09-03T22:00:00+00:00\",\"dateModified\":\"2021-05-20T16:53:41+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-simplfy-css-with-bem\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-simplfy-css-with-bem\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-simplfy-css-with-bem\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1\",\"contentUrl\":\"https:\\\/\\\/i0.wp.com\\\/blexin.com\\\/wp-content\\\/uploads\\\/2020\\\/12\\\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1\",\"width\":1024,\"height\":608},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/blog-en\\\/how-to-simplfy-css-with-bem\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/blexin.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to simplfy CSS with BEM\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/\",\"name\":\"Blexin\",\"description\":\"Con noi \u00e8 semplice\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/blexin.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/blexin.com\\\/en\\\/#\\\/schema\\\/person\\\/4e2c9e1af52bea3e12948c0fdea323c6\",\"name\":\"Carmine Alfano\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g\",\"caption\":\"Carmine Alfano\"},\"url\":\"https:\\\/\\\/blexin.com\\\/en\\\/author\\\/razzullo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to simplfy CSS with BEM - Blexin","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/","og_locale":"en_US","og_type":"article","og_title":"How to simplfy CSS with BEM - Blexin","og_description":"Let's see how to simplify the creation of CSS with the BEM methodology","og_url":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/","og_site_name":"Blexin","article_published_time":"2019-09-03T22:00:00+00:00","article_modified_time":"2021-05-20T16:53:41+00:00","og_image":[{"width":1024,"height":608,"url":"https:\/\/i2.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1","type":"image\/png"}],"author":"Carmine Alfano","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Carmine Alfano","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/#article","isPartOf":{"@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/"},"author":{"name":"Carmine Alfano","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6"},"headline":"How to simplfy CSS with BEM","datePublished":"2019-09-03T22:00:00+00:00","dateModified":"2021-05-20T16:53:41+00:00","mainEntityOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/"},"wordCount":1260,"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1","keywords":["CSS"],"articleSection":["Blog"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/","url":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/","name":"How to simplfy CSS with BEM - Blexin","isPartOf":{"@id":"https:\/\/blexin.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/#primaryimage"},"image":{"@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/#primaryimage"},"thumbnailUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1","datePublished":"2019-09-03T22:00:00+00:00","dateModified":"2021-05-20T16:53:41+00:00","author":{"@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6"},"breadcrumb":{"@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/#primaryimage","url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1","contentUrl":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1","width":1024,"height":608},{"@type":"BreadcrumbList","@id":"https:\/\/blexin.com\/en\/blog-en\/how-to-simplfy-css-with-bem\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blexin.com\/en\/"},{"@type":"ListItem","position":2,"name":"How to simplfy CSS with BEM"}]},{"@type":"WebSite","@id":"https:\/\/blexin.com\/en\/#website","url":"https:\/\/blexin.com\/en\/","name":"Blexin","description":"Con noi \u00e8 semplice","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blexin.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/blexin.com\/en\/#\/schema\/person\/4e2c9e1af52bea3e12948c0fdea323c6","name":"Carmine Alfano","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8f226030567f12e6f1c15de5af3ecde7d4c4b654f5837f8bcfd41582d642c05f?s=96&d=identicon&r=g","caption":"Carmine Alfano"},"url":"https:\/\/blexin.com\/en\/author\/razzullo\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blexin.com\/wp-content\/uploads\/2020\/12\/97b0226b-9e5f-4935-aa82-7c9620d3c418.png?fit=1024%2C608&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/pcyUBx-7mZ","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/users\/196716237"}],"replies":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/comments?post=28333"}],"version-history":[{"count":6,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28333\/revisions"}],"predecessor-version":[{"id":31974,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/posts\/28333\/revisions\/31974"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media\/28316"}],"wp:attachment":[{"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/media?parent=28333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/categories?post=28333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blexin.com\/en\/wp-json\/wp\/v2\/tags?post=28333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}