Value format specification

The formatting specifications for values in CSS are a crucial aspect of ensuring code consistency and maintainability. Proper value formatting enhances team collaboration efficiency, reduces style conflicts, and improves code readability. Below is a detailed explanation from multiple dimensions.

Color Value Formats

Hexadecimal colors should use lowercase letters and shorthand notation. When the color value is #aabbcc, prefer the shorthand form #abc:

/* Recommended */
.element {
  color: #f00;
  background-color: #0a8;
}

/* Not recommended */
.element {
  color: #FF0000;
  background-color: #00AA88;
}

RGB/RGBA color values should include spaces as separators, and opacity values should omit leading zeros:

/* Recommended */
.element {
  background: rgba(255, 0, 128, .5);
}

/* Not recommended */
.element {
  background: rgba(255,0,128,0.5);
}

Numeric and Unit Standards

Omit units for zero values, and non-zero values must explicitly include units. Percentage values should not include decimals:

/* Recommended */
.box {
  margin: 0;
  padding: 12px;
  width: 100%;
}

/* Not recommended */
.box {
  margin: 0px;
  padding: 12.0px;
  width: 100.00%;
}

When using the calc() function with viewport units, maintain spaces around operators:

/* Recommended */
.header {
  height: calc(100vh - 80px);
}

/* Not recommended */
.header {
  height: calc(100vh-80px);
}

Font and Text Values

Font stacks must include generic family names, and font sizes should use rem units as the baseline:

/* Recommended */
.body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 1.6rem;
}

/* Not recommended */
.body {
  font-family: "Microsoft YaHei";
  font-size: 16px;
}

Line height values should use unitless numbers to avoid inheritance issues:

/* Recommended */
.text {
  line-height: 1.5;
}

/* Not recommended */
.text {
  line-height: 24px;
}

Animation Property Values

Keyframe percentages should be integers, and time units should uniformly use seconds:

/* Recommended */
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
.anim {
  animation-duration: 0.3s;
}

/* Not recommended */
@keyframes slide {
  0.00% { transform: translateX(0); }
  100.00% { transform: translateX(100px); }
}
.anim {
  animation-duration: 300ms;
}

Function Parameter Formatting

For multi-parameter functions, align parameters with line breaks and include a space after commas:

/* Recommended */
.shadow {
  box-shadow: 
    1px 1px 5px rgba(0, 0, 0, .1),
    2px 2px 10px rgba(0, 0, 0, .2);
}

/* Not recommended */
.shadow {
  box-shadow: 1px 1px 5px rgba(0,0,0,.1),2px 2px 10px rgba(0,0,0,.2);
}

Media Query Breakpoints

Use predefined variables for breakpoint values to avoid magic numbers:

/* Recommended */
:root {
  --breakpoint-md: 768px;
}

@media (min-width: var(--breakpoint-md)) {
  .grid {
    display: flex;
  }
}

/* Not recommended */
@media (min-width: 768px) {
  .grid {
    display: flex;
  }
}

Custom Properties

Variable names should use lowercase with hyphens for separation, and scoping should be clear:

/* Recommended */
:root {
  --primary-color: #3498db;
}
.button {
  background-color: var(--primary-color);
}

/* Not recommended */
:root {
  --primaryColor: #3498db;
}
.button {
  background-color: var(--PRIMARY_COLOR);
}

Browser Prefix Handling

Use tools like PostCSS to automatically add prefixes instead of manual coding:

/* Not recommended for manual writing */
.element {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

Special Value Handling

Global keywords like initial, inherit, and unset should include comments explaining their purpose:

.reset {
  all: unset; /* Use when explicitly resetting inherited styles */
}

Responsive Image Handling

The srcset attribute should clearly specify width descriptors and pixel density descriptors:

<img src="small.jpg" 
     srcset="medium.jpg 1000w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 50vw">

Modern CSS Feature Detection

When using the @supports rule, ensure full property and value detection:

/* Recommended */
@supports (display: grid) {
  .container {
    display: grid;
  }
}

/* Not recommended */
@supports (grid) {
  .container {
    display: grid;
  }
}