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
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
i will go further and say that you should use scss
you lose nothing and just gain a lot
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
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)
Thank you @clevermissfox @ἔρως for your response. :thumbup:
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.
use sass loader with node
Start with a vite project and install with npm
oh, yeah, that's even better
Is sass loader an extension or a dependancy or ... ? I am using node
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
Gah okay I've never worked w Vite , I'll do some research
you should try it
i want to, for a project
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
getting stuff to work the first time is always a pita
lmk if you need help setting it up, it should be very easy to make a new vite project
i recommend creating your own post in #front-end in case you need help
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
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