Whenever I want to learn a certain thing in CSS, I type that thing into KZread concatenated with Kevin's name and I find it, this channel is my CSS reference. Thank you very much for the effort you have made to bring us such amazing content Kevin.

@charlesavul1016

2 жыл бұрын

Kevin is just Awesome!

@caseypearce1049

2 жыл бұрын

You know what I mean 😂

@tayl5960

Жыл бұрын

I do exactly the same! Great content every time.

This is the first "framework" that I feel really embraces what CSS is all about. Glad to see it's getting more love.

"One of the best ways to be *less frustrated with CSS* is to have some structure to how you're writing it." Perfect intro.

When doing my CUBE classes I do: class=" [composition] comp-class [utility] utility-class-1 utility-class-2 [block] block-class [exception] exception-class-1 exception-class-2 " This makes it clear what is intended, which classes are which, where to find them, etc. I also have my IDE set whenever I do class to put in the [] tags automatically.

@schism1986

2 жыл бұрын

This is the pro-tip I didn't know I needed. Thank you for this. I've always found it messy when you start having too many classes and tried to give it some order myself but this is an excellent practice imo!

@Sampad-Sarker

2 жыл бұрын

good advice to follow

@aakash-codes

6 ай бұрын

That's a clever idea, thanks for sharing.

I followed this tutorial till the very end and the level of clarity it brought is just mind blowing! Thanks Kevin!

Totally agree with you regarding BEM and the "plan" standalone component. Most people just lengthens the card class while can be definitely an individual component. Probably because most of them don't fully understand it's purpose. Big props for pointing that out - writing clean code Is an art 😄

I've been writing my CSS kind of like this for some time now. Definitely something that I am going to be deep diving into. Great video overview, this was super useful and fun.

You are just awesome, if now i am a front end developer is because of you, i just started 2 years ago with an internship knowing literally nothing about CSS, you made my work so much easier and professional, thank you so much for your work Kevin.

I really love your videos! I've discovered your channel recently and it just openned my mind about how powerful css is! I'm a backend dev, and was not very good at css, but I always loved designing UIs! I'm currently trying to make a 3D scene with css after watching your videos about it! I wish I could do more frontend professionnaly, but I've been a backend dev for too much time... Thank again for your content!

I'm learning the front end starter kit HTML/CSS/JS and I'm glad I found your channel, you provide very good material. This CUBE workflow IMHO feels very modern and streamlined just like the fancy frameworks out there!

Love cube! I think I learned of it from your channel a year or two back and have been enjoying it!

I love how he's been improving his enunciation of "front-end friends" over the past few videos after numerous confused comments lol You Rock Kevin!

Oh wow! What a timing. Please make more frontendmentor challenges. That is sooo helpful!

That…is a very good and well-thought out CSS reset! Thanks for the link, Kevin!

Thanks sir Kevin. You are really good at educating us. I learned a lot in 50 minutes and I'm gonna try your way until I can come up with my own way of styling. I was using grid area template because I find it easier.

I actually love this. Especially the exceptions part. As someone who primarily works with JS, this makes a lot of sense.

I'm currently halfway through the Scrimba career path, and this morning I've decided to take some time to adopt a css methodology before moving on with the rest of the path. What do you know, the Amazing Kevin comes in with a Cube CSS demo using the very same frontendmentor project that I dabbled with a couple of weeks ago. You're a gift from the Gods Kevin. Keep it up!

AWESOME video! Love stuff like this. Thanks Kevin, you're the best!

Like some others I struggle with the how to break things down so this was a useful video. I’m not a fan of cluttering the html up with so many classes; something I detest about bootstrap. I prefer (and I’m still learning) to have the separation of concerns as much as possible. But I can also see the benefit of CUBE.

I'd almost given up on css until i found this channel! thank you so much kevin :)

Perfect timing! I recently completed this challenge and was unsure how to name that "plan" component with BEM. I ended up with something like card__plan-name, card__plan-pricing so on...

