{"id":134226,"date":"2020-01-30T14:30:02","date_gmt":"2020-01-30T14:30:02","guid":{"rendered":"https:\/\/www.wacoca.com\/anime\/134226\/"},"modified":"2020-01-30T14:30:02","modified_gmt":"2020-01-30T14:30:02","slug":"you-probably-need-bem-css-in-your-life-tutorial","status":"publish","type":"post","link":"https:\/\/www.wacoca.com\/anime\/134226\/","title":{"rendered":"You Probably Need BEM CSS in Your Life (Tutorial)"},"content":{"rendered":"<p><iframe loading=\"lazy\"  width=\"580\" height=\"385\" src=\"https:\/\/www.youtube.com\/embed\/er1JEDuPbZQ\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\n<br \/>\nVisit http:\/\/linode.com\/designcourse for a $20 credit on your new linode account.<br \/>\nhttps:\/\/designcourse.com &#8211; Learn UI\/UX from Scratch with my new service (coming soon)<br \/>\n&#8212; Today, we&#8217;re going to cover the BEM method for writing CSS. BEM is an acronym for Block Element Modifier, and it&#8217;s an approach to defining and structuring your CSS. When you&#8217;re dealing with medium to large size projects, it helps you develop a maintainable code base and one that doesn&#8217;t run into issues with specificity. While this is a beginner&#8217;s level tutorial, we will be jumping into more intermediate and advanced tutorials later on down the road.<\/p>\n<p>Codepen demo for this tutorial:<br \/>\n<iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" title=\"BEM CSS Tutorial\" src=\"https:\/\/codepen.io\/designcourse\/embed\/preview\/KKwjKNE?default-tabs=css%2Cresult&#038;height=300&#038;host=https%3A%2F%2Fcodepen.io&#038;slug-hash=KKwjKNE#?secret=hR5uf34fBV\" data-secret=\"hR5uf34fBV\" scrolling=\"no\" frameborder=\"0\" height=\"300\"><\/iframe><\/p>\n<p>Let&#8217;s get started!<\/p>\n<p>&#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211;<\/p>\n<p>Subscribe for NEW VIDEOS!<\/p>\n<p>My site:                                 https:\/\/designcourse.com<br \/>\nMy personal FB account:   http:\/\/fb.com\/logodesigner<br \/>\nCoursetro FB:                       http:\/\/fb.com\/coursetro<br \/>\nCoursetro&#8217;s Twitter:             http:\/\/twitter.com\/designcoursecom<\/p>\n<p>Join my Discord!                https:\/\/discord.gg\/a27CKAF<br \/>\n^-Chat with me and others<\/p>\n<p>&#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211; &#8211;<\/p>\n<p>Who is Gary Simon?  Well, I&#8217;m a full stack developer with 2+ decades experience and I teach people how to design and code. I&#8217;ve created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network. <\/p>\n<p>Now, I focus all of my time and energy on this channel and my website Coursetro.com.<\/p>\n<p>Come to my discord server or add me on social media and say Hi!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Visit http:\/\/linode.com\/designcourse for a $20 credit on your new linode account. https:\/\/designcourse.com &#038;#8<\/p>\n","protected":false},"author":4,"featured_media":134227,"comment_status":"","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_share_on_mastodon":"0"},"categories":[2],"tags":[37524,143622,143619,143614,143615,143628,143627,143623,143613,143625,55749,143618,143620,143624,143621,143616,143626,143630,143617,143629],"class_list":{"0":"post-134226","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-2020","10":"tag-bem-block-element-modifier","11":"tag-bem-css","12":"tag-bem-css-tutorial","13":"tag-bem-forum","14":"tag-bem-guide","15":"tag-bem-in-2020","16":"tag-bem-tutorial","17":"tag-bem-video","18":"tag-block","19":"tag-block-element-modifier","20":"tag-css-bem","21":"tag-css-bem-in-2020","22":"tag-css-bem-tutorial","23":"tag-element","24":"tag-gary-simon","25":"tag-how-to-use-bem","26":"tag-modifier","27":"tag-what-is-bem"},"share_on_mastodon":{"url":"","error":""},"_links":{"self":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/posts\/134226","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=134226"}],"version-history":[{"count":0,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/posts\/134226\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/media\/134227"}],"wp:attachment":[{"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/media?parent=134226"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/categories?post=134226"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wacoca.com\/anime\/wp-json\/wp\/v2\/tags?post=134226"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}