WooHoo! You are now done with converting the native CSS stylesheet over into modular Sass. I know that was a long process, but you only needed to do it once. Now you have a codebase that you can use on every single project and site that you build. Quick Summary of What You Learned: It’s Sass and not SASS. You have a modular codebase that you can use on every single project. Color changes are quicker as you change them in one spot and your entire stylesheet changes. Typography changes are quicker. Dimensions are customizable in one spot. It will […]
It’s time to check that we have all modules and sub-modules imported into their index files. And then we’ll make sure that everything is imported into the style.scss main style file. We’ll talk about the DocBlock too.
There are various strategies available to you for handling the media query breakpoints including these options, which all do the same thing: The advantage to setting a new breakpoint in the _breakpoints.scss file is you make all changes to your breakpoints in one place. Now that we’ve integrated media queries into the styles at the component level, this technique means you are not searching through all of the partials to find where to change what you need. Therefore, using the Neat function new-breakpoint() allows you to be more efficient which will save you time in working with your new codebase. […]
For the screen sizes, let’s use this naming convention: $screen-size–smallest. The name is now more clear and it complies with BEM. Whew.
Let’s apply the BEM naming convention to the dimensions variables too.
Did you notice that we are repeating hex colors within the color variables file? Why? That’s not efficient and it’s redundant. Instead, let’s specify the colors at the top of the file and then use those variables within the configuration.
Just as we did with the typography, let’s apply BEM naming convention to the color variables, e.g. $button–hover-background-color.
Let’s start in the typography variables file and convert the current variable names to the BEM methodology. The convention we will use is: $primary-nav–font-size, where the block is $primary-nav and the modifier is the CSS property font-size. Within your IDE or editor, you will do a global search and replace. Follow along with me to ensure you have the right naming; although really this is your codebase, therefore, you can name these variables any way you want.
Let me introduce you to Block Element Modifier (BEM) methodology. The variable naming convention that we’ve been doing is a modification of BEM along with camelCase. This naming may cause the linters to yell back at us. Therefore, we are going to refactor the naming to comply with BEM. First though let’s walk through and look at what it is. While you may wonder why we are doing this, it’s good to stop and consider the quality of your code and then reassess. It’s a natural trajectory as you are advancing towards craftsman. Embrace refactoring as it helps you to […]
Let’s commit your changes and then push them to GitHub, GitLab, or Bitbucket. We’ll walk through the current commit in GitHub too to see what it looks like and how to read it. Here is where you can find the last version of the entire lab in the Know the Code’s GitHub repository: Get on Github.