I love your content and clear explanations. This methodology looks super clear and makes sense! Will you ever do any video about CSS in JS - particularly styled-components library?

That's so nice. Thanks for your wonderful videos about CSS.

Great tutorial. Thanks, Kevin. Love your videos!!🙂😊

Thanks for that. All this time you made typos and couldn't figure out things made it more obvious to me why I shouldn't use utility classes too much. Instead of just remembering CSS you need to remember a lot more. So it was really useful to see your method. It made me see what is not working and what is working.

clearly, CUBE CSS is the illegitimate child of BEM and Tailwind =))

Great stuff Kevin! Very timely too, just went through Andy's Eleventy from Scratch course where he uses the CUBE CSS methodology. I'm a little conflicted about it. On the one hand I love how it embraces the cascade and uses composition classes to control layout. On the other hand, I don't tend to like utility classes. It's nice for those moments where there's not really a good name for something, and on bigger projects you'll probably see a performance boon by delivering less CSS. It kind of clutters up the HTML though, and makes it harder to read and reason about which styles are being applied, since the styles are applied in different places. For small/medium projects where the performance gains are minimal, I think it makes more sense to use variables or mixins (if using SCSS) as pseudo-utilities and popping them on the block class. Still getting used to it though, maybe I'll come around to utility classes

Ive watched so many of Kevin's videos that his voice takes over the voice in my head whenever I open VSC

This approach looks really great. I have to dive into it.

I like this. I have a family project for this weekend and I'll apply this to it.

amazing bro, thx a lot for sharing this precious knowledge

OK but "the lobotomized owl" made me crack up for real. I don't know how, but I've never heard that nickname for it before and I love it. 😅

I miss "friend and friends"! Now, your enunciation is on point. I like the quality and polish of your videos regardless of the intro. Keep up the good work!

@namesurname6294

2 жыл бұрын

btw you prob know but it's "front end friends" if I'm not wrong

@KevinPowell

2 жыл бұрын

Thank you! 😃

@MrMairu555

2 жыл бұрын

@@namesurname6294 Look up the definition of "enunciation". I think Nephi knows full well it's "front-end friends"... that's the whole point of the comment!

Awesome tutorial thanks

I think that this convention is awesome with CSS, but shines and gives out the most with pre-processors/PostCSS mixins: for example, the a tag style could have used the .link class as a mixin, or the .card block could have used all the utility classes for writing them only once. I really like this methodology and I'm working to a suggestion on the parenthesis standard they adopted!

Great job!

Thanks Kevin. learned a lot from you. My goto channel for css.

Pointer: Cursor 😅😅 That happens to me a lot, Thank you Kevin, I feel like am lucky to find your KZread Channel, You have no idea how much I frustrate to learn CSS, although I got some basic of CSS but I am not confident to use CSS with full of its potential. Again thanks 😊

Good stuff... ✨

Thank you, Kevin. Very nice and informative video once again. Might want to add "at" in the title (A look "at" the CUBE CSS..)

@KevinPowell

2 жыл бұрын

Good call, thanks for pointing it out! I just fixed it

you could give a align-self to the image that is flex item with any value other than stretch to fix it.

You pronounced "front end friends" so much more clearly this time 😂

My man!! We asked, you provide ^^. Can't wait to watch it today. Thanks!! 👍👍

If you are writing straight HTML and CSS utility classes are way too verbose and make maintaining stuff a nightmare. I really think you need to make a video explaining WHEN it is best to use utility classes (when you are creating re-usable components).

@catalintudorciurte309

2 жыл бұрын

It's not a matter of vanilla HTML/CSS vs framework but a matter of project size. A big project with an attached design system benefits 100% from utility classes. A small website/landing page would get next to no value from utilities

@Issvor

2 жыл бұрын

I'm right there with you. I've only worked on small projects, so I'm not really understanding this video that well. Having a class called "padding-48" with a single padding property doesn't make any sense to me. Why not just use an inlune style at that point?

@catalintudorciurte309

2 жыл бұрын

