Как уменьшить / повторно использовать css, который я пишу?

Question

На странице я пишу css многие из которых одинаковы.

например:

.avator img{
width:100%;
margin-top:10px;
}

.title img{
width:100%;
line-height:0px;
}

многие css имеют один и тот же.

как построить их, чтобы получить самый маленький файл?

Answer 1

Использование raw css

.avator img,
.title img{/* your css */}

Использование scss или sass

.avator,
.title{
    img{/* your css */}
}

scss / sass / less онлайн-инструменты .

Вы можете использовать отдельные class для elements

.responsive-image{
    display: block;
    height: auto;
    max-width: 100%;
}
/* For responsive image */
.full-image{
    width: 100%; /* Full width image using css */
}
.mt-10{
    margin-top: 10px; /* Margin top css for all elements */
}
h1,h2,h3,h4,h5,h6{font-weight: bold;}
p{font-weight: normal;}

Использование :

<img alt="Image title" class="full-image mt-10" src="your image file name with extension" />

Примечание: Попробуйте написать многоразовый css класс. Вы можете прочитать ссылки на удар

https://medium.com/@afrench53198 / многоразовые-ремонтопригодные-модульные- css -b0ffedf1c208

https://medium.com/insider-inc-engineering/delightful-ways-to-write-reusable-css-using-subclasses-903e90c9cf87

https://css-tricks.com/crafting-reusable-html-templates/

Answer 2

Вы можете использовать служебные классы . См. Следующие примеры.

.width-100 {
  width: 100%;
}

.m-t-10 {
  Margin-top: 10px;
}

.l-h-0 {
  line-height: 0px;
}

Вы можете повторно использовать эти служебные классы в вашем HTML, как показано ниже.

<p class="post-title m-t-10 l-h-0">Post Title</p>

<div class="card-item width-100 m-t-10">Card Contents</div>

Надеемся, вы можете сохранить много строк в своем css файл.