Indentation and formatting

The Importance of Indentation and Formatting

Good indentation and formatting are the foundation of readable CSS code. Proper indentation clearly shows the hierarchical relationship between selectors and declaration blocks, while consistent formatting standards facilitate team collaboration and maintenance. Below, we explore the indentation and formatting standards in CSS from multiple dimensions.

Basic Indentation Standards

CSS recommends using 2 spaces as the standard indentation unit. Compared to tabs, spaces display more consistently across different editors and environments. Example:

.selector {  
  property: value;  
  property: value;  
}  

When nesting rules, each level of nesting increases the indentation by one level:

.parent {  
  property: value;  

  .child {  
    property: value;  
    
    &::before {  
      property: value;  
    }  
  }  
}  

Rules within media queries should also maintain the same indentation:

@media (min-width: 768px) {  
  .element {  
    property: value;  
  }  
}  

Declaration Block Formatting

Each declaration block should follow this format:

• The opening brace should be on the same line as the selector.
• The closing brace should be on its own line.
• Include one space after the colon.

Correct example:

.selector {  
  margin: 0;  
  padding: 1em;  
}  

Incorrect example:

.selector  
{  
margin:0;  
padding:1em }  

Rules with Multiple Selectors

When a rule contains multiple selectors, each selector should occupy its own line:

.selector1,  
.selector2,  
.selector3 {  
  property: value;  
}  

Order of Property Declarations

Although the order of properties does not affect functionality, maintaining a consistent order improves readability. It is recommended to group properties in the following categories:

1. Layout properties (display, position, etc.)
2. Box model properties (width, margin, etc.)
3. Visual properties (color, background, etc.)
4. Typographic properties (font, text-align, etc.)
5. Other properties

Example:

.element {  
  /* Layout */  
  display: flex;  
  position: relative;  
  
  /* Box model */  
  width: 100%;  
  margin: 0 auto;  
  
  /* Visual */  
  background-color: #fff;  
  border: 1px solid #ddd;  
  
  /* Typography */  
  font-size: 16px;  
  line-height: 1.5;  
}  

Comment Formatting

CSS comments should clearly mark sections and purposes:

• Block comments divide large sections of code.
• Inline comments explain special rules.

/* ======================  
   Main Navigation Styles  
   ====================== */  
.nav {  
  /* Fix for IE11 flexbox bug */  
  flex: 1 0 auto;  
}  

Indentation in Media Queries

Media queries should maintain the same indentation level as regular code:

.container {  
  width: 100%;  

  @media (min-width: 768px) {  
    width: 750px;  
  }  

  @media (min-width: 992px) {  
    width: 970px;  
  }  
}  

Special Formatting for Preprocessors

When using Sass/Less, pay special attention to indentation in nested rules:

.parent {  
  color: red;  

  .child {  
    padding: 1em;  

    &:hover {  
      color: blue;  
    }  
  }  

  &--modifier {  
    border: 1px solid;  
  }  
}  

Line Breaks for Long Property Values

When property values are too long, break lines after commas and indent:

.selector {  
  background-image: linear-gradient(  
    to right,  
    rgba(255, 255, 255, 0.9),  
    rgba(255, 255, 255, 0.1)  
  );  
  box-shadow:  
    1px 1px 5px 0 rgba(0, 0, 0, 0.2),  
    2px 2px 10px 0 rgba(0, 0, 0, 0.1);  
}  

Vendor Prefix Alignment

Vendor prefixes should be aligned, with the standard property placed last:

.selector {  
  -webkit-transform: translateX(10px);  
     -moz-transform: translateX(10px);  
      -ms-transform: translateX(10px);  
       -o-transform: translateX(10px);  
          transform: translateX(10px);  
}  

Spacing Between Code Blocks

Leave one blank line between related rule groups and two blank lines between unrelated rule groups:

/* Base button styles */  
.btn {  
  padding: 0.5em 1em;  
  border-radius: 4px;  
}  


/* Primary button variant */  
.btn-primary {  
  background-color: blue;  
  color: white;  
}  

.btn-secondary {  
  background-color: gray;  
}  

