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
Keep It Simple, Stupid (KISS) - the best kiss you'll get in code.
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