Unlock your potential with a Pro Membership
Here is where you propel your career forward. Come join us today. Learn more.
Apply BEM to Typography Variables
Lab: Part 2k – Finish Up the Sass Modules – Developer’s Genesis Starter Child Theme
Video Runtime: 10:50
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.
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
Hands off the keyboard. Web development starts by thinking first, then planning it out, and then coding it.
Episodes
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
