Блог

Какой стиль стилизации CSS является более предпочтительным в отрасли?

1. Создайте классы для каждого атрибута (например, bootstrap), затем прикрепите классы в HTML. Например:

   HTML: <p class="text-white text-bold"> John Doe </p>

   CSS:

   .text-white {
color: white;
}

   .text-bold{
font-weight: bold;
}

2. Обычно добавляется по 1 классу на HTML-тег. Например:

   HTML: <p class="description"> John Doe </p>

   CSS:

   .description {
color: white;
font-weight: bold;
}

Какой подход в целом лучше?

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

Всегда называйте свои классы как можно более общими.

Пример:

 .hand { cursor:pointer; }
.padding-5 { padding:5px; }
.padding-left-5 { padding-left:5px; }
.border-1 { border:solid 1px #f00; } 
.corner-1 { corner-radius: 3px; }
.margin-auto { margin: auto; }
.bgcolor-1 { background-color: #b2e8ff; } /* light blue */
.bgcolor-2 { background-color: #FFF3CD; } /* light yellow */
.table-hover tr:hover { background-color: #eaf6ff !important} /* overide bootstrap's table hover */
  

Не делайте это так. Наличие только одного стиля в классе приведет к путанице, это было бы более запутанно, чем помещение всех стилей для элемента в его тег как

 <div style="border:solid 1px #333; color:#0f0; etc;
  

Что я нашел, так это лучший подход — создать класс generic type group как

 .boxStyle1{
    border:solid 1px #333;
    color:#0f0;
}
.fontStyle1{
font-family: Arial, ...;
font-size:.9em;
}
  

И использование их в разных элементах, таких как

 <div class="boxStyle1 fontStyle1">
  

Использование подхода группового стиля позволяет применять одну и ту же тему для разных элементов в зависимости от того, какой внешний вид вы хотите. Таким образом, это менее запутанно, когда вы хотите изменить внешний вид вашего сайта.

Я узнал кое-что похожее на второй метод. Вы указываете имена классов / идентификаторов стилей, указанные в теге HTML, <p class="sample">...</p> , затем описываете эти детали в отдельном файле CSS:

 .sample {
  font-family:Arial;
  font-variant:small-caps;
  color:#FF0;
  text-align:center;
}
  

Одним из основных преимуществ является эффективность. Поскольку все сведения о стиле собраны в одном файле, он загружается один раз для посетителей вашего сайта, и информация доступна для отображения на каждой странице вашего сайта, которую они посещают. Таким образом, сокращается время, необходимое для загрузки ваших страниц, и улучшается пользовательский интерфейс. Это также более эффективно для вас, когда вы кодируете свои страницы. Как только вы решите, как вы хотите, чтобы выглядел ваш веб-сайт, вы можете создать все стили элементов и ссылаться на них так часто, как необходимо, что значительно сократит время на создание вашего сайта. (Примечание: это не означает, что у вас не может или не должно быть более одного файла CSS.)

Бывают случаи, когда требуется указать более одного стиля класса / идентификатора для элемента: <div class="sample sample2"></div> . Иногда имеет смысл сделать это, однако разделение каждого отдельного стиля на его собственный класс / идентификатор является излишним. Научитесь группировать все для вашего class="sample" в вашем CSS .sample (классе).

W3C, Mozilla и онлайн-курсы, предлагаемые через edX, также поддерживают этот метод. Который должен четко указывать, что это «отраслевой стандарт».

W3C начинается с HTML CSS
Введение Mozilla в верстку CSS
Курсы edX по CSS