Home/ Questions/Q 45897
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T15:52:52+00:00

I just finished a medium sized web site and one thing I noticed about

  • 0

I just finished a medium sized web site and one thing I noticed about my css organization was that I have a lot of hard coded colour values throughout. This obviously isn’t great for maintainability. Generally, when I design a site I pick 3-5 main colours for a theme. I end up setting some default values for paragraphs, links, etc… at the beginning of my main css, but some components will change the colour (like the legend tag for example) and require me to restyle with the colour I wanted. How do you avoid this? I was thinking of creating separate rules for each colour and just use those when I need to restyle.

i.e.

.color1 {     color: #3d444d; }
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. That’s exactly what you should do.

    The more centralized you can make your css, the easier it will be to make changes in the future. And let’s be serious, you will want to change colors in the future.

    You should almost never hard-code any css into your html, it should all be in the css.

    Also, something I have started doing more often is to layer your css classes on eachother to make it even easier to change colors once… represent everywhere.

    Sample (random color) css:

    .main_text {color:#444444;} .secondary_text{color:#765123;} .main_color {background:#343434;} .secondary_color {background:#765sda;}

    Then some markup, notice how I am using the colors layer with otehr classes, that way I can just change ONE css class:

    <body class='main_text'>   <div class='main_color secondary_text'>     <span class='secondary color main_text'>bla bla bla</span>   </div>   <div class='main_color secondary_text>     You get the idea...   </div> </body>

    Remember… inline css = bad (most of the time)

    • 0