Зачем использовать несколько классов в html? - PullRequest
Новая
       42

Зачем использовать несколько классов в html?

0 голосов
/ 29 апреля 2020

Я новичок в программировании, я не понимаю, почему мы должны использовать несколько классов в HTML. Я имею в виду в любом случае, даже если это один класс или несколько классов, все CSS стиль будет применяться только к одному и тому же контенту / тексту, тогда какая польза от нескольких классов, когда один класс будет делать то же самое?

Ответы [ 4 ]

1 голос
/ 29 апреля 2020

Вы используете несколько классов, чтобы сохранить свой код. DRY (Не повторяйте себя), например, допустим, у вас есть две кнопки: синяя основная кнопка и красная дополнительная кнопка. 

.red-button {
  background-color: red;
  border-radius: 3px;
  color: #fff;
  padding: 10px;
}

.blue-button {
  background-color: blue;
  border-radius: 3px;
  color: #fff;
  padding: 10px;
}

Здесь вы повторили css.

С несколькими классами вы можете сделать что-то вроде 

.button {
  border-radius: 3px;
  color: #fff;
  padding: 10px;
}

.button.red {
  background-color: red;
}

.button.blue {
  background-color: blue;
}
1 голос
/ 29 апреля 2020

Класс - это способ пометить элемент как часть группы. Что-то может принадлежать нескольким группам. 

.agent {
    background: #afa;
    margin: 5px;
    padding: 5px;
    width: 10em;
    list-style: none;
}

.double-agent {
    background: #faa;
}
<ul>
  <li class="agent">Edger Raven</li>
  <li class="agent">Simon Sly</li>
  <li class="agent double-agent">Sergei Skripal</li>
  <li class="agent double-agent">Belgian Butcher</li>
  <li class="agent">Jack the Mechanic
  </li>
</ul>
1 голос
/ 29 апреля 2020

Это позволяет вам повторно использовать классы, где вам нужны похожие характеристики. Если бы вы написали стили отдельно для каждого элемента, у вас было бы много повторяющегося кода

0 голосов
/ 29 апреля 2020

Я думаю, вы хотите спросить это: 

.a{
   height:20px;
   width:50px;}

.b{background:red;}
<div class="a b"></div>

Почему я использовал «a» и «b» вместо того, чтобы просто использовать «a» и применять код .b {} в .a {}

Рассмотрим этот случай: 

.head{font-size:50px;}
.green{color:green;
       margin:100px;}
<p class="head">This is an example</p>
<p class="head green">Hello World!</p>
<p class="green">i love maths</p>
<p class="green">3+3=3!</p>

Поэтому я хотел сделать контент зеленым, а контент большим. "Привет, мир!" Линия имела оба. Вот почему я использовал 2 разных класса, поэтому мне не придется повторять один и тот же код снова для «Hello World!»

Пример, который я привел, был довольно неудачным, но да, вам придется используйте несколько классов, чтобы вы могли использовать один и тот же код CSS для других тегов в HTML без повторения кода.

...