i went from feeling confident in my understanding of css to feeling floored and confused with how much has changed..thanks for this video to help!

@cerealrakist7360

Жыл бұрын

Same

I have been using SCSS because of the extras that it provides over vanilla CSS. It's great that CSS finally has one of the most asked features!

@Rust_Rust_Rust

Жыл бұрын

Unfortunately still missing mixins which makes the amount of css you have to write much less

@iamtharunraj

Жыл бұрын

@@Rust_Rust_Rust Yeah. SCSS just provides that extra flexibility to the code with functions,mixins,maps and all that stuff. I use SCSS all the time with my projects.

@Wolfeur

Жыл бұрын

I'd be really curious about why you'd be using SCSS if not for the extra features

@Tarabass

Жыл бұрын

​@@Wolfeurto @apply my tailwind classes 😂

@iamtharunraj

Жыл бұрын

@@Wolfeur I don't really know the reason either. I came across a random tutorial on SCSS. I started playing with it and I must say I felt like I have been wasting my time with CSS until I know about SCSS

I think we may need a CSS visualiser/ debugger that rewrites nesting into "standard CSS" for troubleshooting. Especially for newer people to CSS, as I can imagine nesting in CSS will be very very very popular, and I'm sure on bigger CSS files it could become very complicated. But this is yet another very exciting moment in the growth of CSS, and I'm all for it.

@aaronlink127

11 ай бұрын

Maybe editors like Visual Studio Code could be updated show the full selector when you hover over a nested selector (maybe an extension?). Would've been nice for SCSS too, but that has the option of looking at the final outputted CSS.

Love learning from you Kevin! I'm super excited for the new course you are talking about! thanks for being awesome! 🤩

I just discovered your channel. I have been a front-end developer for 20 years and I have already leaned some things from you.

Hi Kevin. I love CSS as much as you do and I love all your videos! I have a request for a video and I’m not sure if you have made one like this already. I wish you could make a video on how you set up VSCode with the browser on the right side, as shown in your last video, plus giving us a list of extensions, if any, related to CSS and SASS and anything else in order for us to make coding in VSCode more user-friendly. Thank you so much in advance! I would also love to see more CSS battles between you and Kyle and I am sure that I am not the only one who’d love to see more of that. It’s better than watching sports (to me)! ❤❤❤

Thx for an amazing vid Kev!

CSS has come so far, but just because it has nesting doesn't mean it's a replacement for Sass. I love Sass. Loops, maps, concatenation, mixins, functions, $ variables...I couldn't imagine doing a large-scale project without Sass.

Would be great that dev tools could show how the nested css gets interpreted.

Thank you @KevinPowell for sharing this. Do you have any observation about of reading and executing nested CSS? On prod SASS is compiled but what about native CSS?

SCSS is easier and more intuitive than vanilla CSS nesting. Also SCSS has so much more features, I cant replace it with CSS only. CSS try to implement the SCSS features but in more inconvenient way. For example I find CSS variables alful to define and use.

@KevinPowell

Жыл бұрын

I agree that SCSS nesting is easier, and there are so many great Sass features not in CSS, but I completely disagree about variables 😅. CSS custom properties are so much more useful, from changing them on media queries to redefining them with JS and a few more things. I use SCSS for my projects, but custom properties for a lot of things (I actually use a SASS map that gets turned into custom properties)

@theodorealenas3171

Жыл бұрын

Yes, also worth mentioning, the browser tools can show you where CSS variables are defined. I expect that CSS nesting will have similar benefits.

@nelson6e65

Жыл бұрын

Sure, nesting it's a thing, but easy than CSS variables? The advantages of CSS variables are a game change, because you can combine them to add much more real-time interactivity to the user. Also, they improve a lot the legibility of your code. I actually use SCSS variables to build CSS variables. 😂

@matrixplace

Жыл бұрын

Ok, maybe I should dive deeper into CSS variables… What I meant is that I dont like the syntax of defining them and that you have to use the var function to use them.

hi sir, can you make video on creating a vscode like scroll bar, in vscode right side have a zoom scrollbar., can you re-create that with css (vscode editor have the right-side scrollbar)

I think one great thing about native CSS nesting is that it'll prevent bloated compiled selectors that would be the result of doing something like this in Sass: `.a, .b, .c { .x, .y. z { ... } }`, resulting in `.a .x, .b .x, .c .x, .a .y, .b .y, .c .y, .a .z, .b .z, .c .z { ... }` (imagine that with longer/more/deeper nested selectors). But on the other hand, it's likely to cause new specificity headaches, at least for less experienced devs.

