Member Avatar for Tom Tolleson

Hi!

I'm working on a CSS for a site that features a menu bar. The menu is named 'tabbar.'

.tabbar {
}

The tabbar needs to appear in different colors on different pages. What is the best semantic naming solution for these variants?

I was thinking of using general descriptive terms such as

.tabbar_blue {}
.tabbar_yellow{}

Or should I list the RBG definition/webcolor specifically? Or is there a better way to do this?

Thanks!

Tom Tolleson

  • 5 Contributors
  • 4 Replies
  • 120 Views
  • 3 Weeks Discussion Span
  • Latest Post Latest Post by ndeniche

Dani AI

Generated

Tom asked for a semantic way to give the same tab component different page colors. Earlier suggestions from (use hex names), (use descriptive names) and (use images) all have merit, but they miss a more maintainable pattern that separates structure from skin. Also note ’s example looks like a typo — the "yellow" class uses a red hex (#ff0000) — a reminder to keep naming consistent with actual values.

A practical, modern approach is to keep one structural class for the tab component and drive colors from tokens that live on the page root (or a page theme class). This lets you change look-and-feel without changing component markup. Example:

:root { --tab-bg: #2f6a8a; --tab-fg: #ffffff; }

.tabbar {
  background: var(--tab-bg);
  color: var(--tab-fg);
}

/* Per-page theme */
.theme-sand { --tab-bg: #c9a76a; --tab-fg: #222; }
.theme-forest { --tab-bg: #2a6f3a; --tab-fg: #fff; }

If runtime CSS variables are unsuitable (older environments), use a build-time solution such as Sass variables or a naming/modifier system like BEM so styles stay predictable; see the BEM methodology for modifier patterns (https://en.bem.info/methodology/). For runtime theming and details on custom properties, see MDN (https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).

Two final tips: prefer semantic tokens (for example --brand/--accent) over literal color names so a redesign doesn’t force class renames, and always check color contrast against WCAG to keep tabs accessible (https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html). Images can work but add asset and maintenance overhead compared with CSS-driven themes.

Recommended Answers

All 4 Replies

Member Avatar for MidiMagic

It's up to you. There's no Internet police other than W3C, and they approve both methods.

I usually use the rrggbb method, because I want more control over the exact color. But I then often put a comment to the right of the CSS line with the name of the color I want (e.g. "puce").

Member Avatar for FC Jamison

For class names, it would be better to use your general descriptive names.

Member Avatar for Studio 2

.tabbar_blue {background-color:#0000ff}
.tabbar_yellow {background-color:#ff0000;}

??

Member Avatar for ndeniche

i rather use specific images for every button, with individual color for every different page...

that way i don't mess up colors and stuff... besides... if i don't like something from the button's image, i just have to change the image's appearance and it changes for every button... and, another plus, is that i can choose any design i want, since i create them myself...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.