Unlock your potential with a Pro Membership
Here is where you propel your career forward. Come join us today. Learn more.
Introducing BEM
Lab: Part 2k – Finish Up the Sass Modules – Developer’s Genesis Starter Child Theme
Video Runtime: 07:28
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 continually improve and make your codebase even better.
Your functions are bloated. Put them on a diet. Think "skinny" and "as few lines as possible."
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
