All of your colors for the site’s branding and color scheme go into the utility variables module. You assign the color to a variable and then use the variable within your styles. The advantage is: for each project, you have just one place to change the entire site’s branding. It will save you time and frustrations. Bam, that’s a great thing!
In this episode, you’ll think about different variable naming strategies. You hear me walking through various alternatives until we find the one that seems to work better than the others. But like PHP variable naming, you have flexibility to name it what you want by what makes sense to you. I’m helping you to think about the process and the why of it.
Credit: Jackie D’Elia and I were chatting. She convinced me to change how I name colors, i.e. from the color itself to component based. For example, I used to do an
$orange which then I used everywhere. Ok, but then when I switch to a new project or site, I have to change those when the color palette changes. That’s not smart. So in this episode, I’m showing you how to name by component with this naming convention
BEM Modified Naming Convention
The naming convention that I’m showing you is a modification of the Block Element Modifier (BEM) methodology. The typical Sass-y way of naming variables is with hyphens. When running a linter, you will need to select that you want the BEM model. You can rename the variables to use a combination of hyphen and underscore to fully comply with BEM. We may even do this in the final episode of this Part 2 series. So instead of camelCase naming, e.g.
$primaryNav__BackgroundColor, you would do
Your functions are bloated. Put them on a diet. Think "skinny" and "as few lines as possible."
Total Lab Runtime: 02:16:49
- 1 Lab Introductionfree 02:17
- 2 The Why of Modular CSSfree 11:50
- 3 The How - Meet Sassfree 08:15
- 4 Overview of the Theme's Sass Architecturepro 08:39
- 5 Layout the Sass File Structurepro 17:14
- 6 Color Variablespro 10:11
- 7 Start Migrating the Stylesheet to Sasspro 11:43
- 8 Migrate Structure and Layoutpro 10:18
- 9 Migrate Common Classespro 04:34
- 10 Migrate Widgetspro 08:43
- 11 Migrate Pluginspro 08:12
- 12 Migrate Skip Linkspro 02:24
- 13 Migrate Site Headerpro 10:09
- 14 Migrate Site Navigationpro 07:34
- 15 Migrate Content & Sidebarspro 06:37
- 16 Migrate Site Footer & Widgetspro 03:08
- 17 Handling Media Queriespro 05:01
- 18 Wrap it Upfree 00:00