Creating a scalable application involves having a solid foundation, and CSS plays a vital role in this. This blog will take you through the principles of an opinionated CSS styleguide, inspired by some of the best practices in the industry.

Table of Contents

• Terminology
• Formatting
• Syntax

Terminology

Let’s familiarize ourselves with some essential terms from this styleguide.

Rule Declaration

A “rule declaration” refers to a selector, which is essentially the name given to elements in your HTML, along with the styles explicitly assigned to them. Here’s a simple example:

sass.avatar   
    font-size: 18px;  
    line-height: 1.2;

Selecting Elements

Selectors are the specific elements being targeted in your DOM tree. You can have class selectors, ID selectors, or attribute selectors. For instance:

sass.avatar   
    font-size: 20px;

#id   
    font-size: 20px;

Properties

Properties are the style attributes assigned to selected elements, defined in key-value pairs.

sass.avatar   
    background: rgb(255,255,255);  
    color: rgb(33,33,33);

Formatting

Good formatting is crucial to keeping your CSS clean and understandable.

Spacing

Follow these spacing rules to ensure clarity:

• Separate CSS rules with commas and ensure each rule is on a new line.
• Leave a space after the colon : but not before.
• Always place one property per line, and use two new lines to separate declaration blocks.

Nesting

Avoid nesting elements extensively. Think of nesting like stacking blocks; too many can make the structure unstable. Keep it simple—use nesting primarily for pseudo-classes or direct parent-child interactions:

sass.avatar   
    font-size: 12px;  
    :hover    
        font-size: 11px;  
    .avatar__link     
        color: rgb(210,22,221);
    .avatar__photo  
        height: 20px;

Quotes and Comments

Use single quotes for strings as they help to differentiate elements clearly. Avoid using comments excessively; only use them for explaining complicated code:

sass.avatar   
    height: 20px;  
    * this is a hack to fix click behavior on Safari 6.0 *  
    pointer-events: none;

Syntax

Understanding the proper syntax for your components is key. Think of components as bricks of a building—each has its purpose but must fit together perfectly.

Components

The base structure of your component should be written in kebab case:

sass.my-component   
    font-size: 20px;

Descendants

For descendant elements, they should follow this structure:

html
  
    
  
          
    
  
    
  
    
  

Modifiers and States

Modifiers adjust the base component’s appearance. They should be structured as follows:

sass.btn   
    padding: 20px 10px;  

.btn--primary    
    background: rgb(148,146,231);

While state modifications use:

sass.tweet   
    height: 90px;  

.tweet.is-expanded   
    height: 200px;

Troubleshooting

If you encounter issues with your CSS not appearing as expected:

• Check for typos in your selectors and ensure they match your HTML structure.
• Ensure there are no conflicting styles within your stylesheet.
• If styles are not applying as expected, verify that your CSS file is correctly linked to your HTML.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.