{"id":190072,"date":"2020-07-23T20:44:14","date_gmt":"2020-07-23T20:44:14","guid":{"rendered":"https:\/\/www.wacoca.com\/anime\/190072\/"},"modified":"2020-07-23T20:44:14","modified_gmt":"2020-07-23T20:44:14","slug":"css-bem-the-what-how-and-why-block-element-modifier-methodology","status":"publish","type":"post","link":"https:\/\/www.wacoca.com\/anime\/190072\/","title":{"rendered":"CSS BEM &#8211; The What, How, and Why | Block Element Modifier Methodology"},"content":{"rendered":"<p><iframe loading=\"lazy\"  width=\"580\" height=\"385\" src=\"https:\/\/www.youtube.com\/embed\/aKenj9ZQwJg\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\n<br \/>\nCSS code is messy. Actually, it gets messy over time, and only if you are not following a strict methodology. CSS BEM stands for Block Element Modifier and is a perfect example of a methodology that works!<\/p>\n<p>CSS has many fundamental problems that result in code that is difficult to maintain and read. CSS is considered to be a mess and is hated by many developers. I was among these developers too, until I figured out the proper way to write CSS code. It takes some practice to learn BEM and chances are you won&#8217;t like it at first, but as time goes, you will never want to move away from the Block, Element, and Modifier methodology. It&#8217;s just way too convenient!<\/p>\n<p>In this tutorial you will learn:<br \/>\n1) What BEM is, what are Block, Element, and Modifier,<br \/>\n2) How to implement BEM in your HTML &#038; CSS,<br \/>\n3) Why you should take your time to learn BEM.<\/p>\n<p>Timestamps:<br \/>\n0:00 Intro<br \/>\n0:18 What is BEM?<br \/>\n0:45 Breaking HTML into Block and Elements<br \/>\n1:19 Block and Element naming<br \/>\n2:51 What are Modifiers?<br \/>\n3:52 Why BEM?<br \/>\n5:11 BEM with SASS\/SCSS<br \/>\n6:11 Summary<\/p>\n<p>#CCS3 #bem #blockelementmodifier<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS code is messy. Actually, it gets messy over time, and only if you are not following a strict methodology. <\/p>\n","protected":false},"author":4,"featured_media":190073,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[37524,143619,143614,186073,186071,186072,186067,186070,143615,143613,143618,186066,186069,186076,174860,143620,186068,174864,186065,174863,174862,143621,143630,143629,186075,186074],"class_list":{"0":"post-190072","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-japanese-anime","8":"tag-bem","9":"tag-bem-block-element-modifier","10":"tag-bem-css","11":"tag-bem-css-convention","12":"tag-bem-css-examples","13":"tag-bem-css-explained","14":"tag-bem-css-naming","15":"tag-bem-css-naming-convention","16":"tag-bem-css-tutorial","17":"tag-bem-tutorial","18":"tag-block-element-modifier","19":"tag-block-element-modifier-css","20":"tag-block-element-modifier-examples","21":"tag-block-element-modifier-tutorial","22":"tag-css","23":"tag-css-bem","24":"tag-css-bem-2020","25":"tag-css-bem-best-practice","26":"tag-css-bem-explained","27":"tag-css-bem-methodology","28":"tag-css-bem-naming","29":"tag-css-bem-tutorial","30":"tag-how-to-use-bem","31":"tag-what-is-bem","32":"tag-what-is-bem-css","33":"tag-what-is-bem-in-css"},"share_on_mastodon":{"url":"","error":""},"_links":{"self":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/posts\/190072","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/comments?post=190072"}],"version-history":[{"count":0,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/posts\/190072\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/media\/190073"}],"wp:attachment":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/media?parent=190072"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/categories?post=190072"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/tags?post=190072"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}