The answer to building a design system is to unify and manage elements such as colors, fonts, spacings, etc. through structured methods. 1. Start with the basic variables, define "atomic" variables such as main color, font size, spacing units, etc., which facilitates global adjustment; 2. Organize variables by module, group colors, fonts, etc., improve maintainability and facilitate topic switching; 3. Use variables instead of hard coded in components to ensure consistency and reduce maintenance costs; 4. Annotate or accompanying document descriptions to improve team collaboration efficiency and newcomers' speed.

Using CSS variables to build a design system is actually just one word: unification . It is not just about writing a few variables, but it is about structuring the basic elements of color, font, and spacing to keep the entire project consistent at the visual and code levels.

1. Start with the basic variables, don't be too complicated at the beginning

Many people want to abstract everything into variables at the beginning, but the variable file becomes longer than the stylesheet. In fact, at the beginning, you only need to define a few key "atomic" variables, such as main color, font size, and spacing units.

 :root {
  --color-primary: #007bff;
  --font-size-base: 16px;
  --spacing-unit: 1rem;
}

The advantage of this is that you can adjust the global style at any time without changing the value everywhere. For example, if you suddenly want to change the theme color, just change a place.

Suggested practices:

• Try to semanticize color naming, such as --color-primary instead of --blue
• Font size can be defined in proportion (such as base, lg, sm)
• The spacing units are uniformly used for multiples, such as 1rem , 1.5rem , etc.

2. Organize variables into modules and don't throw them all into:root

As the project grows bigger, you will find that all variables are placed in :root will become more and more difficult to maintain. At this time, you should consider organizing variables according to modules, such as colors, fonts, borders, shadows, etc.

 :root {
  --color-primary: #007bff;
  --color-success: #28a745;
}

/* Group by module*/
[data-theme="dark"] {
  --color-primary: #0056b3;
  --color-success: #1e7e34;
}

This structure is clearer and also facilitates theme switching. You can disassemble different modules into separate CSS files, such as _colors.css , _typography.css , and then import them in the main file.

3. Use variables in components instead of writing dead values directly

This is the easiest point to ignore. Although many people define variables, they still write margin: 16px; this hard code is directly written when writing components. This not only loses the meaning of the variable, but also causes maintenance difficulties.

The correct way to do it is:

 .button {
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
  font-size: var(--font-size-base);
  color: var(--color-primary);
}

In this way, no matter how the design is modified in the future, as long as the variable is updated, all used places will take effect automatically.

Common misunderstandings:

• Sometimes, for the sake of "fast", the dead value is directly written, and the cost of later changes is higher.
• Ignore some edge cases, such as the color of the button hover state is not controlled by variables

4. Comment on variables, don't just rely on naming and guessing the meaning

CSS does not have annotation function? If you are wrong, you can use /*! */ or write a document description. Especially when teamwork, unannotated variables are as troublesome as riddles.

 /*!
  Base spacing unit used throughout the system.
  All margins and paddings should use multiples of this.
*/
:root {
  --spacing-unit: 1rem;
}

You can also write a supporting Markdown document to list the functions, example values, usage scenarios, etc. of each variable, which is particularly helpful for newcomers to get started.

Basically that's it. Using CSS variables as a design system seems simple, but if you really need to do it well, you need to work hard on variable structure, naming specifications, and usage habits. It may feel troublesome at first, but once it is set up, the development efficiency and maintenance experience will be greatly improved.

The above is the detailed content of Building Design Systems with CSS Variables. For more information, please follow other related articles on the PHP Chinese website!