http://emwaw.me/ variables methodology

scss-variables.md

Hi guys !

So I read your concept, and completely agree with the first point: $background-color: #fff; is not possible for long term. However, I see in your approach some flaws concerning DRY and reusable elements/modules like the ones we can see in OOCSS and similar libraries.

So I will point out what I think can be flaws, and my solutions, and would love your feedback on that: Context:

My page contains several blocks which all have the same background-color.
My page will evolved with time.
I sometimes uses libraries and concept like OOCSS.
I have a color-scheme, and want to be able at any time to change it quickly, without having to go in all my files.

There is several ways of doing it:

• using a $background-color: #fff; and then add the background-color: $background-color; in my selectors. But I do not like that, for the reasons you gave in your concept.

• using $emw--color-alpha: #fff; and then background-color: $emw--color-alpha; which I do not like, because I have a several files in my project describing my pages, elements, modules... So if I add background-color: $emw--color-alpha; in all my files, if tomorrow I want my scheme to have a blue background, I will have to edit all my files, and using modules, it can be time-consuming.

• using a class for all my elements which will have this background-color, like "my-themed-element". But for me, it breaks the separation of content and styling that CSS give us. And completely break the OOCSS approach I usually try to have. Because if I want to create a module that is completely project independent, reusable in this project but also in others, it is not possible for me to add it a class that will only be meaningful in this one.

So I'm more tempted by this approach:

$emw--color-alpha: #fff;  
$emw--color-beta: #000;  
$emw--color-futur: #00F;  
$links-color: $emw--color-beta;  
$background-color: $emw--color-alpha;

a {  
  color: $links-color;  
}  

// in my homepage scss file  
.my-element {  
  background-color: $background-color;  
}  

// in my independant module, also having a variable declaration file  
$my-module-background-color: $background-color;  

// in my module page developed 5 months after the main website  
.my-module-element {  
  background-color: $my-module-background-color;  
}  

this way I can, tomorrow, decide to change the background-color to $emw--color-futur in my variable declaration file, without editing any of my others files, and without breaking what exists.

Any thought ?