@ZPolikarpov
Posted
Hello there!
Good job on finishing the challenge. Here are some ideas of scss that you could implement to make your code cleaner:
Try to group your scss by the classes you create. I see that your first scss block looks a lot like your HTML structure. This makes it harder to look through your code, as card__title and card__text are in different "blocks". Usually if you want to change something about your card it's easier when all the associated classes are in their own block or document. As a rule of thumb: When you start nesting your 5th class in scss you should consider creating a separate scss block for your code.
Since you're already using double underscores in your classes, you could use & to refer to the wrapping selector
.card {
&__title{
font-size: 3.4rem;
font-weight: 700;
}
}
sets the class .card__title with the according font-size and font-weight.
Look into @mixin. Scss provides lots of code like functionalities that prove very useful. In your solution (and likely in many others you'll make) it would be nice to shorten @media only screen and (max-width: 758px) to something like @include mq(758px). You could combine it with variables to have fixed breakpoints based on what you think the different screen sizes are like @include mq($tablet)
Marked as helpful