@@Issvor because kevin example is bad. You do not have a class named `padding-48` you have classes named `padding-1` to `padding-N`. And you go from 1 to N in a step given by your design system. Again, you need a large project and a design system to get any use of this. Utilities are not the best for 10 pages websites

@PeerReynders

2 жыл бұрын

@@Issvor There's a tutorial called "Build a dashboard with CUBE CSS"-a tool called gorko is used to generate the utility classes (e.g. color-primary, color-light, bg-tertiary-glare) from design tokens. Similarly with "Learn Eleventy from Scratch"; using Nunjucks template inheritance styling repeated all over the site typically only exist on a single template somewhere in the source.

@JawsoneJason

2 жыл бұрын

I only do large-project sites, and even then, utility classes are annoying as hell. Just set a CSS Custom Prop and you're good to go.

When you are working on bigger projects, do you have a bunch of utility classes that you just paste in ready to use them or do you set them up for each project individually?

I like the idea of using utility classes to do a lot of the work. But how do you deal with utility classes in combination with a responsive layout? For example it’s not uncommon for a text to be aligned right on big screens and left or center on small(er) screens. And there are tons of other situations where using a utility class instead of a block/element specific class could pose a challenge when it comes to responsive changes. I’ve seen CSS frameworks that implement the same utility class for different breakpoints e.g. .text-left-lg .text-right-md or whatever. But that adds a ton of overhead because you end up with lots of utility classes that you never use.

37:43 : You acknowledge a part of the problem... Utility classes violate the separation of concerns. You're making styling decisions in the HTML. Your HTML becomes so messy with the usage of these classes, you end up using invalid selectors (square brackets) to try and see what's going on. You seem to be doing a lot of extra and unnecessary work styling a site like this.

It seems that something like this would pair well with Tailwind since Tailwind provides all the utility classes for you (with the ability to extend it with your own). And Tailwind allows you to create your own compositions using @apply.

@codernerd7076

2 жыл бұрын

At that point you just writing css with css, Tailwind not working well with sass

@Voidstroyer

2 жыл бұрын

@@codernerd7076 sass is not necessary I think.

@codernerd7076

2 жыл бұрын

@Miguel Lansdorf neither is Tailwind

@Voidstroyer

2 жыл бұрын

@@codernerd7076 you mentioned tailwind doesn't work well with sass. I said that sass is not necessary. What I meant by that is that you can use tailwind as is. Tailwind provides all the utility classes you could ever need with the ability to extend them. The U in CUBE stands for Utility. What tailwind does is that it helps you not have to deal with the U anymore and you can then just focus on the CBE. And with the use of @apply, you can easily take care of the C as well leaving you just with B and E. That is why I said that CUBE pairs well with Tailwind.

@codernerd7076

2 жыл бұрын

@Miguel Lansdorf you do make a good point there

Cool!

Hey Kevin, thanks for making things really easy to understand, as you always do!! A little bit off-topic here, do you have an opinion on tools like Stitches and Radix UI? And what about Alpine.js?

@KevinPowell

2 жыл бұрын

Haven't tried any of them, so I can't really comment, sorry.

@pedrocosta3818

2 жыл бұрын

@@KevinPowell No problem! Thank you for the reply! It was only out of curiosity. Love your videos, btw!

Thank you. :')

32:40 one reason for why I never started with bracket-grouping classnames. I had no idea why it wasn't working.

Giving a very quick loo. It basically looks like tailwind, just that we're building our own? Is it really that or is there something more to it? If the case, why use it instead of tailwind? (or any other utility-first css frameworks)

what is your opinion about styled-component? I find it amazingly fast and useful

FINALLY!!! THANK YOU SO MUCH FOR SHARING THIS KEVIN!

Thanks!

@KevinPowell

2 жыл бұрын

Thank you!

i don't use css, i'm using tailwind. Best solution ever.

Idea for new format; 1-5 minute video highlighting why a new technology is better, & roughly how it works. I don't have time to watch 40+mintues on how to type in HTML & CSS anymore, even though I'd like to hangout & watch :/

