Jess
KPCKevin Powell - Community
•Created by McMarty on 12/23/2024 in #front-end
Tips for writing clean, maintainable CSS
My tips or processes are probably a little different from others I think.
I wholly disagree with implementing an naming ideology like BEM. I think it severely limits what you can do by how you write your CSS. Write your CSS however you want. Be free! Use CSS to its full potential!!! Use things like :has, :is, :where. Use all the things!!! I only believe what’s most important is scoping your styles so they don’t leak, and having a good foundation. Use something like CSS modules, or the scope at-rule when it’s better supported. Admittedly even I still struggle with finding the best solution—but you’re smart and can come up with something good.
The way I recommend starting any stylesheet is with a good reset, I would choose either normalize or santize.css. I really like the latter. It sets defaults to what you expect them to be rather than what they are specced to be.
I would also setup some global CSS variables or tokens system for colors, fonts, sizing, the whole works. That way your whole app has a consistent styling base that is customizable. You can use something like Open Props or make your own. I technically have also made one on NPM called “semantic-props”, if you want a better idea on how I structure things myself.
Specifically for me I use container queries or units on my sizes so I don’t need to use queries in my components to make them responsive. And I use the light-dark function alongside relative colors with fallbacks so I can theme easily too. You can either scope these to the :root selector or something else if you need to recalculate a variable locally vs globally.
Overall just don’t stress over it and just allow yourself to code. Don’t be a perfections (frankly like me, I’m bad at that) and just make something cool! You’ll figure it out.
120 replies
KPCKevin Powell - Community
•Created by Rashed on 1/14/2025 in #front-end
tailwind setup issue
Yeah it’s just nonstandard syntax Tailwind adds. I don’t personally use Tailwind but I know they have good IDE integration so you’re likely missing an extension like mentioned above. I do think this is changing in v4 of Tailwind tho if I remember
5 replies