@Dev-MV6
Posted
Hi there, good job on completing the challenge.
Code readability is essential in collaborative environments. One piece of advice I can give you to improve is to start using more descriptive names for your classes.
This will help you when working on larger projects where the style sheets are much longer. If you develop the habit of using descriptive class names for your elements, you won't get lost if you ever need to scale your code, and it will certainly help other developers understand it more easily.
For example, instead of using class-names like container
, content
, author
, try to think of the element you are styling as a component and the elements inside that element (children elements) as parts of that component.
This way,
- Instead of
.container
, you can use.card
for the main container, now it's a component - Since
.content
is part of the.card
component you can use.card-content
.author
would be.card-author
- Instead of using
.text h1
to select the card title you can assign a class like.card-content__title
to theh1
element an use it as selector in your CSS
Don't get frustrated if you struggle with finding the best descriptive class name for your elements at first, you'll better at that with time.
Another thing you can do to improve your code readability is to write your CSS selectors from top to bottom, in hierarchical order so the parent elements of the component go first, and the sibling elements just like they are positioned in the HTML tree.
For example, in your code the .box
should go before the .author
selector because the .box
element is positioned before the .author
element in the card.
Hope you find this helpful 👍
Marked as helpful
@mendesdomingosdev
Posted
@Dev-MV6 Very helpful, thnx a lot