Clipboard page with SASS

Community feedback

• 

  Jonh Alexis•555

  @LaplaceXDPosted about 4 years ago

  Good job on this project so far Jan, I liked the animations and how everything is laid out. Since, you want a comment on your SCSS, I have multiple suggestions to offer.

  One, you should make use of how modular SCSS is, and break your one large file into multiple files, that styles one area, since this is a small project, it could be that there is a specific file for the header, the mid sections, and the footer. If you want to take it up a notch then try reading the 7:1 pattern/architecture for scss, it is a good architecture to follow in order to create clean and maintainable code.

  Two, try to minimize nesting, while it is a good feature, nesting can become really bad if you have multiple things to style, since you'd start abusing the feature, and you'd have a code block that has 5 levels deep of nest into it. How I approach nesting, I only use my breakpoint styles, pseudo-selector, and pseudo-classes styles as the only things that should be nested, other than that they should be on a separate code block.

  Three, using the BEM methodology, is also pretty good with sass, you should look it up, although it is not everyone's cup of tea.

  Four, making use of extends and mixins are also pretty valuable in sass, however you should avoid extends as much as possible since it can change the arrangement of your code when a css file is generated. You should only use extends when the context behind the styles are connected and not because they have similar styles by coincidence, if their style similarities are by coincidence then use a mixin, it is a great feature to use to keep your code DRY, basically non-repeating.

  Five, avoid nesting classes within classes, or elements within classes, since this increases specificity, and in the long run it would be much more difficult to override styles when you want them in a different state, and then you would have to use !important, which is basically a code smell, and should only be used when all options are not possible. There are a lot of articles for this regarding specificity, so you should check it out.

  That is all I can say regarding your SASS, it was pretty readable so far, although it could do some work. Cheers!

  2

  ---

  

  Jan•500

  @eljasiuPosted about 4 years ago

  Thanks a lot! It is a great collection of hints and I am sure I will try to apply them in my projects:-)

  1