What do you think about bulma css?

sometime i face case, which is need to select element between parent class & child, i think selected ":is" will be useful for that case 🤔

@VeitLehmann

Жыл бұрын

:has can be useful for this case. But in most cases, it'll probably be better to re-arrange the CSS so it's not needed at all. Makes life easier for other developers or your future self.

What mini-app or work-hack are you using to paste in the code? Just cut & paste, or do you actually use your clipboard history somehow, and invoke that with a hotkey?

@KevinPowell

Жыл бұрын

I have it off screen when I'm doing that, so I have to go copy it 😁 I do use my clipboard history a lot though, just not in videos. On windows is windows key + V, super handy!

Thanks, I hate it. Having native nesting just be a convoluted alias of :is() seems incredibly stupid given how much of expected behavior gets butchered by it.

@KevinPowell

Жыл бұрын

afaik, it's the only way they could have made it work. Browsers don't compile code, so they need the & to be a live object. having it use :is() was the solution to making it possible at all from what I've understood following the discussions on it.

@Wolfeur

Жыл бұрын

I'm not sure what exactly you were expecting. Nesting is fundamentally just syntactic sugar to structure your relational selectors.

@theodorealenas3171

Жыл бұрын

Doesn't it make sense though? Ampersand means "as well as"

I have come to not like nesting in SASS. It makes code less readable as developer has to scroll to understand the selector as a whole. And now, CSS nesting makes it even worse as developer has hover on the "&" symbol in the Developer Tools to get the full picture of selector. I wish it was never added to the CSS spec.

Does nested native CSS have the potential to help minimize my code? Because my particular project has as one of its specs, "Output should be less than 1024 chars."

Can you not put a * in front? Like *div isn't any different to div but it starts with a symbol.

@KevinPowell

Жыл бұрын

*div isn't a valid selector though. * is a stand alone selector, which means all elements. You'd have to do *:is(div)... I'd rather do & div 😅.

So I've just realised that you can (ab)use the way the :is selector works to get around specificity issues by throwing a random ID selector into it (that doesn't match anything) i.e. `:is(#specificityhack, .something) . somethingelse` has a higher specificity than `.something .somethingelse`. Im not saying you _should_ do this, but you could.

awesome

Firefox 117, that’s supports nested css is not released to the wider public yet. The current version is 115 which does not support it. What happens when a non-compatible browser tries to load nested css? Do you just get a broken layout?

@hebedite4865

11 ай бұрын

usually either there will be a fallback, or the page will just tell you it doesn't support your browser

So does saas get compiled by the browser ?

@Dadaadad268

5 ай бұрын

No

❤

8:23 In this particular edge case you could solve with `.call-to-action > .heading` but it’s good to know how it works under the hood thanks for the video

Neat, I'll never use it tho

That behavior of :is() is not really obvious. I think it should be documented somewhere but I've never read anything about that. This the first time I saw it and im really impressed. It's kind of like :has() is some way.

Compiler versus interpreter

Hope css follows the javascript patern of absorb the usefull stuff of popular libraries like jquery. Also they need to fix some stuff. Css still to complex and requires a way to deep understanding to do some simple designs.

never used sass but have been using nesting with css. and chrome doesn't require you to use &

@KevinPowell

Жыл бұрын

I just tested it here, and I definitely need the & if it's an element selector: codepen.io/kevinpowell/pen/jOQKZrO Are you using PostCSS or something else to process things?

I am glad BEM does not work in native CSS due to I dislike typing the character _. Wish native CSS put the part in a :has() or :where() instead of an :is().

Hi Kevin, do you use any utility for placing windows? I see it here kzread.info/dash/bejne/np54q8V7oJCfo7Q.html . Could you share what kind of utility it is?

Lately I'm using TailwindCSS heavily, son I'm kind of slowly moving away from SCSS. BUT, man, this $$$$$UCKS! It's awful! So confusing and it will bring a LOT of bugs! Thank you a lot for this video, basically you are turning into a condensed w3schools :P

It has 73% support, and 77% support on mobile for global users. That's better than I would have guessed.

It's really simple to explain this and I don't know why you just don't say it.... In SASS it is a placeholder. In CSS it is an object reference. Done!

