Use future CSS features in your code right now!
VloĆŸit
- Äas pĆidĂĄn 13. 06. 2024
- CSS is growing up so fast, and thanks to PostCSS and the postcss-preset-env we can use a lot of upcoming features today, like custom media queries, custom selectors, and nesting!
đ Links
â My video on setting up PostCSS: âą Learn how to power-up ...
â Alex Trost's CZcams: / alextrosts
â Alex Trost's Twitch: / trostcodes
â PostCSS: postcss.org/
â postcss-preset-env: preset-env.cssdb.org/
â My video on :is(): âą How you can simplify y...
â Timestamps
00:00 - Introduction
01:42 - What we're starting with
02:21 - custom media queries
04:49 - New media query syntax
07:01 - Nesting
08:17 - Nesting with &
09:00 - Nesting differences between CSS and pre-processors
11:16 - Custom selectors
13:19 - More abstraction
#css
--
Come hang out with other dev's in my Discord Community
đŹ / discord
Keep up to date with everything I'm up to
â www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
đș / kevinpowellcss
---
Help support my channel
đšâđ Get a course: www.kevinpowell.co/courses
đ Buy a shirt: teespring.com/stores/making-t...
đ Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Love your videos Kevin. I am in the process of changing career to a web developer from a diesel mechanic. You are a big inspiration through my journey! Thanks again my friend !
Good job! Me aswell, from chef to web dev!
Iâm a developer new to the industry and I find your videos so helpful. Theyâre not long, straight to the point and really informative. Keep up the great work!
This is awesome. CSS is moving toward SASS/SCSS, but, instead of having to be compiled, just... works. I love it.
Thank you so much Kevin. You made me change the way I think when I saw a website and the way I write my code is far better than before.
You helped me also in naming classes. Also, I'm using BEM because of you. Thank you so much. I'm watching most of your videos. Also, I'm at your discord server
I am loving the where, is, has CSS ability. I also love grid and variables. The concern I have is when does it get too complicated? I agree opening a file with a lot of nesting and custom modifiers will increase the learning curve and decrease efficiency for any team. The more complex a file becomes, the more commenting and instruction will be need to be ensure consistency. BEM and deep nesting with Sass already proved that styling can become cumbersome. The most important rule in the development world is keep it simple. Also, will the more modernized custom styling decrease end-user performance? When I think of CSS performance, I recall how long it took for us to really understand how CSS property animations impacted browsers.
it's good to add new stuff to it - it's our job to stay up to date with the latest tech & not fall behind.. i've been wanting to use css variables in media queries for the last 2+ years!
I heard it properly today. âFront end friendsâ.
selam
This video was really informative. Keep it up the great work!
excellent video, i am watching it 11 months after it was made, and i do believe most of if not all of these changes have been adopted by most browsers, i personally like to use anything that will reduce the amount of code i need to write, my greatest conundrum when writing usually comes about when i need to modify a particle part of a component that shares similar attributes of other components, and this is where i think is() and has() may come to be most useful
Iâm now 98% ready to move away from sass. The last obstacle is to replace mixins. Specifically, reusable chunks of styled properties. I could do reusable classes, but that doesnât work well when mixing between breakpoints or when using shared html with multiple themes.
In the end of the day, it doesn't matter what tools you have, as long as you keep it consistent and organized. Would love to see your tips and tricks on that.
Now, I am more interested on what changes will container query and sub-grid bring to the world. I bet every1 and their mom will come up with new design patterns.
I'm very excited for both of those, and seeing what people end up doing with the two of them!
As always interesting
Hi Kevin, thanks for sharing the future CSS features. The "Container Queries" is implemented or work in progress? Again thanks for this awesome video. You explained these complex CSS features clearly :)
As always a great video Kevin. I fully understand why @custom-media & @custom-selector were added for functionality. My minor point is why didn't they simply extend the custom-property syntax to fold these things in. They could have done something like --@bp-medium (width < 45em) and --:headings h1,h2,h3; That would have been more elegant in my view as the functionality seemed to address a short-coming of custom properties?
In my opinion, it will be a great and game changer addition to the CSS. I always wondered how to use custom media queries and I ended up choosing sass/scss for this purpose. But it will solve those things. It will also allow users to simply use plain CSS instead of using preprocessors like SASS or SCSS.
I think anyone who previously learned the fundamentals of CSS would be able to pick up the changes quickly with a video or two. I stopped coding for a year+.
i'm glad we could finally use nesting and custom variables for the @media , FINALLY!!! I truly believe that in 2022 using a preprocessor for css is 95% not needed. For merging partials together in one big file I think you could do that with webpack.
PostCSS is like Typescript for Javascript where you can use new features of ECMAScript before it gets released. This is great, I'd much rather use this than SASS or LESS since it's more universal.
Hi Kevin, thanks for your hard work.
A little suggestion here, because your text cursor is black, sometimes it blends in into the dark background and I felt it hard to find where the cursor is pointing to unless you select the text.
2nd! back from the woods , you're looking fresh :)
I've stopped using raw css about 8 years ago. I'm using SASS as favourite and less otherwise.
Defining variables in a global file and importing your color-scheme into every file, where it's needed has become a daily need for me.
I don't think, that raw css needs to head this direction, except it switched to it completly, because todays IDE support almost all transpilers out there and added a lot of support to writing and transpiling sass. CSS files are also shown as nested files in my sass files (PHPStorm)
Since I'm using Angular a lot, it's not even needed to have the transpiled files next to your sass files, because they are transpiled during build.
Hey Kevin. I was wondering, since you say all this will be a regular part of css in the future, will things like sass and postcss become obsolete?
Just spam watch Kevin, love watching the web dev God
7:32 We have two options: Either one media query with selectors repeated, or one selector with media queries repeated, there is no way to avoid this.
Correct, and I *much* prefer repeating media queries, specially with postCSS and the custom media queries :)
where is the Git repo url in this vdo? please share it?
PostCSS is even more fantastic than SASS, I just knew it and I can't stop using, I'm using it together with SASS by now but this is totally optional
Have you tried using postcss-preset-env while also still using a sass compiler? I tried messing with it a while ago and the compiler would add 2 styles every time I tried using sass variables to create css custom properties. One style with the printed value and the second style with the css customer property. I know the easy fix is not to use a sass processor with it but just something I was messing with and curious if you had found a way around that.
I use Sass and PostCSS together, but I don't use sass variables for my custom props, so not sure. I do use a Sass map, which I have a function over to create custom props as well as utility classes, but I guess because it's never an actual regular variable nothing happens here?
It is a little strange though, because postCSS should only be looking at your compiled CSS file, so I'm not sure what might be causing that.
â@@KevinPowell Ya, it seemed a little weird. It looks like it's happening when I try to use a css custom property with a sass variable default. If I use individual postcss packages instead of the all in one preset-env it doesn't seem to happen.
I love CSS and it is the only reason why programmers do not get burnouts. It is simple and design. It makes programmers or developers happy. I doubt that CSS will be getting complex, but the media queries could be..... It has different variations after all.
Have never liked BEM, so that part I am happy about, that is mostly because I always thought BEM just added more characters for me to type and forget about which I do when working with them. Yeah, it will make frameworks like Bootstrap harder to work with, since it will be something like "div.md.two.lr'". Do not think that is an issue either since I am not a fan of Bootstrap.
General question I have will ".classOne { & > .classTwo { ... }}" be ".classOne > .classTwo { ... }" or something else?
trying to use BEM here ... when i take a break from HTML/CSS i admit i get "foo-bar" vs "foo_bar" (@ what to use when ) backwards sometimes ... if i dont have my scss/css in front of me and sometimes that's the giveaway
Is there any similar channel for JS and PHP?
Hi Kevin, VS code validates my css and shows me an error when I enter @custom... Why not with you?
For the :-- at 11:38 the spec calls it the PP selector đ đđœ
Priceless đ€Ł
I think it makes more sense to have post css deal with the higher levels of abstraction and let the spec not implement abstraction if it is not immediately obvious to someone that has used css, but has not learned about the abstraction.
Yo those additions are crazy man. Does anyone know when browsers will understand them directly?
Hoping for sometime this year, but it'll be a little while still.
#452 there's another PostCSS Plugin that'll group identical @media queries and shove to the end of the file. Saves some bytes _only_ with large CSS bundles and many media queries, might also throw of one's idea of CSS inheritance, and get's less useful if you have many individual files.
Custom selectors seems redundant, you still need to write the which selectors should correspond to the custom selector, and it isn't like it makes much sense writing a selector multiple times, besides the fact if we want to select multiple selectos in a given tag, we could just use *.tag:is(h1, h2, h3)* and it would do the job in a much more faster and cleaner way of writing.
Or you could do .tag:is(::--headings); and it would work too.
I think as a regular, like just say h1, h2, h3, it might not be the most useful, but along with nesting I think it'll get used a fair amount. Maybe I'm wrong though!
Sure the complexity is increased, but less code is ultimately easier to develop and maintain. The countless hours saved by efficiencies is more than worth a modest change in the learning curve.
How can I know, when css has published custom-media queries??
caniuse.com is a good place to seeing what's supported and what isn't.
Other than that, it'll probably get talked about a fair bit as it gains support across the browsers, but it might be awhile before we see this one everywhere.
Second comments thank you keiv
The & and :is() is the same thing.
:is is more readable and you have its weaker cousin :where() that is pretty handy.
While & allows you less typing.
Tbh, I don't get why they have both. It will only add more junk.
& isn't the same. You can have :is(h1, .title) > span { ... } To get spans inside both h1 and .title, for example
This is great, but... in order for me to stop using Sass, I want:
1. Native mixins.
2. Native CSS that supports BEM-like syntax.
Hmmm.
I don't think mixins will ever come to CSS, because they cause compilation to fail if there is an issue with them, which goes against how CSS works, same with functions. I could be wrong, but I see that as a pretty big issue. Unlike regular CSS, one line failing (like, a typo) isn't so bad, but with a mixin, a lot can go wrong to cause it to fail, so I think error reporting is important with them.
What is the VSCode theme name?
Atom One Dark
What is name of this theme vscode
Atom One Dark
These changes will be great for those of us who already make a living off this stuff, but I do worry about adding complexity.
The low barrier to entry has always been one of the best things about HTML and CSS. Coding CSS can be tough, but reading it in source code isn't nearly so difficult. I think this makes that a little tougher--though not as much as the upcoming Cascade Layers. That said, I think if this gets us away from BEM syntax, I think that's a positive for people who are new to CSS.
I guess I just always hope that HTML and CSS are understandable enough that we keep getting new designers and hobbyists and experimenters and artists to use them--and not just hardcore developers (and I say that as a developer). Maybe we're already well past a tipping point for that, but I hope not.
I use to do &__element , but Iâve move away from doing that add now I just write out block__element to make it easier for others to search for that selector.
Frontend friends... Heard it clearly today đ
I think they need to fix the syntax because :- - doesnât make any sense and doesnât fit in the existing css honestly, same goes on how to declare @custom-media .
It actually does... if you think about it, the colon is used for pseudo selectors, and the double dash used for custom properties. Put them together and you get custom selectors :)
First Comment đ
Hi sir
I want to talk with you about web development
On Instagram
Sir, are you free to talk with me
I am a 13 year boy programmer
Kevin Thank , this the nice code size: min ⏠âŒâŸâȘïž
Second Comment
I think these new changes are awesome but its not really readable and we need kind of intellisense for these new features.
Soon we have to worry about time and space complexity in css
This is exhausting. I'm sure it is also excellent, but I'm with you Kevin, I prefer the easier to read code.
I love the nesting feature of scss but this nesting thing here seems like garbage :/
Idk if it really is worth getting all this complex syntax that makes .css files look harder to understand, just for these luke-warm features...
Hi, I only use postcss-preset-env with Astro Build, the only thing that doesn't work for me is @custom-media when I call them in an .astro file inside the @media (--lg) {}< tag. /style> how can I solve it, thank you very much for the help!
Having uncompiled shouldn't be a real obstacle since tooling can always be created to show hidden meanings like IDEs do.
all this new at-rule stuff is nice and exciting, but it'll take ages until one can SAFELY use this in native/vanilla CSS aka "raw". Events like Grid and @layer are very, very rare, and 7 years in, there's still no parity in browsers for Grid level 1, let alone Level2 (subgrid).
My main issue with these new at-rules or nesting: there is no **functionally equivalent native fallback** in native CSS today (and the near future) like there is/was for @supports or @media (just reorder you code and it'll still work).
With all these new @-rules you get CSS that just won't work cross-browser for a looong time -- the layout just breaks.
There's probably not a single website with visitors using 100% evergreen browsers and even if so: there's never been feature parity and there never will be for various reasons.
So we we need to transpile our stuff anyway like we did for the couple of years, hence there's no reason to use @custom-media if Sass, Less & Co. can already do the same with different syntax.
To use the fancy new CSS stuff, we have to do the same with "CSS" what we did with JavaScript: enjoy our DX in our ivory towers and write some totally different code no browser will ever see anyways, and use all that new and proprietary vocabulary,. Then have a buttload of 3rd-party tools (that we need to learn too) chained together like Babel and esbild and Sass and PostCSS and whatnot, to eventually translate and transpile our cool dysfunctional code into oldfashion code that actually does work in the real world for real people with their old smartphones and outdated computers.
All the abstraction is bad for people who argue that css is not a programming language, their argument is becoming void.
Not &__yourclass
Try this
div{ &.your__class {}} -> div.your__class == div:is(.your__class)
And:
section {
div &:hover {}
}
Second Comment