{"id":4364,"date":"2016-05-02T20:32:20","date_gmt":"2016-05-02T20:32:20","guid":{"rendered":"http:\/\/blog.brainstation.io\/?p=4364"},"modified":"2021-01-29T09:27:52","modified_gmt":"2021-01-29T14:27:52","slug":"sassn-bemn-for-better-stylesheets-web-development-insights","status":"publish","type":"post","link":"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights","title":{"rendered":"Sass\u2019n & BEM\u2019n for Better Stylesheets | Web Development Insights"},"content":{"rendered":"\n

jump to example code<\/em><\/a><\/p>\n\n\n\n

I Hate CSS<\/p>\n\n\n\n

Perhaps that\u2019s a little unfair to say. I absolutely love what I can create using CSS. But actually writing CSS, well, that\u2019s a different story. At first the two important concepts of CSS, cascade<\/a> and specificity<\/a>, seem cool when starting to learn the language. However, the fact that CSS lacks scopes like that of a programming language becomes painfully apparent real quick. As your stylesheet grows, it becomes extremely difficult to expect the outcome of each and every line of code you write.<\/p>\n\n\n\n

DRYing up CSS by creating reusable classes leads to elements with numerous classes, which leads to conflicting CSS definitions, which must be managed somehow using specificity, which means now your styles are dependent on DOM structure. When you find yourself using # or !important in your CSS, you should realize you dun goofed. \/rant<\/p>\n\n\n\n

Now let\u2019s take a look at how Sass<\/a> and BEM<\/a> can help us write better stylesheets.<\/p>\n\n\n\n

Introduction to Sass<\/strong><\/p>\n\n\n\n

Sass is a CSS preprocessor, which means it takes code written in its own syntax and compiles it into CSS. So to write with sass<\/em>, we need to install compilers<\/a>, or better yet, use it within frameworks (e.g., Ruby on Rails<\/a>) or with task runners\/bundlers (e.g., Grunt<\/a>).<\/p>\n\n\n\n

One thing that confused me when first learning Sass was the file extensions. You can either use .scss or .sass, and the only difference lies in syntax. What happens under the hood is the same. SCSS let\u2019s you use vanilla CSS syntax, so that\u2019s what we will use.<\/p>\n\n\n\n

Introducing the basics of using Sass is well documented in its official homepage<\/a>, it almost feels impossible to try to do a better job at it. So instead, let\u2019s just review a few of the topics that are relevant to this post:<\/p>\n\n\n\n

Variables and Functions<\/strong><\/p>\n\n\n\n

\"Screen<\/a><\/figure>\n\n\n\n

Nesting<\/strong><\/p>\n\n\n\n

\"Screen<\/a><\/figure>\n\n\n\n

Extending<\/strong><\/p>\n\n\n\n

\"Screen<\/a><\/figure>\n\n\n\n

It\u2019s easy to see how powerful Sass is. However, with great power comes great responsibility. Misuse your power a tiny bit and now your button no longer has proper border-radius! No, but seriously, Sass makes it easier to write CSS, which means it\u2019s easy to abuse and write bad CSS. If the first thing that came to your mind was \u201cwriting nested selectors will be so much easier!,\u201d then you\u2019re on that<\/em> boat. You need some BEM in your life.<\/p>\n\n\n\n

Block Element Modifier<\/p>\n\n\n\n

Did I mention it\u2019s easy to abuse CSS inheritance? Again, inheritance cancreate a lot of headaches<\/a>. So how can BEM help? BEM is methodology, not a piece of technology. You don\u2019t download and install anything, you just study it and apply it to your code.<\/p>\n\n\n\n

The Basics<\/strong><\/p>\n\n\n\n

BEM<\/a> stands for Block-Element-Modifier. It describes how CSS classes should be named. According to BEM, they should look like this:<\/p>\n\n\n\n

\"Screen<\/a><\/figure>\n\n\n\n

What are we trying to accomplish by doing this? What is the philosophy behind it?<\/p>\n\n\n\n

  1. Composition over Inheritance
    <\/strong>HTML elements are to contain<\/em> other styles by choice, rather thaninheriting<\/em> such styles automatically. In other words, we\u2019re trying to force our elements to behave in a more predictable manner by making the styles it receives more explicit. An aspect of this is to apply the     single responsibility principle to CSS,<\/a> by creating classes do one thing well and have elements have multiple classes. However, BEM focuses more on,<\/li>
  2. Avoiding Inheritance with unique classes per element<\/strong>So composition happens more in the stylesheet than in the HTML document (Sass helps to achieve this with @extend). This also means,<\/li>
  3. Lowest Specificity to Minimize Conflicts
    <\/strong>As elements will receive styles from unique classes, there is no need to use nested selectors.<\/li><\/ol>\n\n\n\n

    For example, instead of,<\/p>\n\n\n\n

    \"Screen<\/a><\/figure>\n\n\n\n

    We might do,<\/p>\n\n\n\n

    \"Screen<\/a><\/figure>\n\n\n\n
    \"Screen<\/a><\/figure>\n\n\n\n

    But wait, the second code looks bloated and messy. It\u2019s repeating itself!<\/p>\n\n\n\n

    Regarding the first argument, all I can say is it\u2019s worth the ugliness and you\u2019ll eventually get used to the long-ass class names<\/strong>. Repeated code, however, is a valid concern. Luckily, we have Sass to help us with that. The CSS above can be written in Sass as,<\/p>\n\n\n\n

    \"Screen<\/a><\/figure>\n\n\n\n

    Here\u2019s an example of using Sass and BEM together.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

    jump to example code I Hate CSS Perhaps that\u2019s a little unfair to say. I absolutely love what […]<\/p>\n","protected":false},"author":7,"featured_media":3701,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[70,84,97],"tags":[227,313,315,314,99],"yoast_head":"\nSass\u2019n & BEM\u2019n for Better Stylesheets | Web Development Insights | BrainStation\u00ae Blog<\/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:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sass\u2019n & BEM\u2019n for Better Stylesheets | Web Development Insights | BrainStation\u00ae Blog\" \/>\n<meta property=\"og:description\" content=\"jump to example code I Hate CSS Perhaps that\u2019s a little unfair to say. I absolutely love what […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights\" \/>\n<meta property=\"og:site_name\" content=\"BrainStation\u00ae Blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-05-02T20:32:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-29T14:27:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2016\/01\/Screen-Shot-2016-01-12-at-1.18.34-PM.png\" \/>\n\t<meta property=\"og:image:width\" content=\"874\" \/>\n\t<meta property=\"og:image:height\" content=\"578\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"BrainStation\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/brainstation.io\/blog\/#website\",\"url\":\"https:\/\/brainstation.io\/blog\/\",\"name\":\"BrainStation\u00ae Blog\",\"description\":\"The Digital Learning Company\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/brainstation.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights#primaryimage\",\"url\":\"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2016\/01\/Screen-Shot-2016-01-12-at-1.18.34-PM.png\",\"contentUrl\":\"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2016\/01\/Screen-Shot-2016-01-12-at-1.18.34-PM.png\",\"width\":874,\"height\":578},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights#webpage\",\"url\":\"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights\",\"name\":\"Sass\u2019n & BEM\u2019n for Better Stylesheets | Web Development Insights | BrainStation\u00ae Blog\",\"isPartOf\":{\"@id\":\"https:\/\/brainstation.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights#primaryimage\"},\"datePublished\":\"2016-05-02T20:32:20+00:00\",\"dateModified\":\"2021-01-29T14:27:52+00:00\",\"author\":{\"@id\":\"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11\"},\"breadcrumb\":{\"@id\":\"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/brainstation.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sass\u2019n & BEM\u2019n for Better Stylesheets | Web Development Insights\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11\",\"name\":\"BrainStation\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/brainstation.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g\",\"caption\":\"BrainStation\"},\"description\":\"BrainStation is a global leader in digital skills training, empowering businesses and brands to succeed in the digital age. Established in 2012, BrainStation has worked with over 250 instructors from the most innovative companies, developing cutting-edge, real-world digital education that has empowered more than 50,000 professionals and some of the largest corporations in the world.\",\"url\":\"https:\/\/brainstation.io\/blog\/author\/brainstation\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sass\u2019n & BEM\u2019n for Better Stylesheets | Web Development Insights | BrainStation\u00ae Blog","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:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights","og_locale":"en_US","og_type":"article","og_title":"Sass\u2019n & BEM\u2019n for Better Stylesheets | Web Development Insights | BrainStation\u00ae Blog","og_description":"jump to example code I Hate CSS Perhaps that\u2019s a little unfair to say. I absolutely love what […]","og_url":"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights","og_site_name":"BrainStation\u00ae Blog","article_published_time":"2016-05-02T20:32:20+00:00","article_modified_time":"2021-01-29T14:27:52+00:00","og_image":[{"width":874,"height":578,"url":"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2016\/01\/Screen-Shot-2016-01-12-at-1.18.34-PM.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Written by":"BrainStation","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"https:\/\/brainstation.io\/blog\/#website","url":"https:\/\/brainstation.io\/blog\/","name":"BrainStation\u00ae Blog","description":"The Digital Learning Company","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/brainstation.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights#primaryimage","url":"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2016\/01\/Screen-Shot-2016-01-12-at-1.18.34-PM.png","contentUrl":"https:\/\/d2re7sjnpekmig.cloudfront.net\/prod\/wp-content\/uploads\/2016\/01\/Screen-Shot-2016-01-12-at-1.18.34-PM.png","width":874,"height":578},{"@type":"WebPage","@id":"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights#webpage","url":"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights","name":"Sass\u2019n & BEM\u2019n for Better Stylesheets | Web Development Insights | BrainStation\u00ae Blog","isPartOf":{"@id":"https:\/\/brainstation.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights#primaryimage"},"datePublished":"2016-05-02T20:32:20+00:00","dateModified":"2021-01-29T14:27:52+00:00","author":{"@id":"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11"},"breadcrumb":{"@id":"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/brainstation.io\/blog\/sassn-bemn-for-better-stylesheets-web-development-insights#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/brainstation.io\/blog"},{"@type":"ListItem","position":2,"name":"Sass\u2019n & BEM\u2019n for Better Stylesheets | Web Development Insights"}]},{"@type":"Person","@id":"https:\/\/brainstation.io\/blog\/#\/schema\/person\/9f37983a6c4da6cf5dd422481ac8cf11","name":"BrainStation","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/brainstation.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/80c14b8388838ae1453aec36606b232d?s=96&d=mm&r=g","caption":"BrainStation"},"description":"BrainStation is a global leader in digital skills training, empowering businesses and brands to succeed in the digital age. Established in 2012, BrainStation has worked with over 250 instructors from the most innovative companies, developing cutting-edge, real-world digital education that has empowered more than 50,000 professionals and some of the largest corporations in the world.","url":"https:\/\/brainstation.io\/blog\/author\/brainstation"}]}},"_links":{"self":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts\/4364"}],"collection":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/comments?post=4364"}],"version-history":[{"count":7,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts\/4364\/revisions"}],"predecessor-version":[{"id":12718,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/posts\/4364\/revisions\/12718"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/media\/3701"}],"wp:attachment":[{"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/media?parent=4364"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/categories?post=4364"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/brainstation.io\/blog\/wp-json\/wp\/v2\/tags?post=4364"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}