Hi, @Milleus. I'm happy to see more projects that are made with the CUBE CSS methodology. I want to try this methodology, but I need more examples. This is a very good and clean one. Thanks for this.
Hi @adonmez04
I've learnt a lot about CUBE CSS from this video by Kevin Powell and I hope this will help you out as well - https://www.youtube.com/watch?v=NanhQvnvbR8.
Also, you might notice that the way I use CUBE CSS is a little different. That's because I've changed it a little to my preference:
- Sometimes I place a "Block" CSS under "Exception" instead because I prefer to have similar component CSS together, e.g.
.cardis with.card[data-state="inactive"]. - I don't use groupings (yet). I find that classes are typically short and readable so this felt unnecessary for now - https://cube.fyi/grouping.html
Hope this helps!
@Milleus Grouping is a major problem for CUBE CSS. Using [] or | to separate classes is a little bit confusing. I tried to use prefixes to separate them like u-utility, b-block etc. but it didn't work. My selectors became hard to read and write. Maybe we don't need all of them and we should just try to keep them readable like your example lol.
Thanks for sharing the video. Kevin is amazing. If you haven't seen it yet, I learned a lot from this video. I highly recommend it. https://www.youtube.com/watch?v=KE8MdPD9yac.
