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!

Getting and Updating Dynamic Heights for React Components

If you work on #UI you will always have many UI DOM elements that get and/or change height dynamically (eg. help/description strings etc.), with resize events or such, that you can't set and update heights for in CSS. There can also be times you do need some heights on certain elements to calculate heights for something else eg. Some ag-grid container (notorious for needing static height some parent) etc.

The usual way you might do it via dynamic scripts is: Calculate height selecting the DOM element struggle with classes, IDs, with querySelector etc. using yourElement.offsetHeight; use React refs, vars to get it, update it, so it goes....

If you're using React, here's cool, super useful React Component wrapper that was shared on my team! You can set dynamic heights in a much "cleaner" way and it is also good for cases where setting an ID hook may not even be an option as some dynamic IDs might be reserved for it. 

Prerequisites: 

1. You need your div for height calculation as its own div or separate component (eg. Header string component) that can be wrapped in the component wrapper and not as a div that is created by being passed as a prop to another component.
2. You still need to account for resize events calling updateHeight functions in React Life Cycle hooks (componentDidMount, componentWillUnmount as your case may be.)
3.  Need to set state for heights and have functions to update heights based on above. 

Steps:

1.  Usual npm/yarn install, import etc. (import { ReactHeight } from 'react-height';)
2. Set initial heights if any as const s in your constructor
3. Create your main heights calculate function. i.e. componentHeightReadyFunc
4. Create your updateHeight function and use them in 
5. Use it to wrap your component as shown in the usage step.

This is your "main course" / "meal" function

Usage:

This is THE STUFF that you're now ready to use now in your component render.
Voila! you've got your dynamic height/s and updated them. Most likely, you've set them as inline styles on the component where you need them (yes, inline styles are legit use case when you need dynamic heights etc., so don't fret.).

Now just watch it change in the Devtools inspector and enjoy your minute of "glory"! If not, change, debug, rinse and repeat.

References:
https://www.npmjs.com/package/react-height

I have put a lot of thought and time into writing this, so that anyone new to ReactJS (like me at this time) can find it easy to use, consolidating aspects that my team and I have found through research, trial and error.

If you found this post useful please share and donate to these wonderful non-profits that are doing amazing work! It does NOT benefit me monetarily, but does more than any monetary benefit can. I will surely be grateful and motivated to post/share more. 
If you found this post worthless, definitely donate to these worthy causes, so you can feel better by doing something else worthwhile to compensate.

Sheldrick Wildlife Trust
https://www.sheldrickwildlifetrust.org/donate

The Elephant Sanctuary in Tennessee
https://shop.elephants.com/2020YearEndCampaign

Elephant Nature Park, Chiang Mai (of the amazing "Lek" Chailert):
https://www.elephantnaturepark.org/how-you-can-help/
For those in USA: Since ENP is a foreign non-profit, you can match the donation from your companies if you donate to their sister concern 501c3 below:
https://www.abrahamfoundation.org/elephant-nature-park