I am the average height of my grandfather’s generation. I have brown hair, that is rapidly going gray even at the ripe old age of 31. I have blue eyes and olive skin.
Now that you know more about my physical appearance than you wanted to let’s get down to brass tacks.
The inheritance model that resulted in me having these physical characteristics is complex. At a genetic level during my mother’s pregnancy, recessive and dominant traits were engaging in complex calculations to determine what physical attributes I would have. Blue eyes beat out my brother’s hazel eyes, and my sister’s brown eyes. The early graying gene and brown hair beat out my sister’s red hair.
At this point you are wondering if you have stumbled onto the wrong blog. Because what does this have to do programming and CSS?
Well it turns out that CSS uses basically the same inheritance model. Just like each of your parents contributed traits to you. Different parts of their biological inheritance influence your physical attributes. DOM elements go through the same thing. They inherit different attributes from their parents and based on a dominance calculation (specificity!) their appearance takes shape.
I’ve found that this tends to make thinking about CSS inheritance a lot easier. This isn’t CS inheritance that you have seen in other languages. This is inheritance as your body knows it. This is one of the most dynamic and powerful inheritance models in existence. Enjoy it! Sure it looks like magic sometimes, but so does any sufficiently advanced technology.
Sometimes it's hard to come up with ideas to practice your programming skills. Try making a Chrome extension with React! This is a quick tutorial on how to go through the process of making a Chrome extension and you'll see how it uses React and TypeScript.