Use SASS/SCSS instead of CSS – SASS is a preprocessor scripting language that extends the capabilities of CSS.(source) However, browsers can't understand SASS directly, so it needs to be compiled into CSS.(source) One benefit of using SASS is that you can organize your code better, such as by grouping all article-related styles into a common wrapper.
.article__type {
background-color: var(--yellow);
font-family: 'Figtree', sans-serif;
...
}
.article__title {
font-weight: 800;
&:hover {
color: var(--yellow);
cursor: pointer;
}
}
.article__text {
color: var(--gray-500);
line-height: 150%;
}
.article {
&__type {
background-color: var(--yellow);
font-family: 'Figtree', sans-serif;
...
}
&__title {
font-weight: 800;
&:hover {
color: var(--yellow);
cursor: pointer;
}
}
&__text {
color: var(--gray-500);
line-height: 150%;
}
}
Enhance your semantic HTML – I’ve noticed that you're already using some semantic elements like <section> and <article>. However, here are a few additional recommendations:
<time dateTime='2023-09-23'>Published 23 Sep 2023
- put your image inside <figure>
<figure className='card__graphics'>
<img />
</figure>
- put someone's (e.g. author) info inside <address>
<address className='card__author'>
<img />
<span className='card__author-name'>...</span>
</address>
