Post

Css Style To Web App

Posted
By Joey
5 min read

🎨 Choosing Your CSS Color Strategy: Static Values vs. Dynamic Variables

When building a modern web application, color is fundamental to your design language. But how you manage those colors in your code can be the difference between a clean, maintainable project and a “find and replace” nightmare.

Let’s explore the two primary methods: the traditional static (or “compiled”) approach and the modern dynamic (or “runtime”) approach using CSS Custom Properties (Variables).

1. The “Compiled” Approach: Static Color Values

This is the most traditional way to write CSS. You simply write the color value (like a hex code, rgb(), or hsl()) directly into your style rules.

When we say this value is “compiled,” we mean it’s fixed and static. When your app’s CSS is built or loaded by the browser, that color is locked in. To change it, you have to find every instance of that color in your CSS and manually edit it.

Example: The Static Mess

Imagine you have a primary brand color, #4A90E2 (a nice blue). Your CSS might look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/* static-colors.css */

.main-header {
  background-color: #4A90E2; /* Our brand color */
  color: #FFFFFF;
}

.primary-button {
  background-color: #4A90E2; /* Our brand color again */
  color: #FFFFFF;
  border: 1px solid #357ABD; /* A darker shade */
}

.sidebar-link:hover {
  color: #4A90E2; /* And again... */
  text-decoration: underline;
}

/* ...and so on, 50 more times... */

The Problems with This Approach

  • đźš« Poor Maintainability: What happens when your marketing team decides to rebrand, and the new primary color is #D0021B (a red)? You now have to find and replace every single instance of #4A90E2. You might even miss one, or accidentally replace a different blue that just happened to be the same hex code.
  • đźš« No Theming: How would you implement a dark mode? You’d have to write an entirely separate set of rules for every single element, overriding every color. This doubles your CSS and is extremely brittle.
  • đźš« Inconsistency: It’s easy for developers to introduce slight variations (#4a90e2, #4A90E2, rgb(74, 144, 226)) that all look the same but are technically different, making the code base messy.

2. The “Runtime” Approach: CSS Variables (Custom Properties)

This is the modern, flexible, and professional way to handle styling. Instead of hard-coding values, you define a reusable variable in a central place. The browser then “picks up” this variable’s value at runtime (meaning, as it’s rendering the page).

This means the value can be read, updated, and changed while the user is on the page, all without reloading.

Variables are defined using the --variable-name syntax and used with the var() function. The best practice is to define global variables inside the :root selector, which represents the <html> element.

Example: The Dynamic Solution

Let’s refactor our previous example using CSS variables.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/* dynamic-colors.css */

/* 1. Define all our colors in one central place */
:root {
  --color-primary: #4A90E2;
  --color-primary-dark: #357ABD;
  --color-text-light: #FFFFFF;
  --color-text-main: #333333;
}

/* 2. Use the variables throughout the stylesheet */
.main-header {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}

.primary-button {
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border: 1px solid var(--color-primary-dark);
}

.sidebar-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

The Benefits of This Approach

  • âś… Excellent Maintainability: If the brand color changes, you only have to change it in one place: :root. Every single element that uses var(--color-primary) will instantly update.
  • âś… Effortless Theming: This is the killer feature. You can easily create a dark mode by simply redefining the variables within a new class or media query.

Let’s see it in action.

✨ Killer Example: Adding Dark Mode

Look how easy it is to add a dark theme. We don’t touch any of our component styles (like .primary-button). We just provide new values for our variables when a dark-mode class is on the body.

1
2
3
4
5
6
7
8
9
10
11
12
13

/* Add this to the end of your dynamic-colors.css */

body.dark-mode {
  /* Redefine the variables for this context */
  --color-primary: #5AB9EA; /* A lighter blue for dark BG */
  --color-primary-dark: #4A90E2;
  --color-text-light: #121212; /* For light buttons */
  --color-text-main: #EFEFEF; /* Main page text */

  /* We also need to define base styles */
  background-color: #121212;
  color: var(--color-text-main);
}

Now, if you add the class dark-mode to your <body> tag (usually with a little JavaScript), your entire site’s theme flips instantly. All the components defined with var() will “pick up” the new values.

3. Comparison and Best Practices

FeatureStatic (“Compiled”) ColorsDynamic (CSS Variables)
MaintainabilityPoor. Requires “find and replace.”Excellent. Edit in one place.
ThemingVery Difficult. Requires overriding every rule.Easy. Redefine variables for a new theme.
Readabilitybackground-color: #4A90E2; (What is this?)background-color: var(--color-primary); (Clear intent.)
JavaScript InteractionNo. Cannot be read or set by JS.Yes. Can be read and changed with JS.
Browser SupportUniversal.Excellent (supported in all modern browsers).

Best Practices for CSS Variables

  1. Be Semantic: Name variables based on their purpose, not their color.

    • Bad: --bright-blue: #4A90E2;
    • Good: --color-primary: #4A90E2;
    • Why? Because in dark mode, --color-primary might become a light blue, and the name --bright-blue would be confusing.

  2. Use Fallbacks: The var() function can take a second parameter: a fallback value to use if the variable isn’t defined.

    • color: var(--color-primary, #333333);

  3. Organize in :root: Keep all your global color variables in the :root pseudo-class at the top of your main stylesheet. This creates a “single source of truth” for your design system.

Conclusion

While writing static color values is fine for a tiny one-page project or a quick demo, you should use CSS Custom Properties (Variables) for any serious application.

The “compiled” static approach is rigid and creates technical debt. The “runtime” variable approach gives you the maintainability, flexibility, and power needed to build modern, themeable, and scalable user interfaces.

This post is licensed under CC BY 4.0 by the author.