
Design comparison
Community feedback
- P@jyeharryPosted 2 months ago
I think you could benefit from Andy Bells teachings as I have. I've learnt a lot from learning about his css methodology, CubeCSS. It's similar to BEM but allows for even more reuse by coming up with composition classes (layout) and utility classes (think tailwind). Once you've gotten the layout done you can then add in your block classes.
An example in your code of where CubeCSS could make it neater is where you have:
.hero__button:nth-child(2) { background-color: var(--Purple-600); }
This style can only be used by one single thing. That is, the second button inside
.hero__button
. But changing the background colour of an element could be a pretty common thing. So you move this style into a utility class, something like.bg-purple-600
. Now you can apply that class to the second button as well as anywhere that may need it, rather than having to repeat the style in some other elements class.When you start approaching your css in this way, you might find your css becoming neater and smaller as you create more and more reusable classes.
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord