Divi CSS Workflow – Part I
In Divi 3.0 there are plenty of places to put your CSS. It can be added to sections, rows, columns, modules and has a special area in the theme options. Additionally, if you are using a child theme, CSS can be inserted in the stylesheet.
However, with all these choices it can be difficult to decide the best CSS workflow for your Divi designs.
In this article, we look at some of the nuances of Divi’s CSS and suggest some best practices for an optimized workflow.
Where is the best place to store my custom CSS?
On the one hand, it is super convenient to add CSS in the page builder, but on the other hand, this can cause confusion when trying to remember where exactly that specific rule is located.
For simplicity sake, we recommend putting all of your custom CSS in one location. This makes it much easier to overcome specificity issues and keep your rules clean and organized.
When it comes to the which location you choose this is really down to personal preference.
Personally, I’m a big fan of CSS Hero’s ‘Inspector Pro,’ as it allows you to add custom rules on-the-fly so you can see the changes happen ‘live.’
A great alternative, however, is your child theme’s custom stylesheet. This allows you to overwrite the rules of the parent theme while remaining safe from future parent theme updates.
If you are not using a child theme or CSS Hero, the next best place would be the ‘Custom CSS’ box in the Divi ‘Theme Options’ panel:
What CSS Classes do I use to target sections, rows or modules?
Let’s start out by explaining what you should not do. I recently made this mistake myself and spent a long time rewriting all of my custom CSS 😉
Divi uses a dynamic class naming convention for sections, rows, and modules.
This works in a top to bottom fashion specific to the element in use. For example, if we add two sections to our layout, the one that is closest to the top will use the CSS class:
And the one below it:
However, these classes are added dynamically, based on the location of the section in the order of elements.
So, if we were to style .et_pb_section_0 in our custom stylesheet, it would be easy to believe our custom styles apply uniquely to that element.
But this is not the case…
If we then swapped the sections around, so that the one of the top is now on the bottom, our styles would apply to the wrong section!
This is why the ‘Custom CSS’ tabs of the sections, rows and modules do not allow you to write CSS declarations, only CSS properties.
That way, if you move a section, row or module within the builder your CSS rules will still apply, specifically to that section, row, or module.
Luckily, Divi not only allows us to write CSS properties in every element but also add custom classes:
These classes are transportable when and if you adjust the order of elements.
If you target an element, using the Custom CSS Class you added to a section, row, or module, and then move that element to a new position within the Divi builder, your styles will still apply to that unique element.
There are many options for custom CSS when it comes to Divi. From our current research and testing we have come up with the following best practices:
- Keep all of your custom CSS in one location, rather than scattered throughout sections, rows or modules.
- Add custom CSS classes to the section, row, or module you want to target.
In part two we will take a deeper look at the Divi CSS workflow, focusing on class naming conventions and specificity.