Typical Styling Conventions
It's not descriptive
Potential bad abstractions
Naming things is hard already
Need to open template + sass files side by side for all information
☝️ (I'm lazy)
<div class="user-card">
<div class="user-card__container">
<img class="user-card__image" src="">
<div class="user-card__info">
<div class="user-card__info-top">
<p class="user-card__name">Tony</p>
<p class="user-card__title">Front End Developer @ TC</p>
</div>
<div class="user-card__info-bottom">
<button class="user-card__button">Message</button>
</div>
</div>
</div>
</div>
I see things are broken into appropriate sections, but I have no idea what it looks like
Much Better: Functional/Utility CSS
Example
.flex {
display: flex;
}
.justify-between {
justify-content: space-between;
}
.bg-black {
background-color: #22292f;
}
<div class="flex justify-between bg-black">
<button>Click Me</button>
<button>Click Me</button>
</div>