Using CSS V2
When building or customizing a website, placing your CSS in the correct location ensures clean, maintainable, and efficient code. Here’s a concise, updated guide to modern CSS placement using Beaver Builder and WordPress.
Coding Standards
Create Code That Is Meaningful, Consistent, and Readable
1. Keep Your Code Organized
DON'T DO THIS:
DO THIS:
2. Comment Liberally
EXAMPLE:
3. Use Meaningful Names for Classes and IDs
4. Avoid Inline Styles
5. Avoid Targeting Auto-Generated Classes
CSS Guidelines
1. Use Shorthand Properties
DON'T DO THIS:
DO THIS:
2. Avoid Zero Units for px, em, rem
DON'T DO THIS:
DO THIS:
3. Use Variables for Consistency
CSS variables work similarly to classes, allowing you to define reusable values that can be applied consistently across your styles. For example, you can create a variable for a specific color and then reuse it throughout your project.
Why Use CSS Variables?
A practical use case is when customizing WooCommerce elements. Instead of manually applying the same color to every button, border, or other design element, you can define a single variable, such as --primary-color, and use it wherever needed.
EXAMPLE:
CSS Guidelines
EXAMPLE:
Styling Workflow
Follow this order of operations:
1. First, Use the CMS Customizer
2. Second, Use Module-Specific Classes
3. Finally, Write Custom CSS
Common Mistakes to Avoid
Modern Guide to Using CSS in Web Design
This guide explains how to use CSS effectively, focusing on modern practices for adding class names or IDs to modules and ensuring best practices in CSS styling.
Adding CSS IDs or Class Names to Elements
You can assign unique identifiers (IDs) or reusable class names to HTML elements (such as rows, columns, or modules) for targeted CSS styling.
Steps to Assign CSS IDs or Classes
ID Selectors: Rules and Best Practices
An ID Selector is used to uniquely target one specific element.
1. When to Use IDs:
2. Rules for IDs:
Example CSS for ID Selector:
3.Improper Use of IDs
One of the most common mistakes we observe when reviewing code and websites is the overuse or misuse of IDs. This can lead to serious issues in the structure and functionality of a webpage. Here are the key points to keep in mind:
- Do not use the same ID more than once on the same page
IDs are meant to be unique identifiers. Each ID on a page must be unique. Reusing the same ID multiple times can cause unexpected conflicts in JavaScript functionality and styling.
- Avoid random and illogical IDs
Creating IDs like #h1 or #h1-title is a bad practice. These IDs provide no meaningful context or clarity. Use descriptive names that reflect the element's purpose, such as #main-header or #article-title.
Class Selectors: Rules and Best Practices
A Class Selector allows you to style multiple elements with shared properties.
1. When to Use Classes:
2. Rules for Classes:
Example CSS for Class Selector:
Writing Efficient CSS Selectors
Follow these steps to write concise and effective CSS:
1. Use the Least Specific Selector Needed:
2. Organize Your Code:
3. Use Modern Techniques:
Example: Styling Nested Elements:
Task: Target all <h4> headings inside a specific module and make them blue.
Steps:
- Assign a class name to the module: green-heading.
- Use the following CSS:
Example: Applying Styles to Modules:
Note: Avoid using !important unless absolutely necessary, as it complicates debugging.
CSS Placement Best Practices
1. Restrict CSS to a Single Page Using Beaver Builder
If you want your CSS to apply only to specific pages or sections, this method is ideal. It keeps styles organized and prevents unnecessary global impact.
Steps:
- Open Beaver Builder editor.
- Select Layout CSS & JavaScript.
- Enter your custom CSS code in the CSS tab.
- Click Save.
When to Use:
- For CSS targeting specific rows, columns, or modules.
- For CSS unique to a single page template (e.g., forms, custom landing pages).
Avoid Using This For:
- Styles affecting global elements like header, footer, or sidebar.
Note: If you do apply CSS here, leave a comment in the WordPress Customizer (Appearance > Customize > Additional CSS) to inform future developers.
2. Apply CSS Site-Wide Using Beaver Builder Global Settings
For CSS that should apply across your entire website, Beaver Builder’s Global Settings is an option. However, using the WordPress Customizer is generally preferred for modern standards.
Steps:
- Open Beaver Builder editor.
- Click the Tools menu (top-left corner).
- Select Global Settings.
- Enter your custom CSS code in the CSS tab.
- Click Save and preview your site.
When to Use:
- If you want CSS applied to every page built using Beaver Builder.
Recommendation: Use the WordPress Customizer for true site-wide CSS as it’s more standardized and reliable.
3. Using the WordPress Customizer for Global CSS (Recommended)
The Customizer is the preferred method for adding global CSS in WordPress. It applies styles site-wide, whether or not Beaver Builder is in use.
Steps:
- Go to Appearance > Customize > Additional CSS.
- Enter your custom CSS code in the text area.
- Click Publish to save your changes.
Advantages:
- CSS added here is stored in the WordPress database.
- Ideal for site-wide and theme-specific styles.
- Accessible for future developers.
Best Practices:
- Add comments to explain your code.
- Use organized, modular CSS for better maintainability.
Example:
Summary of Recommendations
| Method | Use Case | Recommendation |
|---|---|---|
| Beaver Builder Page CSS | Single-page or module-specific CSS | Use only for isolated page styles. |
| Beaver Builder Global Settings | Site-wide CSS in Beaver Builder | Use with caution; prefer Customizer. |
| WordPress Customizer (Recommended) | Global site-wide CSS | Best for modern standards. |
Key Takeaways
- Always use the WordPress Customizer for global CSS.
- Use Beaver Builder’s local options for page-specific styling.
- Avoid redundancy by adding comments and organizing your CSS effectively.
Pro Tip: Store backup copies of custom CSS separately for reference or future updates.
Table of Contents