rstacruz / rscss

Reasonable System for CSS Stylesheet Structure
https://ricostacruz.com/rscss
3.91k stars 176 forks source link

Class for namespace? #71

Open matthewslouismarie opened 7 years ago

matthewslouismarie commented 7 years ago

Hi,

Why not add in the RSCSS "specification" or whatever you want to call it a syntax for namespace classes?

When working on customising specific parts of an existing website with a very large CSS code base, it is often a bad idea to directly modify the original CSS file directly (especially when this one is very messy) as this can lead to unforeseen consequences. In my case, I decided to go with an additional style-sheet using RSCSS just to style the custom components I create. The original CSS can override the styles I create, because it does not use RSCSS hence its selectors have more priority over mines. This is easy to fix with helpers. The real problem is: it can apply additional style to elements I do not want to specify properties for. For example, let's say I have a .link element. When hovered, the .link needs to be underlined. Now the original style might define a background for hovered a elements. I don't want that. I might just override the background value with another one like background-color: transparent; or background: none;. But what if a .link element needs to have a background when focused? This would mean my .link elements would not have a background when they are focused and hovered in the same time, which is not what we want. One solution for this is to edit the original CSS file, and one way to do it in a very safe way is to use the :not selector. However, when dealing with a very large number of elements, this leads to very lengthy list of :not selectors. So, why not allow, in the RSCSS specification, a way to namespace any kind of component or element? For example, we could add. __my-namespace to any element or component which would only be used as a way to prevent certain properties from being applied to the element/component. In the original stylesheet, we would just need to add :not(.__my-namespace).