The order of attribute writing

Author：Chuan Chen 阅读数：16030人阅读分类： CSS

The Importance of Property Writing Order

The order in which CSS properties are written directly impacts code readability and maintainability. A logical ordering makes stylesheets easier to understand and reduces confusion in team collaboration. Different teams may have different standards, but the core principle is maintaining consistency.

General Ordering Principles

Most guidelines recommend grouping properties by functionality, with the following common order:

Layout properties
Box model properties
Text-related properties
Visual decoration properties
Other properties

/* Example */  
.element {  
  /* Layout */  
  position: absolute;  
  top: 0;  
  left: 0;  
  z-index: 10;  

  /* Box model */  
  display: block;  
  width: 100px;  
  height: 100px;  
  margin: 10px;  
  padding: 20px;  

  /* Text */  
  font-family: Arial;  
  font-size: 16px;  
  line-height: 1.5;  
  color: #333;  

  /* Visual */  
  background: #fff;  
  border: 1px solid #ddd;  
  border-radius: 4px;  
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);  

  /* Other */  
  opacity: 0.9;  
  transition: all 0.3s ease;  
}

Detailed Category Explanations

Layout and Positioning Properties

These properties determine an element's position and behavior in the document flow:

.element {  
  position: relative;  
  top: 10px;  
  right: 20px;  
  bottom: 30px;  
  left: 40px;  
  z-index: 100;  
  float: left;  
  clear: both;  
  display: flex;  
  visibility: hidden;  
}

Box Model Properties

Control element dimensions and spacing:

.element {  
  width: 300px;  
  min-width: 200px;  
  max-width: 400px;  
  height: 150px;  
  min-height: 100px;  
  max-height: 200px;  
  margin: 10px 20px;  
  margin-top: 5px;  
  padding: 15px 25px;  
  padding-bottom: 10px;  
  box-sizing: border-box;  
  overflow: hidden;  
}

Typography-Related Properties

Handle text content display:

.element {  
  font-family: "Helvetica Neue", sans-serif;  
  font-size: 18px;  
  font-weight: bold;  
  font-style: italic;  
  line-height: 1.6;  
  text-align: center;  
  text-decoration: underline;  
  text-transform: uppercase;  
  letter-spacing: 1px;  
  word-spacing: 2px;  
  color: #2c3e50;  
  white-space: nowrap;  
}

Backgrounds and Borders

Define the visual appearance of elements:

.element {  
  background-color: #f8f9fa;  
  background-image: url("bg.png");  
  background-repeat: no-repeat;  
  background-position: center;  
  background-size: cover;  
  border: 1px solid #dee2e6;  
  border-top: 2px dashed #adb5bd;  
  border-radius: 8px;  
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);  
  outline: 2px solid #0d6efd;  
}

Interaction and Animation

Handle user interactions and dynamic effects:

.element {  
  cursor: pointer;  
  transition: all 0.3s ease-in-out;  
  transform: translateX(10px);  
  animation: slide 2s infinite;  
  opacity: 0.8;  
  filter: blur(1px);  
  will-change: transform;  
}

Handling Special Cases

Vendor Prefix Ordering

Vendor-prefixed properties should precede standard properties:

.element {  
  -webkit-transform: rotate(45deg);  
     -moz-transform: rotate(45deg);  
      -ms-transform: rotate(45deg);  
       -o-transform: rotate(45deg);  
          transform: rotate(45deg);  
}

Grouping Related Properties

Closely related properties can be grouped together:

.element {  
  /* Font-related */  
  font: 16px/1.5 "Segoe UI", sans-serif;  
  font-weight: 600;  
  font-style: italic;  

  /* Background gradient */  
  background: #fff;  
  background: linear-gradient(to right, #fff, #000);  

  /* Transition effects */  
  transition: opacity 0.3s, transform 0.5s ease-out;  
}

Recommended Automation Tools

Use tools to automate property ordering:

Stylelint: Enforces order via the declaration-block-properties-order rule
PostCSS Sorting: A PostCSS plugin with customizable ordering rules
VS Code Extensions: Such as CSScomb or Sort CSS

Example .stylelintrc configuration:

{  
  "rules": {  
    "declaration-block-properties-order": [  
      "position",  
      "top",  
      "right",  
      "bottom",  
      "left",  
      "z-index",  
      "display",  
      "flex-direction",  
      "justify-content",  
      "align-items",  
      "float",  
      "clear",  
      "width",  
      "height",  
      "margin",  
      "padding",  
      "font",  
      "color",  
      "background",  
      "border",  
      "animation",  
      "transition"  
    ]  
  }  
}

Team Collaboration Standards

When establishing team standards, consider:

Whether the base framework has existing guidelines (e.g., Bootstrap, Tailwind)
The existing style of historical project code
Compatibility requirements for new features
The level of automation support in development tools

Example team standard document snippet:

1. Layout properties first  
2. Box model properties next  
3. Text properties before content styling  
4. Visual decorations last  
5. Shorthand properties take precedence over longhand ones  
6. Animation-related properties are grouped together

Real-World Project Case Study

E-commerce product card styling example:

.product-card {  
  /* Layout */  
  position: relative;  
  display: flex;  
  flex-direction: column;  
  z-index: 1;  

  /* Box model */  
  width: 280px;  
  height: 380px;  
  margin: 15px;  
  padding: 20px;  

  /* Text */  
  font-family: "Amazon Ember", Arial, sans-serif;  
  font-size: 14px;  
  line-height: 1.4;  
  color: #0F1111;  
  text-align: left;  

  /* Background & borders */  
  background: #FFF;  
  border: 1px solid #DDD;  
  border-radius: 8px;  
  box-shadow: 0 2px 5px rgba(15,17,17,.15);  

  /* Interaction */  
  transition: box-shadow .2s ease;  
  cursor: pointer;  
}  

.product-card:hover {  
  box-shadow: 0 4px 10px rgba(15,17,17,.25);  
}

Performance Optimization Considerations

While property order doesn't affect rendering performance, it can:

Improve style reusability
Reduce redundant code
Simplify media query maintenance
Make it easier to identify unused styles

Example of property ordering in responsive design:

.component {  
  /* Base styles */  
  display: block;  
  padding: 10px;  
  font-size: 16px;  

  /* Tablet styles */  
  @media (min-width: 768px) {  
    display: flex;  
    padding: 20px;  
  }  

  /* Desktop styles */  
  @media (min-width: 1024px) {  
    max-width: 1200px;  
    margin: 0 auto;  
  }  
}

Historical Evolution and Trends

Early CSS specifications had no clear requirements for property order. As projects grew, various ordering approaches emerged:

Alphabetical order: Simple but illogical visually
Type grouping: Became the mainstream approach
Importance-based ordering: Critical properties first
Custom ordering: Tailored to project needs

Comparison of modern CSS framework ordering:

Framework	Ordering Characteristics
Bootstrap	Layout → Box model → Typography → Decoration → Other
Tailwind	Functional class grouping, atomic design
Foundation	Positioning → Display → Dimensions → Spacing → Visual