Meet landing page

Community feedback

• 

  P

  Jye Harry•250

  @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 helpful

  0