CODEWITHSUNDEEP
htmlcss
Sammo4
Sammo4

Reputation: 1

Is there anything negative that could come with using a CSS file with every color?

Okay, so I want to have a CSS file that contains every color for use in HTML. I'm wondering if this is considered bad practice, and what the reasons behind that would be. My example code shows how I would set the CSS up to be used.

    .textColorRed    { color: red;    }
    .textColorBlue   { color: blue;   }
    .textColorYellow { color: yellow; }
    .textColorOrange { color: orange; }
    .textColorPurple { color: purple; }
    .textColorGreen  { color: green;  }
    .textColorBrown  { color: brown;  }
    .textColorBlack  { color: black;  }
    .textColorWhite  { color: white;  }
    .textColorGray   { color: gray;   }

    .textColorMagenta  { color: magenta;  }
    .textColorTan      { color: tan;      }
    .textColorCyan     { color: cyan;     }

I would use more colors, and add the hex codes for things after. It would take me awhile to set up, but after I did I'd have everything set in the class for use whenever I wanted without having to use it outside the HTML/CSS class

Upvotes: 0

Views: 61

Answers (3)

Volvox
Volvox

Reputation: 1649

Don't do this. Whole point of using CSS is to add abstract classes to elements and then style them together. Your approach is no different from using <div style="color:red">. In both cases to change style, for example all headers from red to green, you need to go to your HTML code and change it in all places.

It is much better to name your classes by their function .article-header or primaryTextColor (like @WillJenkins suggested). This way it's much easier to change color later and it provide much clearer meaning.

Lastly - don't think about performance or loading speed. This isn't an issue for now. Most important thing is to correctly structure your CSS and HTML.

Upvotes: 1

Will Jenkins
Will Jenkins

Reputation: 9887

Having read your answer to a comment, I'd say the main drawback will be that you'll waste a lot of time and be stuck with a webpage palette that you'll find hard to change.

A different question to the one you asked which might be more helpful would be something like "how best to handle multiple colors in webpage?".

There are many approaches to this problem (depending on preference, size of project etc), but a simple method would be to defined the default text color of your main document, then add a bunch of classes for different text styles that would over-write the default. Call them e.g. .primaryTextColor, secondaryTextColor and .accentTextColor and use them throughout your page. You can then define these classes and set your colours in one place, then you can change the look of your page quickly and easily.

Upvotes: 1

null
null

Reputation: 162

The only downside to this is if you are including the file everywhere without de-deduplicating the styles.

If you are making a normal, traditional, html/css website, you can get around this headache by only including it globally and referencing the classes from there.

If you are importing them via webpack to your files in say, react, just ensure that you don't have multiple copies of the css for every file as it will add to filesize in the end.

Other than that, no real concern in doing so!

Upvotes: 0

Related Questions