Mobile first design using Flex Box and Grid

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted about 3 years ago

  Hi

  Semantics and css look pretty good on this.

  I recommend trying to simplify your class names a bit and only adding modifier classes on elements if they are really needed. Are you trying to use BEM? This seemed a bit of a mixture so I wasn’t sure. The html is really hard to read because of the way classes have been written (and lots of classes that aren’t doing anything I think?)

  Remember to always include focus-visible styles on interactive elements, that’s the only thing missing I think.

  I hope this is helpful feedback 😊

  Ps No, outlines can’t be rounded yet. There is an experimental property in Firefox but that can’t be used yet. Box shadow is the best way to get around that, or pseudo element with border

  Marked as helpful

  1

  ---

  

  Randy Kwalar•75

  @RandyKdevPosted about 3 years ago

  @grace-snow Thanks for the review.

  Yes, I am currently learning BEM and I am still in doubt about how to properly name classes.

  After reading this, I discovered some classes aren't being used so I have removed them.

  I have added the focus-visible styles. My first time hearing of focus-visible, will read on it more.

  Thanks :)

  0

  

  T

  Grace•31,270

  @grace-snowPosted about 3 years ago

  @RandyKdev with bem the important thing is to start new blocks when you need/want to. Don’t chain elements deep for no reason

  • Block
  • Block__Element
  • Block__Element Block__Element—Modifier
  • New-block
  • New-block__Element etc

  Never Block__element__element or similar

  And if everything belongs to one component, you can every element within it with the same block name, even if they are not direct children

  Marked as helpful

  1

  

  Randy Kwalar•75

  @RandyKdevPosted about 3 years ago

  @grace-snow Thanks for the insight.

  0