Semantic CSS problems and why Utility classes are the solution (notes)

...Most of the time my CSS was like a mirror for my markup; perfectly reflecting my HTML structure with nested CSS selectors.. My markup wasn't concerned with styling decisions, but my CSS was very concerned with my markup structure.

Similar components

Our markup all of a sudden knows that we want both of these pieces of content to be styled as media cards. What if we wanted to change how the author bio looked without changing how the article preview looks?

Now we need to change the HTML! Blasphemy!

What if we needed to add a new type of content that also needed the same styling?

Think about which is more likely to happen ??💭

Keywords: Css, React, Funcitonal Css