Divi CSS Workflow – Part II
In the previous article, we formulated two best practices for an optimized Divi CSS Workflow:
- Keep all of your custom CSS in one location.
This could be in CSS Hero, your Child Theme’s stylesheet or in the Custom CSS box in the Divi Theme Options panel.
- Add Custom CSS Classes to the section, row, or module you want to target.
When you add a custom CSS class to an element, it can be targeted uniquely. This adds a layer of flexibility should you need to rearrange its position in the page builder.
In this article, we suggest some additional best practices that help to bring consistency and organization to your workflow.
Class Naming Conventions
However, they can be quite confusing to learn for the beginner and don’t necessarily work well in a Divi context.
A much simpler concept and the one we recommend is BEM.
BEM stands for ‘Block Element Modifier’:
Block – a standalone entity that is meaningful on its own, such as ‘header,’ ‘menu,’ and ‘button‘
Element – part of a block that has no meaning on its own, except about the block, e.g. ‘header title,’ ‘menu item,’ and ‘list-item.’
Modifier – a flag on a block or an element which is used to change appearance or behavior, e.g. ‘color yellow,’ ‘size big,’ or ‘fixed‘
Although we will need to, on occasion, add CSS classes to markup in a code module, the vast majority of classes will be created for sections, rows, columns, and modules.
Therefore, we will mostly be working at the ‘block’ level.
In addition to the standard BEM methodology, we recommend appending block level names with the purpose or location of the element you are styling.
E.g. ‘.section_hero’ or ‘blurb_home’ or ‘map_contact’’
For variations and modifications that cannot be achieved with the page builder options, the classes can be further appended:
E.g. ‘.blurb_home_red’, ‘.map_contact_large’ , ‘.section_hero_red_overlay’
Additionally, there are certain situations where ‘helper classes’ can be extremely useful. These should be used sparingly, though, to avoid confusion, and only when they solve common problems.
A good example of this is when you need to vertically align elements inside of a column. Since this task is likely to be repeated on multiple elements, it makes sense to turn it into a helper class, rather than to use a modifier.
‘.vertical-align’, rather than ‘section_hero_vertical_align’.
Finally, to distinguish our custom CSS from that of the parent theme we will prefix all of our classes with a unique identifier:
E.g. ‘.lab_vertical_align’ , ‘lab_section_hero’ and so on.
Adhering to a class naming convention provides several benefits:
- It avoids specificity issues with the parent theme’s stylesheet
- It makes the code easy to read and semantically appropriate
- It keeps your stylesheet organized when working within a team.
Targeting Elements with CSS Selectors
A final point, worth noting, is the necessity of CSS selectors to target elements within modules.
Divi class names can only be added at the section, row, column and module level. They cannot be added to elements within the module unless of course, you are adding custom markup to a code module.
For example, it is possible to add a custom class to a testimonial module but, to target only the author text, further specificity is required:
It is worthwhile getting to grips with some of the basic CSS selectors to supercharge your skills. Understanding how to target elements within elements will give you a whole new ability to style your Divi designs in ways you previously thought impossible.
The Divi Builder provides some powerful tools for creating stunning websites. However, a sprinkle of CSS here and there is almost unavoidable. By adhering to a consistent CSS methodology, it’s easy to optimize your workflow and speed up development time.