File Organization Structure

In large projects, CSS files should be divided by components, with the following internal order:

1. Variable declarations
2. Reset/base styles
3. Layout styles
4. Component styles
5. Utility classes
6. Media queries

Example file structure:

/* Variables */  
:root {  
  --primary-color: #3498db;  
}  

/* Base styles */  
body {  
  font-family: sans-serif;  
}  

/* Layout */  
.container {  
  max-width: 1200px;  
}  

/* Components */  
.card {  
  border: 1px solid #eee;  
}  

/* Utilities */  
.text-center {  
  text-align: center;  
}  

/* Media queries */  
@media (max-width: 768px) {  
  .container {  
    padding: 0 1em;  
  }  
}  

Team Collaboration Standards

For team development, establish and adhere to unified formatting standards. Consider using the following tools:

• EditorConfig files for basic formatting
• Stylelint for code linting
• Prettier for automatic formatting

Example .editorconfig file:

root = true  

[*]  
indent_style = space  
indent_size = 2  
end_of_line = lf  
charset = utf-8  
trim_trailing_whitespace = true  
insert_final_newline = true  

Common Formatting Mistakes

Here are some common formatting issues to avoid:

1. Mixing spaces and tabs

/* Incorrect */  
.selector {  
    property: value;  /* Tab */  
  property: value;    /* 2 spaces */  
}  

2. No space between selector and opening brace

/* Incorrect */  
.selector{  
  property: value;  
}  

3. Multiple rules crammed together

/* Incorrect */  
.selector1 { property: value; }  
.selector2 { property: value; }  

4. Improper nesting in media queries

/* Incorrect */  
@media (min-width: 768px) {  
.selector {  
property: value;  
}  
}  

Formatting Considerations for Responsive Design

In responsive design, media queries should maintain clarity:

.element {  
  /* Base styles */  
  font-size: 16px;  

  /* Small screens */  
  @media (min-width: 576px) {  
    font-size: 18px;  
  }  

  /* Medium screens */  
  @media (min-width: 768px) {  
    font-size: 20px;  
  }  
}  

Formatting CSS Custom Properties

Custom properties (CSS variables) should follow this format:

:root {  
  /* Colors */  
  --color-primary: #3498db;  
  --color-secondary: #e74c3c;  

  /* Spacing */  
  --spacing-small: 8px;  
  --spacing-medium: 16px;  
}  

.element {  
  color: var(--color-primary);  
  margin: var(--spacing-medium);  
}  

Performance-Related Formatting Optimizations

While formatting itself does not affect performance, certain choices can help with optimization:

1. Omitting units for zero values

/* Recommended */  
.margin {  
  margin: 0;  
}  

/* Not recommended */  
.margin {  
  margin: 0px;  
}  

2. Using shorthand properties

/* Recommended */  
.padding {  
  padding: 10px 20px;  
}  

/* Not recommended */  
.padding {  
  padding-top: 10px;  
  padding-right: 20px;  
  padding-bottom: 10px;  
  padding-left: 20px;  
}  

Formatting Changes in Modern CSS

With the introduction of new CSS features, formatting must adapt:

1. Clear formatting for Grid layouts

.container {  
  display: grid;  
  grid-template-columns:  
    [sidebar] 200px  
    [content] 1fr;  
  grid-template-rows:  
    [header] 80px  
    [main] auto  
    [footer] 60px;  
}  

2. Calculations with custom properties

.element {  
  --base-size: 16px;  
  font-size: calc(var(--base-size) * 1.2);  
}  

Pros and Cons of Automation Tools

While automation tools ensure consistent formatting, note the following:

1. Over-formatting may disrupt intentional formatting.
2. Some special cases may require manual adjustments.
3. Teams should unify tool configurations.

Example Prettier configuration:

{  
  "printWidth": 120,  
  "tabWidth": 2,  
  "useTabs": false,  
  "semi": true,  
  "singleQuote": false,  
  "trailingComma": "none",  
  "bracketSpacing": true,  
  "jsxBracketSameLine": false,  
  "arrowParens": "avoid"  
}