@RobertMcGovernTarasis

2 жыл бұрын

It’s great for those of us that want / need to see the process. Have you tried watching at 1.5 through 2.0 speed? Works really well.

@MNbenMN

2 жыл бұрын

I'm pretty sure the KZread algorithm punishes creators for the 1-5 minute video length. Too long to be a short, too short to pepper with ads. (I hope I'm wrong though.) The full walkthroughs are great, and I like Robert McGovern's suggestion to play it back faster if you don't need all the details. Still 8x (with a plugin) to get down to the 5 minute area might be too fast.

Hi and thank you for your videos ! This has nothing to do with this video, but, what's the name of your vsc color theme ? 😅

This reminds me very much of what inuitcss does (or did, since it seems to be dead).

At 28:27 in figma, press cmd+click to select the exact element you are clicking on. No need for that double and triple clicking jazz ;)

curser: pointer; - "I always get that backwards the first time". I can relate to that all too well 😅

I just can't get behind multiple utility classes that are single lines of css. unless it's something I need to toggle with Js, like el.classlist.toggle('hidden') I feel like I might as well be writing inline styles. But I kinda do like how it means you can more easily throw on a new class to override some style. Instead of having to come up with a unique classname for your component, just to be able to select it and override some style via the css filé

What's your thought on Wordpress Divi? I'm despertaly trying to move away from wordpress as it's hastle. I expect behind the scenes it uses a lot more baggage than plain old html and css. I'm trying my hardest to learn from you and thankyou for your uploads and knowlwedge.

In every video you make, did you manually wrote that custom properties in your root?

Sticking to BEM

how are you adding brackets around things with the push of a button (or two buttons)

+ new fan here :D

44:45 the underline looks different because it is a different font, which I'm guessing is the default sans-serif that is also applied to your other buttons since they need to have the font-family property specified explicitly.

@KevinPowell

2 жыл бұрын

Same font, the reset I used had form elements and buttons inheriting the font properties 🙂. It's just the line is lower down in the design, and I don't think Figma can do the skip-ink effect which is the default in browsers now. You could modify the text decoration to pull the line down and may be it more closely though.

@fontilan

2 жыл бұрын

@@KevinPowell The font is definitely different (just compare the lowercase a or e, or uppercase S or C). But now I see that it's not just the button. The font-family you specify in your body element is "Red Hat" but there is no such font, there's "Red Hat Display", "Red Hat Text" and "Red Hat Mono". The Display variant is the one used in this design.

Instead of the "lobotomized owl", which is a great name btw, why not make the parent container a single column grid, and then use gap to control the vertical "rhythm" or spacing between elements? That's my preferred approach

@Dorchwoods

2 жыл бұрын

Nevermind, I commented too soon lol

@dripcaraybbx

2 жыл бұрын

And still he leaves it up for the historical record. Gotta respect that.

Thought it was a video about kube css framework... But no disappointed

but if you have to change, for example, the background of all your cards through the site? You'll have to search for all cards and change de background class?

CSS KING

Would’ve loved to see a better introduction before jumping into the project

💯💯💯

Sorry what’s do you use to format your css… I’ve been looking for a css formatter, I’ve installed beautify and prettier. It doesn’t work for the css

Hi Kevin, what plugin do you use to code that much easier what i mean is this --> p*2 gives u 2 paragraphs

@NickyDekker89

2 жыл бұрын

I think it's an extension called Emmet, look it up. Saves so much time :D

How do you auto create containers with class names like that, is that a extension or a key press?

@NickyDekker89

2 жыл бұрын

It's an extension called Emmet

Excellent video. However, the square brackets make it more difficult to read for me.

👏👏

Thanks for the great video. But I have no idea how to responsive spacing when using those utility classes. For example: if I use "padding-48" class, how to change the padding spacing to another size in smaller screen? I'm facing this issue when using utility class for padding and margin. Does anyone have any idea?

