A look at the CUBE CSS methodology in action
HTML-код
- Опубликовано: 5 июл 2024
- There are a lot of different approaches to writing CSS, with CUBE CSS by Andy Bell being one of the newer methodologies out there. I get a lot of questions about it, so in this video I look at coding up a Frontend Mentor project using the CUBE CSS approach.
🔗 Links
✅ CUBE CSS Documentation: cube.fyi/
✅ The Design I'm working on: www.frontendmentor.io/challen...
✅ Andy Bell's CSS reset: piccalil.li/blog/a-modern-css...
✅ Written overview of CUBE: piccalil.li/blog/cube-css/
✅ My look at BEM: • Why I use the BEM nami...
✅ Custom Properties: • CSS Variables - An int...
✅ Logical properties: • Write better CSS using...
✅ The :where() selector: • :where() - Remove the ...
⌚ Timestamps
00:00 - Introduction
00:48 - What we're building
01:12 - What is CUBE CSS
02:17 - What we're starting with
03:18 - Writing the HTML
09:18 - Setting up the global styles
13:42 - Utilities
23:26 - Composition
30:15 - Groupings
33:09 - More composition
39:00 - Exceptions
#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 RUclips 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!
Whenever I want to learn a certain thing in CSS, I type that thing into RUclips 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.
Kevin is just Awesome!
You know what I mean 😂
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.
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!
good advice to follow
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!
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.
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!
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!
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.
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 😄
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!
clearly, CUBE CSS is the illegitimate child of BEM and Tailwind =))
That…is a very good and well-thought out CSS reset! Thanks for the link, Kevin!
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!
I actually love this. Especially the exceptions part. As someone who primarily works with JS, this makes a lot of sense.
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'd almost given up on css until i found this channel! thank you so much kevin :)
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.
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...
That's so nice. Thanks for your wonderful videos about CSS.
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. 😅
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.
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?
Great tutorial. Thanks, Kevin. Love your videos!!🙂😊
Ive watched so many of Kevin's videos that his voice takes over the voice in my head whenever I open VSC
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
I like this. I have a family project for this weekend and I'll apply this to it.
This approach looks really great. I have to dive into it.
amazing bro, thx a lot for sharing this precious knowledge
Pointer: Cursor 😅😅 That happens to me a lot, Thank you Kevin, I feel like am lucky to find your RUclips 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 😊
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!
btw you prob know but it's "front end friends" if I'm not wrong
Thank you! 😃
@@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!
Thanks Kevin. learned a lot from you.
My goto channel for css.
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!
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?
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).
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
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?
@@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
@@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.
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.
Great job!
Thank you, Kevin. Very nice and informative video once again. Might want to add "at" in the title (A look "at" the CUBE CSS..)
Good call, thanks for pointing it out! I just fixed it
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.
Awesome tutorial thanks
FINALLY!!! THANK YOU SO MUCH FOR SHARING THIS KEVIN!
what is your opinion about styled-component? I find it amazingly fast and useful
you could give a align-self to the image that is flex item with any value other than stretch to fix it.
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'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.
Good stuff... ✨
You pronounced "front end friends" so much more clearly this time 😂
how are you adding brackets around things with the push of a button (or two buttons)
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 ? 😅
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?
Haven't tried any of them, so I can't really comment, sorry.
@@KevinPowell No problem! Thank you for the reply! It was only out of curiosity. Love your videos, btw!
32:40 one reason for why I never started with bracket-grouping classnames. I had no idea why it wasn't working.
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.
At that point you just writing css with css, Tailwind not working well with sass
@@codernerd7076 sass is not necessary I think.
@Miguel Lansdorf neither is Tailwind
@@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.
@Miguel Lansdorf you do make a good point there
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é
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?
Cool!
In every video you make, did you manually wrote that custom properties in your root?
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?
Thank you.
:')
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.
Thanks!
Thank you!
Sticking to BEM
i don't use css, i'm using tailwind. Best solution ever.
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
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 ;)
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.
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.
@@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.
Hi Kevin, what plugin do you use to code that much easier
what i mean is this --> p*2 gives u 2 paragraphs
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?
It's an extension called Emmet
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.
Start building projects on your own on frontendmentor. Start with beginner and you’ll eventually end up learning how to build full landing pages
curser: pointer; - "I always get that backwards the first time". I can relate to that all too well 😅
💯💯💯
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?
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.
Yeah, just put the utility classes in your css, and your component specific styles in the component.
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.
👏👏
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
+ new fan here :D
CSS KING
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?
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 😂
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
Nevermind, I commented too soon lol
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
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 :/
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.
I'm pretty sure the RUclips 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.
Is cube css covered in one of your courses?
can you make a video on tailwind css
Excellent video. However, the square brackets make it more difficult to read for me.
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.
i still dont understand the custom property naming convention isnt easier to just write the color name instead?
do what makes sense to you.
So CUBE is just Tailwind will slightly less class soup?
🎓
Will You make video on atom?
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.
Would’ve loved to see a better introduction before jumping into the project
Every so often, I'll try moving your head thinking it's Messenger
😂😂
lol, I just swiped at him, too
Thats good, but how is this different from tailwindcss.
"Hello my friend & friends!" :D
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 :)
Never heard of CUBE…. Kevin Powell to the rescue!
CSS has a very limited layout protocol. Look into flutter to see how design is done over there
Was expecting a rubix cube as a project ngl
Ayyyeeeee thx for your heart.
Now imma sell it on the dark web hehe.
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
Typo in the description - "Fronend"
Thanks, just fixed it!