I think that if Sass will add compatibility to native nesting, it should be a flag (like JavaScript target option in TypeScript), so I never turn on. 😂

Hi Kevin, I need a PC

Is CSS working group deliberately making rules so confusing, just for the sake of differentiating themselves from preprocessors?

Hmmm...

Concatenating selectors is by far the practice I hate the most in Sass, good riddance. I can make an entire video explaining why it is such a horrible practice. The one thing that wasn’t mentioned here and I am most interested in, is nesting MEDIA QUERIES; that alone makes Sass still relevant.

why you are not making javascript videos

@KevinPowell

Жыл бұрын

I'm better at CSS 😅

@castlemoyle

Жыл бұрын

@@KevinPowell Then why aren't you doing cooking videos? (grin) (Not beer making, but cooking)

Seems confusing and annoying. I'll just continue to use sass or write out selectors long form. Not that big of a deal.

Sorry, I got lost and totally confused on this. feels like you're trying to explain a bit too much at once or maybe I'm just having a slow day. I looked up about it and read up . I understand it, i think, now.

98% is so high it'll take forever

Css donsn't need "&" now

Honestly native nesting is kinda useless. There’s nothing new that we couldn’t do previously.

@jeanlasalle2351

Жыл бұрын

It actually seems to make things worse especially since that might break sass

@rand0mtv660

Жыл бұрын

@@jeanlasalle2351 Why would it break SASS? SASS compiles into valid CSS that isn't nested in any way. Not sure how CSS nesting can break SASS

@KevinPowell

Жыл бұрын

It won't break Sass, since Sass will continue to compile everything anyway. If you use Sass, you're using Sass nesting, if you don't use Sass, then you're using native neseting :)

@rand0mtv660

Жыл бұрын

@@jeanlasalle2351 Oh sorry, you mean using native CSS nesting syntax inside SASS might break SASS?

@jeanlasalle2351

Жыл бұрын

@@rand0mtv660 Sorry, I wasn't very clear. Sass will still keep the same syntax so nothing would really break but if for some reason you have to work with both it might cause some headaches : I can already start to imagine the nightmare it would be to be contracted to port native css to scss in the future or having to work with a design system including both for compatibility. Also I don't know how sass will try to adopt the native css nesting syntax but I hope it would not imply performance tradeoffs or guessing what you want.

If you use BEM-style naming, please, pretty please, with a cherry on top, don't use &__ and alike on your SCSS. The few letters you're saving on typing, you're going to pay tenfold on maintainability (or worse: someone else will).

@teugene

Жыл бұрын

Nope. Nothing wrong with using &__ and &-- since the element and modifier are under the scope of the block. This is pretty much standard practice. But don't do &- for another block class. Since it's a block element on its own, it should be fully named and not nested under another block name. Much more maintainable and readable that way too.

@KevinPowell

Жыл бұрын

I've never understood the issue with this. If you're in a dev environment you should have maps enabled, and you know exactly where the styles are, from the partial they are in and the line number of the code within that file 🤷

@feldinho

Жыл бұрын

@@KevinPowell while today it's easier to debug a specific element, it becomes impractical to just search for all occurrences of a selector in the code (whether from vscode or using a cli tool like ag). Ideally, there shouldn't be many instances of a selector, but not every project is as simple as demoland, and working with large teams and freelancers, I had to deal with this a lot in 20+ years. It's just not worth it!

🤡 Maybe if you never used Sass before or the tool it is erased for some reason, but I don't see any advantages of native CSS nesting 😐: it is verbose, not easy to debug, it's a breaking change and just make more complicated for pre/post processors to add compatibility. 😮‍💨 I don't see the point. Sass it is already doing the job.🤗

@nelson6e65

Жыл бұрын

Instead of learning native CSS nesting, just use SCSS. Currently, most of compilation tools are almost instantaneous and you can see the results in the browser in real time with HMR.

hi sir, can you make video on creating a vscode like scroll bar, in vscode right side have a zoom scrollbar., can you re-create that with css (vscode editor have the right-side scrollbar)

hi sir, can you make video on creating a vscode like scroll bar, in vscode right side have a zoom scrollbar., can you re-create that with css (vscode editor have the right-side scrollbar)

hi sir, can you make video on creating a vscode like scroll bar, in vscode right side have a zoom scrollbar., can you re-create that with css (vscode editor have the right-side scrollbar)