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
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.
Psst….I’m sorry that I didn’t have you do this from the beginning. However, it is a good exercise of refactoring for you. So we’ll go with that notion. hehe
You get WET when you swim. Stay DRY when you code.
Total Lab Runtime: 01:19:50
- 1 Introducing BEMpro 07:28
- 2 Apply BEM to Typography Variablespro 10:50
- 3 Apply BEM to Color Variablespro 10:57
- 4 Refactor Colorspro 04:00
- 5 Apply BEM to Dimensions Variablespro 07:47
- 6 Apply BEM to Screen Sizes Variablespro 02:26
- 7 Neat Breakpointspro 16:10
- 8 Main Stylespro 13:54
- 9 Git Commit and Congratulationspro 06:18