The problem in the video is an example to help people easily visualize and feel the power of Regex in CSS. Once you understand it, you can use it anywhere you want
Why you should never use this in real projects: 1. Reverse effect (html size same, css size larger) 2. It’s harder for other developers to understand what you did, how you did it, and why you did it. 3. It is impossible to search this classes in the code, because the class "class_1-class_2-class_3" does not exist in the styles.css 4. It feels like a complication for the complication. PS: I like Lun Dev videos)
This could be handy when you won't deal with html (can't or don't want to) like styling html generated from cms or blog service for example, js plugin... There might be times you figure something this could apply too, or maybe something to do with specificity you need to achieve, but in general multiple classes should be easier. Btw, css classes are shortcuts for a similar attributes matching selectors.
I've been doing web dev since 2008, when CSS and JS barely worked. Seeing some of these new features is interesting. Normally, I do everything in this video with BEM and SCSS. I'm not sure if this version of it solves anything, but I guess we'll see what conventions come up because of it.
make a video with responsive hybryd full section scoll (few vertical few horizontal) when we scroll down page with mouse or finger use only css, for example scroll driven animation and css snap scroll
When I saw forms in the beggining of the video, I thought we were going to use css to handle form validation. I got a bit disapointed when I realized that wasn't the case. It's still an informative and helpful video, nevertheless.
The knowledge is good, the example is bad : using data-* attribute would have been better for many other usecases while styling. I hope people don't reproduce this with class and go further in research (for example: data-* attribute, aria-* attribute) instead. And it's more glob than regex I guess 😂
When you give different shape to box of Html with css clip-path.Then it can be seen that the borders of these shapes are not rounded even if the radius is rounded. In that case how to design round with css. Cannot provide image in comment box. If not, I would give an example image.
The video is great to show what is possible, but you shouldn’t use it that way in big project. It is hard to maintain it. CSS should be used for styling, not for the logic. Avoid styling elements with attributes if possible, and use class instead. Avoid multiple elements in your selector, it increases specificity and reduces performance. Use BEM instead.
this makes it complex and rigid , you can literally use the different classes instead of "regex in CSS" , and it's not even a regex , using * and $ operator doesn't make it regex !!
@isaacvr when you are displaying with your logic using a server side language it's easier to add a another class than doing like this. And also when it comes to maintainability, this is too complex and confusing for anyone who will edit the code in the future
@@securefolder4548 that's right, but that depends on the scenario. I think the video is not exactly intended to be used that way, but to show another way to do things.
![[#2024MAMA] G-DRAGON - 무제(Untitled, 2014)+POWER+HOME SWEET HOME+뱅뱅뱅+FANTASTIC BABY | Mnet 241123 방송](http://i.ytimg.com/vi/Ox29z5Nf1Uk/mqdefault.jpg)
The problem in the video is an example to help people easily visualize and feel the power of Regex in CSS. Once you understand it, you can use it anywhere you want
Thank you Lundev 🙌❤️
You are the best! Now I'll wait for super-easy responsive tricks :)
Why you should never use this in real projects:
1. Reverse effect (html size same, css size larger)
2. It’s harder for other developers to understand what you did, how you did it, and why you did it.
3. It is impossible to search this classes in the code, because the class "class_1-class_2-class_3" does not exist in the styles.css
4. It feels like a complication for the complication.
PS: I like Lun Dev videos)
I agree!
5. bad performance
It's more organized if we don't use this, I think this for different purposes.
also we can use css nesting
Is there any kind of advantage to this? Seems like you accomplish the same thing as using many classes but in a much harder way
Sure thing 😆
This could be handy when you won't deal with html (can't or don't want to) like styling html generated from cms or blog service for example, js plugin...
There might be times you figure something this could apply too, or maybe something to do with specificity you need to achieve, but in general multiple classes should be easier. Btw, css classes are shortcuts for a similar attributes matching selectors.
Can be useful for framework makers
easy and helpful - I'm obsessed with your tutorials👍
me too
Thank you so much for sharing your expertise.
I always look forward to your uploads 🙏
Thanks brother 😍
thank you for doing this kind of videos. Can't wait to see next
I've been doing web dev since 2008, when CSS and JS barely worked. Seeing some of these new features is interesting. Normally, I do everything in this video with BEM and SCSS. I'm not sure if this version of it solves anything, but I guess we'll see what conventions come up because of it.
This is nice, didnt know css had regex too!
this channel keeps explaining things in the most shortest way possible, along with keeping the explanation understandable 🫡
totally created sparks of inspiration in my brain. loving all your vids.
Amazing as always, brother. Great example, never thought about it that way. Very granular and efficient method. Hats off!
Man love your content i do learn here more then at the universitity lmao
bro you are next lvl literraly this thing i was never learn in documentation even many good developer don't know this. I love tour videos👍
of course good developpers knwo this... but don't use it this way it's a waste of resources !
nice one. thank you for sharing
wow. nice one.thx
excellent job Lun, im glad to know your job, that was so interesting.
Thank you brother 😍
Really glad I found this channel. Keep up the excellent job!
Thank you
Great content ✨ as always ❤🔥
Our Favourite css king is Lun Dev
Как всегда интересное и полезное видео)
Damn, that's awesome
Dammmmnnnnn so cool css feature!
bro this is a banger one . give us more tips and tricks
best Content ever
Here, we trade readability for feeling clever. Still useful to know
make a video with responsive hybryd full section scoll (few vertical few horizontal) when we scroll down page with mouse or finger use only css, for example scroll driven animation and css snap scroll
When I saw forms in the beggining of the video, I thought we were going to use css to handle form validation. I got a bit disapointed when I realized that wasn't the case. It's still an informative and helpful video, nevertheless.
Oh, I already made that video, you can watch it here th-cam.com/video/yr4K6acMcrA/w-d-xo.html
@lundeveloper
Thanks but what I meant was to use REGEX to validate forms
@@MercurySteel You can use like this
@@lundeveloper
That's the thing I needed to see. Thanks a lot.
i find this super easy. does it still work if classes is dynamic ?
Awsm bro
Thanks brother 😍
awesome
Bro are you gonna make animation/CSS course? 😊
How is it i keep learning something new almost every time I watch one of your videos? Clearly I have spent too much time on the backend.
How about performance? Web browser must work harder to find all matches.. better to direct annotate to class
We wanna a course on Css and js
The knowledge is good, the example is bad : using data-* attribute would have been better for many other usecases while styling.
I hope people don't reproduce this with class and go further in research (for example: data-* attribute, aria-* attribute) instead.
And it's more glob than regex I guess 😂
đỉnh qá anh ơi
Thanks em hehe
Nice video for knowledge. Also it's NOT regex. Besides, using BEM is more practical.
Will not these details come from backend? I mean, who will be managing this from frontend? Please guide If I'm wrong.
wowww
crazyyy
A SIGNLE COMMENT 😁
why dont you nest your rules! gives me PTSD
When you give different shape to box of Html with css clip-path.Then it can be seen that the borders of these shapes are not rounded even if the radius is rounded. In that case how to design round with css.
Cannot provide image in comment box. If not, I would give an example image.
Maybe combine it with border-radius?
nice
Thank you for watching brother
Thanks again, Lun Dev, for the great content! I'm definitely going to use this regex in CSS in my next project.
The video is great to show what is possible, but you shouldn’t use it that way in big project. It is hard to maintain it.
CSS should be used for styling, not for the logic.
Avoid styling elements with attributes if possible, and use class instead.
Avoid multiple elements in your selector, it increases specificity and reduces performance. Use BEM instead.
0:55 single*
😇
We wanna course
It seems like your example takes more time and is less readable than just creating new classes. When would you actually want to use this?
Please do NOT us regex in CSS...
Why?
this is not regex.
what is going on
its a good tutorial, but you need to explain it more.. this is too summarized and hard to understand for everyone
this makes it complex and rigid , you can literally use the different classes instead of "regex in CSS" , and it's not even a regex , using * and $ operator doesn't make it regex !!
this guy shows the real power of CSS
What is the advantage of this? You're replacing " " with "-" and unnecessarily complicating the CSS.
Not the best example, imho. It's should be better to use it with extra attribut.
If this is not an ai voice then I am sorry I just can’t with this voice the way it says “card” is just so… weird…
This is cool but not practical
Why?
@isaacvr when you are displaying with your logic using a server side language it's easier to add a another class than doing like this. And also when it comes to maintainability, this is too complex and confusing for anyone who will edit the code in the future
@@securefolder4548 that's right, but that depends on the scenario. I think the video is not exactly intended to be used that way, but to show another way to do things.