Is it advisable to start using CSS nesting?

When I code side projects I tend to follow the professional methods and I've been wondering if using CSS nesting is professional.
19 Replies
Shane
Shane2mo ago
I think it is (and have used it professionally for work) If browser support is an issue for you, you should use SCSS or PostCSS to ensure your css will work on older browsers it depends on how you are using it as well, not everything should be nested if it leads to a ton of code duplication
ἔρως
ἔρως2mo ago
i will go further and say that you should use scss you lose nothing and just gain a lot
Shane
Shane2mo ago
mostly agree, I wouldn't bother using SCSS vars for most things though now that CSS has them native. The nice thing is that you can choose to simply ignore all SCSS features and use it like vanilla CSS with guaranteed nesting support
ἔρως
ἔρως2mo ago
you would be a dummy for doing so, but you can css variables are pretty terrible scss variables can hold way more than just strings for example, a central file with the colors you need, set on a map, that then generates the css variables for you and those variables can be output as part of your critical css path directly into the html (you do have to generate a css file that's then read directly into the html, but it's fine)
Rhandom Guhy
Rhandom Guhy2mo ago
Thank you @clevermissfox @ἔρως for your response. :thumbup:
clevermissfox
clevermissfox2mo ago
im super bummed i cant get sass to install on my machine. or rather it says its installed but when i get to the --watch command, i get an error in the terminal saying sass isnt recognized as filename, dependancy etc even though its listed in the devDependancies in the package-lock file. i guess im stuck using it in codepen.
ἔρως
ἔρως2mo ago
use sass loader with node
Shane
Shane2mo ago
Start with a vite project and install with npm
ἔρως
ἔρως2mo ago
oh, yeah, that's even better
clevermissfox
clevermissfox2mo ago
Is sass loader an extension or a dependancy or ... ? I am using node
ἔρως
ἔρως2mo ago
it's something you install to then use with webpack or vite or any other packer but in this case, just do what shane said
clevermissfox
clevermissfox2mo ago
Gah okay I've never worked w Vite , I'll do some research
ἔρως
ἔρως2mo ago
you should try it i want to, for a project
clevermissfox
clevermissfox2mo ago
I will , barely started working with node the last couple weeks and have gotten everything except sass to work. Suppose it's time to explore what vite is and how to use it
ἔρως
ἔρως2mo ago
getting stuff to work the first time is always a pita
Shane
Shane2mo ago
lmk if you need help setting it up, it should be very easy to make a new vite project
ἔρως
ἔρως2mo ago
i recommend creating your own post in #front-end in case you need help
tharun
tharun2mo ago
For using CSS or SASS, Vite is the best way or you can use Parcel. But Parcel actually sucks when it comes to displaying errors. It throws errors at you even if you solve it in the code. Vite is better imo
clevermissfox
clevermissfox2mo ago
i got the vite project set up and installed sass but not sure what to do next. posted here about the steps ive taken so far https://discord.com/channels/436251713830125568/1233665696282447872