Hey Kevin, I have “learnt” html and css, not to an extent where I can confidently sit down and make a website/ landing page from scratch on my own, I’m looking for like a series of css projects where you kind of take us through your thought process from looking at a page and designing it. I did see one on your page, could you tell me where I can find many others like that? I don’t mind paid ones even but please don’t say scrimba, I hate their style.

@KenReeb

2 жыл бұрын

Start building projects on your own on frontendmentor. Start with beginner and you’ll eventually end up learning how to build full landing pages

why did you put button styles in data type not in a class? i know you sort of covered it, but any pointers to why it helps?

@KevinPowell

2 жыл бұрын

It's because you can't have data-type=primary secondary. It forces you to pick one, and makes it clear there should only be one. With classes, it might be obvious a button shouldn't both be primary and secondary, but there is nothing stopping from doing it either. It also provides a nice hook for JS as well. I only started doing this. Beofre I made this video I actually used classes instead, and there's nothing wrong with it at all! But now that I actually took the time to do it this way, I sort of like it 😂

Is cube css covered in one of your courses?

Do you think CSS in JS tools like emotion or styled components make these methodologies unnecessary or do you think it would be usefull to use them together?

@KevinPowell

2 жыл бұрын

I think this makes stuff like emotion and styled components unnecessary? 😅 - What I like about CUBE the most is it's about embracing how CSS works, rather than trying to make it something it isn't, which I feel is often the goal with CSS-in-JS solutions. CSS, for the most part, should be globally available. I think there can be a balance as well though, and I know why those solutions are popular, but I've seen some really bloated projects (on the styling side of things), because of how people sometimes use them.

@TravisHi_YT

2 жыл бұрын

Yeah, just put the utility classes in your css, and your component specific styles in the component.

@thatoneuser8600

2 жыл бұрын

I think styled components simplify things greatly ... You can reuse them like usual and you're developing a part of the project that fits together in one piece, so it makes sense to have CSS and JS together. If you're a mechanic, you wouldn't separate your tools by color, would you? That's the vibe I kind of get with separating CSS from JS - it just doesn't make sense and doesn't help you with your job of what you should be doing: implementing features to make the webpage work.

FWIW, IMO if an image doesn't add sufficient info to the page to require alt text, it probably should be a background image instead.

Why not a different file for each category? i.e. composition.css, utility.css and main.css, and you could import everything into style.css and link only one file in the html

Every so often, I'll try moving your head thinking it's Messenger

@KevinPowell

2 жыл бұрын

😂😂

@MNbenMN

2 жыл бұрын

lol, I just swiped at him, too

can you make a video on tailwind css

"Hello my friend & friends!" :D

@MNbenMN

2 жыл бұрын

You know? When KP was saying it fast up until a few videos ago I heard "Frontend Friends" but now I'm hearing "Frent. End. Frenz." I think I just read too many comments about it, and the word "front" doesn't exist in my ears anymore :)

Was expecting a rubix cube as a project ngl

@krishnachoubey8648

2 жыл бұрын

Ayyyeeeee thx for your heart. Now imma sell it on the dark web hehe.

🎓

i still dont understand the custom property naming convention isnt easier to just write the color name instead?

@aryzen2781

Жыл бұрын

do what makes sense to you.

So CUBE is just Tailwind will slightly less class soup?

Will You make video on atom?

@KevinPowell

2 жыл бұрын

Atom the editor, or atomic CSS? I don't really know how much value there is in looking at atomic CSS, it's basically making every class done one single thing. Tailwind might be more interesting as it takes that approach but offers a bit more, but I'm not the biggest Tailwind person.

Never heard of CUBE…. Kevin Powell to the rescue!

It's a neat concept but I feel that it just pollutes the markup which is meant to define the content, not the design. You get into a project that is mature and it's littered with all these composition and utility classes and you have to change to a new UI? That's probably more nightmarish then just refactoring basic html into a new layout with css

Thats good, but how is this different from tailwindcss.

Typo in the description - "Fronend"

@KevinPowell

2 жыл бұрын

Thanks, just fixed it!

CSS has a very limited layout protocol. Look into flutter to see how design is done over there