For example, I have the CSS code where I use the white colour a lot.
:root {
--color-white: #fff;
}
My question is whether it worths to declare colours like 'black' and 'white' as variables or I shall use default white and black CSS colour names? Which way is more efficient?
I doubt if efficiency is the driving force behind the use of CSS variables in the way suggested.
There is no need, and indeed it could cause confusion, to rename existing CSS colors.
CSS variables though make it easier to change things. For example, if you are trying out a theme with text in black on white and if there are several places in your CSS where you need to set color or background-color you could define --col: black and --bg: white and then use var(--col) etc in the relevant places in the style sheet.
If you then want to change them, all you have to do is redefine --col and --bg.
Related
I have a small question that can cause me a problem, I have a project where I set a variable to a color using SASS, here is here is my SASS file __colors.scss :
$wild-watermelon: #f55463;
When I use this color, I do something like this :
.container {
background-color: $wild-watermelon;
}
But I have something with I need to use the color but a little bit transparent, to do so, I have to use rgba(number, number, number, 0.75).
But I don't find this solution a propper one because if I want to change my theme coloring, I have to make changes in multiple files manually, not just one by changing my global variable.
I readed once a proposition, a solution let's say, suggesting that I use var function and I do something like this :
.container {
background-color: rgba(var($wild-watermelon),0.75);
}
It did not work of course, that is why I am here.
Any help would be much appreciated.
Try:
$wild-watermelon: #f55463;
.container {
background-color: rgba($wild-watermelon, 0.75 );
}
If you want to change the color, just change the hex code of the variable.
I would suggest to pick a more generic name though (e.g. $color-primary), just in case you do change the color scheme of your project in the future, so you don't have to change the variable name also. This way is more maintainable.
It's a basic question but I want to know when defining main colors for an application, should the color classes be named by their color:
pumpkin-orange, topaz, sky-blue,gray-color
Or by their meaning/function :
main-color, main-color-hover,secondary-color,link-color,disabled-color...
Select the names by meaning.
Colors could change, bud the meaning stays.
It would be nice if the community could agree on common names.
That way, you could use third-party code and their design would already be harmonised.
Here is an attempt:
https://github.com/nuxodin/css-variables-name-conventions
You should avoid naming css classes by color. Use a functional name instead. I will advise you to have a look to BEM naming convention . I think it is a good start to have a structured approach of css.
The best way to handle colors, especially in large, complex projects, is to use both, branding names and functional names, and combine them so that maintaining the project color palette becomes super easy.
Name all the colors you get from the design with their "color" names (red-bright, red-light, red-pale). This is independent from your project HTML, it is related only to the color palette that the designer chose as the current theme
Name each place in your project where any color is used with its functional name (link-color, banner-color, banner-border, banner-bg, footer-bg).
These names are independent from the visual design.
Only ever use functional names within the CSS code that is applied to HTML elements. The only exception is if you're using CSS custom properties (--var(name)) color names are stated once on the :root so functional names can use them.
Connect the functional names to the appropriate color name as per the visual design. Keep the color palette themes and the connection between functional and branding colors in the same file (for example _colors.scss).
Example (here I'm simplifying the syntax just to illustrate the color-naming point, in reality you need to use CSS custom properties, Sass or LESS variables syntax):
/* ===== Color theme—Bright ===== */
blue: #0000ff;
green: #008000;
dark-green: #006400;
neon-green: #00ff00;
neon-blue: #00ffff;
/* ===== Project color definitions ===== */
/* All places where color is specified in the project */
/* Currently using the Bright design palette */
link-color: blue;
banner-color: green;
banner-border: dark-green;
banner-bg: neon-green;
alert-status: green;
alert-status-border: dark-green;
button-bg: neon-blue;
button-border: blue;
footer-bg: neon-blue;
This way if you have to change anything color-related you only need to deal with this file, no need to sift through all of your CSS.
This process requires that each time you're adding new HTML to your project, with its CSS, you need to come up with the functional names for the new component, and only use functional names in your regular CSS. At the same time copy the newly added functional name to your colors file (_colors.scss) and define it with a branding color palette there.
After a design revamp
If a new visual design comes along you can easily switch all the functional names with the new color names and change the colors for the entire project in 5 minutes!
/* ===== Color theme—Bright ===== */
blue: #0000ff;
green: #008000;
dark-green: #006400;
neon-green: #00ff00;
neon-blue: #00ffff;
/* ===== Color theme—Pale ===== */
pale-blue: #bbbbff;
pale-green: #a1c8a1;
pale-dark-green: #506450;
pale-neon-green: #ddffdd;
pale-neon-blue: #ccffff;
/* ===== Project color definitions ===== */
/* All places where color is specified in the project */
/* Currently using the Pale design palette */
link-color: pale-blue;
banner-color: pale-green;
banner-border: pale-dark-green;
banner-bg: pale-neon-green;
alert-status: pale-green;
alert-status-border: pale-dark-green;
button-bg: pale-neon-blue;
button-border: pale-blue;
footer-bg: pale-neon-blue;
You should delete the unused color palettes from your compiled CSS for better performance. This means that if you're using CSS custom properties you should delete the old branding color variables from the :root and add the new ones.
But you can keep the different branding color palette definitions
in the _colors.scss for future reference, because only the color palette that is used in the functional names will end up in the actual CSS.
Similar to the question referenced below, I am trying to set the background and foreground color of the active tab label using theme colors. I mostly expected referencing the theme colors identifiers in CSS to not work. Is there a proper way to do so?
AngularJS Material Design : Different colors for different tabs in md-tabs
works:
.md-tab.md-active
{
background: green;
}
doesn't work:
.md-tab.md-active
{
background: accent;
}
The md-colors directive works with either value within an html tag, but they don't apply to the specific portions of md-tabs or md-tab that I would like:
<div md-colors="{color: 'accent', background: 'green'}">My Text</div>
What I'm trying to do is avoid hard coding the color that happens to be the accent (or could be primary) in the CSS. I'm thinking there is a way to programmatically determine the colors of accent/primary and then apply the colors. I haven't figured it out yet.
I think the issue is that you are trying to set the color to 'accent' which is not a color. As a variable it works in an Angular directive, but not is vanilla css.
We're using icomoon so that our icons are fonts and we can change their color easily. But, I'm having a problem styling an icon so that the default color is lightgrey and, when it has a primary class its color is yelloworange. Right now, my stylesheet looks like this:
i
&.icon-star.primary
color yelloworange
&.icon-star
color lightgrey
Each of these styles works on their own. But, when I have both of them, all of the icons are lightgrey and the icons with the primary class are not yelloworange. (I've checked the elements and they do have the correct class names).
Any help would be greatly appreciated. Thanks!
Each of these styles works on their own.
I doubt it, since yelloworange isn’t a CSS colour. If you look at Stylus’s rendered CSS, you’ll see that it doesn’t recognize the colour either (Stylus would have transformed it to its hex representation).
If you did have yelloworange defined as a custom value, make sure you still do!
The workaround that I've figured out is to use a standard class for lightgrey stars and primary class for yelloworange stars. It doesn't seem as elegant as only adding one class to the primary stars but it does work.
i
&.icon-star.primary
color yelloworange
&.icon-star.standard
color lightgrey
In my css, I have a table with zebra striping. e.g. white and light-blue.
Lets say I have three columns... what I'd like to do is be able to make maintain the zebra striping, and within css (no javascript) add shading/make the blues darker for each column.
Is that possible? Something like getting the "current" background color #AABBCC and then Adding #000011 to the current color to give me #AABBDD...
No idea if this is even possible, so just wondering. I'm just being lazy, as I don't want to have to redefine my zebra striping for every column/column group I may have.
Thanks
No, this is not supported with CSS, unless you were to use something like CSS expressions (which rely on Javascript).
However, if you're willing to use a preprocessor for your style sheets, you can use a library like LESS to introduce variables and perform addition like that. This example in particular uses Javascript as well, so that doesn't really fit the criteria either.
Haha, in pure CSS, no way. There are several "css-like" languages though that can do this: scss, less, stylus, etc. The gist is that you write code that gets compiled down to "real" CSS.
In stylus:
stripe( color )
&
background color
&:nth-child(odd)
background color + #000011
td.foo
stripe( teal )
generates...
td.foo {
background: #008080;
}
td.foo:nth-child(odd) {
background: #008091;
}