Recommendations for semantic and primitive colors in CSS/Theming
Hey everyone, I'm looking for some recommendations on best practice. I'm building a web where I have a base color palette (primitives) which is applied to a semantic system (example primitive: neutral-100 = #fff, example semantic: bg-base = neutral-100). Right now I've made all of the primitive palette as custom properties in css but I'm thinking about what the best practise would be in regards to the semantic values as I just realised I might want them as custom properties as well. Does anyone have any thoughts or ideas?
5 Replies
Isn't it better to use root?
Or you want to make css elements. classes to easily change elements?
Well I'm thinking maybe setting the primitive colors as variables and then the semantics as custom properties in root. That way I can change the variables whenever I need to change the primitives. The semantic selectors will never change, but the primitives might change. But since they don't contain any color value except a numbers value it's made to be changed, and be dynamic. Maybe that's the best approach
Have you tried using astro or is customization more important to you?
If customization is important to you, then use your own approach, the main thing is to give conscious names to the elements so as not to get confused, for example, come up with code abbreviations for different groups of elements, this will help a lot
Sorry for the late reply. I will actually be using Astro as the framework for this project. But the main goal is to build my own custom CSS(SASS) Framework. I'm not a big fan of Bootstrap or Tailwind and would like this to be a dynamic Framework based on the clients I work with
This will tie in to a Design System I'm building together with this so everything will be tied together in a production pipeline from Figma -> Dev environment
Everything is fine, try not to use too many mergo primitives, or make them a little more complex than one property, otherwise your html code will look like a mes