SASS Code Review Checklist
Checklist
| Sr No. | Check | Reference |
|---|---|---|
| 1 | There should be default / global folder for variables, mixins etc.
| |
| 2 | There should be modules folder for section wise partial files if sections are used in multiple pages
| |
| 3 | There should be pages folder for page wise partial files if page styling is unique.
| |
| 4 | Strictly use Variables for Colors, Breakpoints, Font Family, Font Size, Font Weight. Use Object variables if possible | Eg: in _variables.scss $colors: ( primary-color: #00497e, secondary-color: #00487d, ); use in any partial files .content { background-color: map-get($colors, primary-color); } |
| 5 | Create mixins to reuse it in all partial files. Use mixins wherever possible and do not create unnecessary mixins, if not used, remove it. | https://sass-lang.com/documentation/at-rules/mixin |
| 6 | Use meaningful class and IDs | |
| 7 | Use extends / placeholders for repeated styling | https://sass-lang.com/documentation/at-rules/extend |
| 8 | Nesting must be upto 6 levels. | |
| 9 | & operator should be used for selecting parent and pseudo selectors. | Eg: a { color: $black; &:hover { opacity: .8; }} |
| 10 | Operators( +,-,*,/,%) : This mathematical operators should be used for calculating % values | Eg: a { width: $fullWidth / 2; /* $fullWidth: 100%; defined in _variables.scss */ } |
| 11 | Comment your code if necessary, because partial files names are already self explanatory. | |
| 12 |
| Eg: margin: 0; padding: 0; |
| 13 | Omit leading ""0""s in values. | Eg: Instead of font-size: 0.8px; Use font-size: .8px; |
| 14 | Use 3 character hexadecimal notation where possible. | /* Not recommended */color: #eebbcc;#eebbcc= hexadecimal notation. /* Recommended */ color: #ebc; #ebc= hexadecimal notation. |
| 15 | Follow Codecop : Declarations are to be consistently ordered; box-model, display, positioning and etc. | .selector {/* Box Model */box-sizing: border-box;width: 100px;height: 100px;padding: 10px;border: 10px solid #333;margin: 10px;/* Display */display: inline-block;overflow: hidden;float: left;/* Positioning */position: absolute;z-index: 10;top: 0;right: 0;bottom: 0;left: 0;/* Other (in alphabetical order) */background: #000;color: #fff;font-family: sans-serif;font-size: 16px;text-align: right;opacity: 0;outline: none; } Note: Commenting in the above code is just for reference |