Two useful CSS / SCSS tips

We all struggle with #CSS specificity issues in our codebase as our tech-debt increases while fighting with frameworks that we should try to be avoiding in the first place! But you may have to work with an existing one at times. Here are a couple of ways to avoid and mitigate the issues:

1. To increase specificity in tough cases without using too many selectors, IDs etc.(of course NO !important). Try using the same class twice. A very legit tip which works great, straight from the horse's mouth, from #MDN (Mozilla Developer Network). eg .my-class.my-class { property: value; more rules etc. }
2. If you happen to use #ReactStrap components, you will end up with a lot of generic classes used by the framework everywhere in your components, whether they make sense or or not (eg. the notorious .form-group class). Result... a lot of unwanted paddings and nested paddings on your DOM elements which make your alignments off.
   
   Do yourself a favor and make a little #CSS #reset of your own by setting padding: 0 (and/or similar resets as needed) on all those pesky .form-group, .col, col-n... flex-column what have you, and start with a clean slate. You may need to use !important as a legit use-case if you need to override any !important in the framework itself.
   
   Then add back just a few margins and/or paddings on a couple of parent elements and enjoy the "clean" aligned results!
   
   If your #UI still "jagged", rinse and repeat on more generic classes. Your CSS / #SCSS will only get "cleaner" / better after this.
   

Please donate to this non-profit and/or share:

https://gofund.me/90dcb3f7

Thanks in advance!