Adding, Removing, or Replacing Existing CSS
July 15, 2020 | Beaver Builder, Beaver Themer, Tips & Tricks, WooCommerce, WordPress
CSS Should only be added when all other options have been exhausted. If the module you are using does not have the desired effects, if you have attempted to use other modules to achieve desired result, and if you have attempted the effect in the module, column, and the row settings and still are unable to get the end result, only then are you permitted to use CSS.
CSS can easily get out of hand, here are some good rules to stand by when you are working on a build that already has CSS in place.
Adding
When adding CSS you should already be following the proper CSS etiquette laid out in the Using CSS guide.
If no template has been added, please add it and place existing CSS within the correct areas of the template.
Please make sure you are adding your new CSS in the proper sections of the template and labeling them accordingly. For example, if you are adding new styles for mobile only, you need to add it to the media query for mobile. Do not add it at the bottom of all the existing CSS. This can cause confusion for future builders, and make it so the use of “!important” is needed.
You also need to make sure you are using appropriate labeling. i.e. Page name, description of section, etc. use this format:
/*---
PAGE NAME
Description of section
Media queries? Y/N
---*/Note: If you find that you simply need to leave a note about a general setting, you may do so in the CSS at the very top as long as it is commented out.
If you are adding a new media query, please make sure it follows the existing template structure and you are placing it in the correct hierarchy for screen sizes. Please also include a note as to why the media query was necessary. Please do not add media queries unless it is specifically requested, or there is an obvious need to sustain the design of the site.
Removing
If you find yourself being asked to remove certain styling within the CSS, ensure that you are only removing it from the desired area. Often we come across styling that does not have a class associated with it, which should not be happening, but alas it does. Make sure that the CSS you intend to remove does not effect any other elements on the site.
A good way to discover what might potentially be effected is to:
- Open a version of the site before removing the CSS.
- Comment out the lines in question and publish.
- Once the changes have been saved open a new version of the site in another window and compare.
- If the styling has been removed from only the item in question, proceed to deleting those lines.
- If it has effected other items, assign those items a class, and adjust the CSS to call to that class instead.
Did you find something that you know is not doing anything or is commented out?
If you happen across some CSS that is no longer being used and you know it will not be used again in the future, the module can do what the CSS is doing for example, you are welcome to simply delete this section of CSS.
If you find that something may have a future use, but is not needed now, please comment it out and include a note as to what the CSS is supposed to do.
If you have found that the CSS is already commented out, but could possibly be used in the future, leave it in place. If it does not have a note, please add one. If you know for sure this commented out CSS will not be used again, please remove it.
Did you replace a module that was being targeted by CSS?
If you have found a module setting to achieve the desired end result, please check the CSS for any styling that may have been applied and remove it. This will help keep the CSS clean an organized.
Replacing
Often we receive requests to modify an existing style. Your first step should always be to see if the module will accommodate the change being requested, or if an alternate module would be a better route.
If the change cannot be done in the module, and you need to adjust the CSS in place, make sure you are only adjusting for the item in question by following the steps for removing CSS. Once you have determined that the CSS in question is only targeting the item that needs to be adjusted, make the requested adjustments. Do not add any new CSS to the bottom of the template where you would need to use an !important tag.
Did you find multiple sections of CSS doing the same thing?
If you found that there is a duplicate style in place, please consolidate this information into the correct sections of the template. The goal is to ensure that the next builder to review the CSS will be able to easily find and adjust the styling.