All geek questions in one place

CSS (Stylesheet) Organization and Colors

I just finished a medium sized website, and one thing I noticed about my css organization was that I have a lot of hard coded color values. This is clearly not very convenient for maintainability. As a rule, when I create a site, I choose 3-5 primary colors for the theme. I end up setting some default values ​​for paragraphs, links, etc ... at the beginning of my main css, but some components change color (like a legend tag) and require me to use the style I need . How do you avoid this? I was thinking of creating separate rules for each color and just use them when I need to reinstall.

i.e.

.color1 { color: #3d444d; }
+4
source share
13 answers

What you have to do.

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

You should almost never hardcode any css to your html, it should all be in css.

Also, something that I started to do more often was to add your css classes to eachother, to make it even easier to change colors, once ... represented everywhere.

Example (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 use the color layer with otehr classes, so 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)

+2
source

One thing I did here is to break my palette declarations from another style / layout layout, grouping colored elements in lists, for example.

 h1 { padding... margin... font-family... } p { ... } code { ... } /* time passes */ /* these elements are semantically grouped by color in the design */ h1, p, code { color: #ff0000; }

In the preview, JeeBee's suggestion is a logical continuation of this: if it makes sense to process your color declarations (and, of course, this may relate to other style problems, although color has unique properties of a fixed layout), you might consider pulling it out to a separate css file, yes. This makes it easy to “hot swap” only theme variations only by targeting the colorxxx.css profile that you’ve included.

+3
source

See: Create a variable in the .CSS file for use in this .CSS file

So, you have three main options:

  • Use the macro pre-processor to replace constant color names in style sheets.
  • Use client-side scripts to customize styles.
  • Use one rule for each color, listing all the selectors for which it should apply (my fav ...)
+1
source

Perhaps pull all the color information into one part of your stylesheet. For example, change this:

 p .frog tr.mango { color: blue; margin: 1px 3em 2.5em 4px; position: static; } #eta .beta span.pi { background: green; color: red; font-size: small; float: left; } // ...

:

 p .frog tr.mango { color: blue; } #eta .beta span.pi { background: green; color: red; } //... p .frog tr.mango { margin: 1px 3em 2.5em 4px; position: static; } #eta .beta span.pi { font-size: small; float: left; } // ...
+1
source

I sometimes use PHP and make the file something like style.css.php. Then you can do this:

 <?php header("Content-Type: text/css"); $colour1 = '#ff9'; ?> .username {color: <?=$colour1;?>; }

Now you can use this color wherever you want, and you need to change it only in one place. This also works for values ​​other than colors.

+1
source

You may have a colours.css file containing only colors / images for each tag. Then you can change the colors by simply replacing the file, or by creating a dynamically created CSS file, or having different CSS files, and choose based on the URL / subdirectory of the website / etc.

Or you can have color marks when writing, but then your HTML turns into:

<p style = "body gray"> Blah </p>

CSS should have a function in which you can define values ​​for things like colors that you want to match in style but are defined in only one place. However, search and replace.

0
source

So, you say you don’t want to go back to your CSS to change color values ​​if you find another theme with color that might work better?

Unfortunately, I see no way around this. CSS defines styles, and color is one of them, the only way to change it is to go into css and change it.

Of course, you could create yourself a small program that allows you to change the css file by selecting a color wheel on a web page or something like that, which then writes that value to the css file using the filesystemobject file or something else, but that much more work than is required for certainty.

0
source

As a rule, it is best to find and replace the colors that you change.

Anything more powerful than this will be more complex with few advantages.

0
source

CSS is not your answer. You want to look into abstraction on top of CSS, such as SASS . This will allow you to define constants and generally clear your css.

Here is a list of CSS Frameworks .

0
source

I keep a list of all the colors that I used at the top of the file.

0
source

When CSS is served by a server side script, for example. PHP, as a rule, encoders make CSS as a template file and replace colors at runtime. This can be used so that users can select a color model.

Another way to avoid parsing this file every time (although the cache should take care of this), or just if you have a static site, you need to make such a template and analyze it using some script / static template mechanism before uploading it to the server.

Search / replace can work, except when two initially different colors turn out to be the same: after that they are difficult to separate !: -)

If I'm not mistaken, CSS3 should allow such a parameterization. But I won’t hold my breath until this feature is available in 90% of browsers visiting the network!

0
source

I like the idea of ​​splitting color information into a separate file, no matter how I do it. I would accept a few answers here if I could, because I like Josh Millard. I like the idea of ​​having separate color rules, although a particular tag may have different colors depending on where it occurs. Perhaps a combination of both of these methods would be nice:

 h1, p, code { color: #ff0000; }

and then also

 .color1 { color: #ff0000; }

when you need to reinstall.

0
source

This is where SASS comes to your aid.

0
source

Source: https://habr.com/ru/post/1276935/

More articles:


All Articles