6 ms·

Variables though, I can't see how you can go without them. Being able to change 6 characters and have the entire site theme change for a client is great.

nostrademons 11y ago
Sure, but there are plenty of other ways to achieve the same effect. One I used for many years was to run your CSS through the same templating engine that generates your HTML. Wait a few more months and you might also get native CSS vars: http://caniuse.com/#feat=css-variables http://caniuse.com/#feat=css-variables
- Lazare 11y ago
  > One I used for many years was to run your CSS through the same templating engine So...a preprocessor? :)
  - nostrademons 11y ago
    That you have to use anyway.
ino 11y ago
Is there a css3 variables compiler/processor/translator to plain css without variables? It can be a copy-paste tool on the internet or whatever, no preprocessor or build tools required. You work directly with styles.css3 in the browser and when you're done you transform it to old style without variables, so it works in older browsers. That's what I wanted to do last week but as I couldn't find such a tool, at the end I did a search/replace. It was a small project obviously.
- cobalt 11y ago
  i think that is what postcss does
  - floatboth 11y ago
    PostCSS parses CSS, runs plugins and outputs CSS. Yep, of course there is a plugin that does variables! And the "Myth" tool, mentioned in a comment here, is just a pack of PostCSS plugins. And the OP uses PostCSS. Apparently, a lot of people here didn't read that part...
- jack_jennings 11y ago
  This might be what you're looking for: https://github.com/segmentio/myth https://github.com/segmentio/myth
  - ino 11y ago
    Thanks, this looks good!
myblake 11y ago
Yeah this is the one that I don't understand, his argument about wet css being more readable doesn't even make sense in the case of "#ec3f5d" vs "$red", let alone the fact that in a big project not having one place to change this can be a nightmare.
- SixSigma 11y ago
  how about when $red = #FFFFFF
  - iamben 11y ago
    You're arguing for the sake of it- it was just a bad example. If $red was $leadcolor or something similar, you can define it at the top, comment it to explain what it is, then change it across the whole site in 10 seconds (including the borders which are defined as variables 5% darker and lighter) when the client says "I like it, but the red needs to 'pop' more, do you know what I mean?"
    - SixSigma 11y ago
      I'm not, I have seen code like this where a variable is named after its value when created and then colours swapped out later.
      - Silhouette 11y ago
        You can write bad code in any language, as the saying goes. However, I've seen projects with a few CSS variables defining the base colours for their scheme and perhaps some tints and shades, and then a second layer of variables defined in terms of the base ones but with more role-based names like heading text colours and focused primary button backgrounds and so on. It's a simple, practical model that has proved very easy to work with and in some cases has stood the test of time for quite a few years now.
      - jjnoakes 11y ago
        So you are arguing against variables in any programming language. int one = 2;
j4kp07 11y ago
I would never allow a design get that far into the process and then allow a client to start testing various colors. That is just asking for trouble.
- iamben 11y ago
  But we've all been in a situation where it's got 'that far' and someone more senior has got involved and done exactly that. Plus, it makes designing in the browser waaaay easier.
- Silhouette 11y ago
  Have you never implemented a design yourself, and then found that when you looked at the results as a whole, it didn't work quite as well as you hoped from the original concept work? Have you never A/B tested a site and found that varying colours made a difference? Have you never developed a site with some colour scheme and later found you needed to extend the colour scheme, perhaps to incorporate a new product or service being added to the available range? Having a colour scheme that is set in stone early on sounds like one of those idealised things that sometimes just doesn't work in the face of reality.
  - anotheryou 11y ago
    I agree! I'm currently building something that has mild themes for fonts, colors and some margins (and is build on top of a SCSS framework, but that wasn't my choice), without color variables it would be a pain...
BinaryIdiot 11y ago
> Variables though, I can't see how you can go without them. The point of variables is to allow the setting of one style property and applying it to others, right? So why not just to that at the top level element and inherit it down? Typically you only want to select a handful of colors for a web site / application so simply set those at the highest level possible then allow CSS inheritance to work. Out of all of the big projects I've been on only one has used CSS preprocessors and I've never run into an issue with needing to change a value in too many places. It doesn't seem all that hard to avoid if I'm being honest here it just really, really depends on the structure of your CSS and HTML.
- agnivade 11y ago
  I am no expert in css but let's say you have a title heading color and you want the button color to be the same as that. You need to specify it separately in 2 places right ?
  - BinaryIdiot 11y ago
    No but ultimately specifying it in two places could be better. So first off if you want it to literally be the same then you could do something like: h1, button { color: #343434; } That would make them the same. You could also do .primaryColor { color: #343434; } Then set the elements which should have a primary color with that class. But if you could break my first example apart and set it in two places just as easily. But that's setting it at a high level element itself. You could even go crazier and set EVERYTHING to that color but ultimately many of these decisions have to be context based to decide.
    - sangnoir 11y ago
      What if want to use the primary color as the background-color to a nav element and as the border-color to inputs and textareas as well? If the designer changes to a different shade, do you do a global search-and-replace? The way I see it, CSS preprocessors allow for code reuse via composition - vanilla CSS restricts you to inheritance.

nostrademons 11y ago

Sure, but there are plenty of other ways to achieve the same effect. One I used for many years was to run your CSS through the same templating engine that generates your HTML. Wait a few more months and you might also get native CSS vars: http://caniuse.com/#feat=css-variables http://caniuse.com/#feat=css-variables

Lazare 11y ago
> One I used for many years was to run your CSS through the same templating engine So...a preprocessor? :)
- nostrademons 11y ago
  That you have to use anyway.

