Jessica
KPCKevin Powell - Community
•Created by McMarty on 12/23/2024 in #front-end
Tips for writing clean, maintainable CSS
No worries. 🙂
That sounds like a formula for spaghetti code!It's not. If it was I wouldn't recommend it. I suggest it as CSS is extremely powerful and cuts down on the JavaScript you'd otherwise have to write. The
:has selector alone testifies of this. I'm not suggesting to complicate your CSS. Still keep selector logic simple but don't artificially restrict yourself.
Can you explain how CSS modules would help?CSS modules are one of many ways you can scope your stylesheets to a single component. That said, I do see them being superseded by the native CSS
@scope and @layer at-rules. Regardless, any form of scoping is useful as they allow styles to be more complex and logical (though do simplify), and reduce worries of conflicts and/or specificity issues. Essentially, they help keep everything locked down to one stylesheet per component. How CSS modules work (at least in React) is each class-name equates to a uniquely generated one that can be accessed via a JavaScript import object akin to import styles from "./MyComponentName.module.css" and styles.className.
Can you explain [reusable CSS variables] more?CSS custom properties or variables? Just variables scoped to a selector you can share across your components to keep the application or website look consistent. They're just values for colors, sizes, widths, ect.
Again, can you explain what [container queries] means?Size
@container queries are used to scope any CSS properties to the container width of an element (hence the name), vs the traditional approach of @media queries which align to the viewport (or window) width. You mark an element using the container-type property. Just makes resizing easier as you can define a size once without having to override anything per component.126 replies
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.
126 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