Goodbye SCSS, Hello Native CSS Nesting!
Vložit
- čas přidán 18. 05. 2024
- Native CSS has come to Chrome and is on it’s way to the other browsers! Here’s a basic introduction!
🔗 Key Links 🔗
- Github repo: github.com/coding-in-public/g...
- Chrome article: developer.chrome.com/articles...
---------------------------------------
🔗 Additional Links 🔗
- Current Support: caniuse.com/?search=nesting
- Vite: vitejs.dev/
- Postcss Nesting Plugin: github.com/csstools/postcss-p...
---------------------------------------
📹 Related Videos 📹
- PostCSS Introduction: • Every modern site shou...
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
1:01 Why Nesting?
3:39 Three Basic Rules
7:55 Practice Nesting
12:34 PostCSS Polyfill
---------------------------------------
🎨 VSCode Theming
- Font: Cascadia Code: github.com/microsoft/cascadia...
- Theme: marketplace.visualstudio.com/...
- Icons: marketplace.visualstudio.com/...
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen... - Jak na to + styl
You got the best thumbnails man! I like other developing streamers too but you are at a very special place between them with visual quality of your thumbnails and apps. A clear example of having visual skills makes your app, thumbnails, video look good. (Shaun is also very good at this ^^)
Nice. Glad you enjoyed it!
Thanks for the discovery 😁👍
Sure thing!
I just finished another interview today, and the interviewer guy asked me about SASS/SCSS - and we both agreed that we use SASS and SCSS mostly for nesting rules lol.
Cool to see this one for sure!
lol I think that’s most casual users of SCSS/SASS
@@CodinginPublic yes, probably because the solution just got implemented and not to the full powers
Agreed, I use it only for generating some complicated loops, that’s about it
nice sir
Glad you enjoyed it!
@@CodinginPublic yes
@@CodinginPublic the video is very incredible and very knowledgeable for me
I think nesting is good but mixin in SASS is so good you cant ignore it
That’s fair. I do think you have to use it in a very defined way if you’re using it with others. I’ve been a part of the project where so much magic was abstracted by mixins that to do anything you constantly had to go reference the mixins like documentation.
its better to define utility classes than use mixin
Nice 👍👍👍👍
Cheers!
Hey, awesome video . I wanted to know some great newsletters about devs and stuff like how do you get to know about what's new in dev world?
Hmm…mostly following people online: Twitter, GitHub, etc. I’d also recommend Syntax podcast?
Nice tutorial, please can you make a tutorial on multer for file uploading, like uploading of single files and multiple files from different inputs both images and video
Not sure I understand your question?
Your vs code terminal looks so cool. How did you customize it? Please make a video on that.
Sure :)
My Custom Terminal Setup
czcams.com/video/DBASd9L4GCo/video.html
@@CodinginPublic Sir, I've already watched it. But it doesn't look like your current terminal. I think you have done more tweaks over time. That's why I'm asking for a new video.
Hope you will make one soon.
Thanks!
@@RakibulHasan-pz7ro Ah, I think you’re right. I'm using oh-my-posh. It's pretty easy. Install it globally and add this at the bottom of your .zshrc file:
# to use oh my posh instead
eval "$(oh-my-posh init zsh)"
@@CodinginPublic Thank you so much
Great video as always,
But SCSS so much more than just nesting, so this video title is wrong and clickbaity 😢
I don't think Sass is gone, as there are still features in Sass that can be solved better than in CSS.
Sure, CSS variables with container queries can solve the @if statements, and color functions are also coming (I'm really looking forward to that!).
But there are still mixins, functions, and loops that can solve many things that CSS can't do at the moment.
Additionally, to use most of these features, you still need some PostCSS plugins. So, for now, Sass and PostCSS still do most of the heavy lifting for these features.
Sorry, that wasn’t my intention to limit SCSS to nestin. But in my experience, most people that I interact with are staying on SCSS only for nesting. Personally, if I use SCSS to write a bunch of classes, I end up just writing tailwind again. So I’ve long only used SCSS for nesting and color funcs. So I wasn’t trying to be reductive or click baity-it was more of a personal reality. Glad the video was a help in spite of all that.
been using nesting for years now thanks to postcss-preset-env and I don't even remember how I wrote CSS without it anymore
Postcss-preset-env is awesome!
Hello,
Thanks for your video, it's helped me a lot.
In April, I will be 30 years old. Is it too late for me to study and start a career in web development?
Glad it was a help! No!! You’re not too old! And in fact, if you start learning today you’ve got a career in web dev that can last longer than you’ve been alive so far :) (I didn’t start until I was 32)
@@CodinginPublic
Thanks for your advice.
I wish you more and more success.
Same, my friend!
Will it work in the Firefox browser in the future?
Hopefully :) But either way, you'll probably need to use PostCSS going forward.
i was wondering if that firebase extension is safe?
I think? I honestly haven’t used it much 😬
Well for the compiler that creates as many classes & variables as you want , scss is still better.
Yep, no worries at all if that’s how you like to use SCSS. I usually turn to Tailwind if I want to create a bunch of classes, as I always just end up recreating Tailwind when I use maps, mixins, and functions with SCSS.
@@CodinginPublic i love your channel btw. My very first junior dev. Project was inspired by your html-css-javascript nite taker app. I made my own in react months later after i finished school. Much love.
@@CodinginPublic its really just preference, because tailwind is easy to understand and much faster in production, but it just bloats the code too much for me i dont like it ! But i see the adoption curve tho...tailwind is the way to go right now.
And I should state, my overwhelming preference is to write native CSS. But for projects, I don’t look at much, I find Tailwind is quicker do use when I have to quickly jump back in.
That’s awesome! 🥰
Yup, you screw up specificity with nesting a lot. I end up using !important a lot because of this.
😬
2014 proposal...
as long native css does variables as they do right now I will stick with sass/scss.
What do you not like about css vars? Or is it more than you want maps and other functions?
@@CodinginPublic The way its written color: var(--main-color) vs color: $main-color ;)
Huh. But they’re so powerful and can be updated by JavaScript. So never bothered me much :)
use my postcss config
const mode = process.env.NODE_ENV
const dev = mode === 'development'
//const FontMagician = require('postcss-font-magician')
const PresetEnv = require('postcss-preset-env')
//END PROCESS
// FontMagician({ formats: 'woff2 woff' }),
module.exports = {
plugins: [
PresetEnv({
features: {
'nesting-rules': true
},
stage: 0,
autoprefixer: {
cascade: false,
grid: false,
grid: 'autoplace'
},
browsers: 'last 2 versions'
}),
]
}