ino 11y ago

Is there a css3 variables compiler/processor/translator to plain css without variables? It can be a copy-paste tool on the internet or whatever, no preprocessor or build tools required. You work directly with styles.css3 in the browser and when you're done you transform it to old style without variables, so it works in older browsers. That's what I wanted to do last week but as I couldn't find such a tool, at the end I did a search/replace. It was a small project obviously.

cobalt 11y ago
i think that is what postcss does
- floatboth 11y ago
  PostCSS parses CSS, runs plugins and outputs CSS. Yep, of course there is a plugin that does variables! And the "Myth" tool, mentioned in a comment here, is just a pack of PostCSS plugins. And the OP uses PostCSS. Apparently, a lot of people here didn't read that part...
jack_jennings 11y ago
This might be what you're looking for: https://github.com/segmentio/myth https://github.com/segmentio/myth
- ino 11y ago
  Thanks, this looks good!

myblake 11y ago

Yeah this is the one that I don't understand, his argument about wet css being more readable doesn't even make sense in the case of "#ec3f5d" vs "$red", let alone the fact that in a big project not having one place to change this can be a nightmare.

SixSigma 11y ago
how about when $red = #FFFFFF
- iamben 11y ago
  You're arguing for the sake of it- it was just a bad example. If $red was $leadcolor or something similar, you can define it at the top, comment it to explain what it is, then change it across the whole site in 10 seconds (including the borders which are defined as variables 5% darker and lighter) when the client says "I like it, but the red needs to 'pop' more, do you know what I mean?"
  - SixSigma 11y ago
    I'm not, I have seen code like this where a variable is named after its value when created and then colours swapped out later.
    - Silhouette 11y ago
      You can write bad code in any language, as the saying goes. However, I've seen projects with a few CSS variables defining the base colours for their scheme and perhaps some tints and shades, and then a second layer of variables defined in terms of the base ones but with more role-based names like heading text colours and focused primary button backgrounds and so on. It's a simple, practical model that has proved very easy to work with and in some cases has stood the test of time for quite a few years now.
    - jjnoakes 11y ago
      So you are arguing against variables in any programming language. int one = 2;

j4kp07 11y ago

I would never allow a design get that far into the process and then allow a client to start testing various colors. That is just asking for trouble.

iamben 11y ago
But we've all been in a situation where it's got 'that far' and someone more senior has got involved and done exactly that. Plus, it makes designing in the browser waaaay easier.
Silhouette 11y ago
Have you never implemented a design yourself, and then found that when you looked at the results as a whole, it didn't work quite as well as you hoped from the original concept work? Have you never A/B tested a site and found that varying colours made a difference? Have you never developed a site with some colour scheme and later found you needed to extend the colour scheme, perhaps to incorporate a new product or service being added to the available range? Having a colour scheme that is set in stone early on sounds like one of those idealised things that sometimes just doesn't work in the face of reality.
- anotheryou 11y ago
  I agree! I'm currently building something that has mild themes for fonts, colors and some margins (and is build on top of a SCSS framework, but that wasn't my choice), without color variables it would be a pain...

BinaryIdiot 11y ago

> Variables though, I can't see how you can go without them. The point of variables is to allow the setting of one style property and applying it to others, right? So why not just to that at the top level element and inherit it down? Typically you only want to select a handful of colors for a web site / application so simply set those at the highest level possible then allow CSS inheritance to work. Out of all of the big projects I've been on only one has used CSS preprocessors and I've never run into an issue with needing to change a value in too many places. It doesn't seem all that hard to avoid if I'm being honest here it just really, really depends on the structure of your CSS and HTML.

agnivade 11y ago
I am no expert in css but let's say you have a title heading color and you want the button color to be the same as that. You need to specify it separately in 2 places right ?
- BinaryIdiot 11y ago
  No but ultimately specifying it in two places could be better. So first off if you want it to literally be the same then you could do something like: h1, button { color: #343434; } That would make them the same. You could also do .primaryColor { color: #343434; } Then set the elements which should have a primary color with that class. But if you could break my first example apart and set it in two places just as easily. But that's setting it at a high level element itself. You could even go crazier and set EVERYTHING to that color but ultimately many of these decisions have to be context based to decide.
  - sangnoir 11y ago
    What if want to use the primary color as the background-color to a nav element and as the border-color to inputs and textareas as well? If the designer changes to a different shade, do you do a global search-and-replace? The way I see it, CSS preprocessors allow for code reuse via composition - vanilla CSS restricts you to inheritance.