Frontend гайдлайн по HTML/CSS

Верстание достаточно сложное занятие. И часто, самые на первый взгляд простые вещи тяжело реализовать!
И поэтому мы перевели для вас замечательную статью - Гайдлайн по HTML и CSS. Тут вы сможете почерпнуть для себя что нибудь новое либо вспомнить былое старое. В этой статье собрано большое кол-во разнообразных техник, которые могут облегчить вашу жизнь.

HTML

Семантика

HTML5 предоставляет нам много смысловых элементов, направленных точно описать содержание. Убедитесь, что вы правильно описываете свою структуру.
Код
<!-- Плохо -->
<div id="main">
  <div class="article">
  <div class="header">
  <h1>Blog post</h1>
  <p>Published: <span>21st Feb, 2015</span></p>
  </div>
  <p>…</p>
  </div>
</div>

<!--Хорошо -->
<main>
  <article>
  <header>
  <h1>Blog post</h1>
  <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p>
  </header>
  <p>…</p>
  </article>
</main>

Убедитесь, что вы понимаете семантику элементов, которые используете.
Код
<!-- Плохо -->
<h1>
  <figure>
  <img alt="Company" src="logo.png">
  </figure>
</h1>

<!-- Хорошо -->
<h1>
  <img alt="Company" src="logo.png">
</h1>

Краткость


Пишите ваш код короче. Забудьте о своих старых привычек XHTML.
Код
<!-- плохо -->
<!doctype html>
<html lang=en>
  <head>
  <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
  <title>Contact</title>
  <link rel="styleshee" href="style.css" type="text/css" />
  </head>
  <body>
  <h1>Contact me</h1>
  <label>
  Email address:
  <input type="email" placeholder="you@email.com" required="required" />
  </label>
  <script src="main.js" type="text/javascript"></script>
  </body>
</html>

<!-- Хорошо -->
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Contact</title>
  <link rel="stylesheet" href="style.css">

  <h1>Contact me</h1>
  <label>
  Email address:
  <input type="emai"l placeholder="you@email.com" required>
  </label>
  <script src="main.js"></script>
</html>

Доступность


Доступность информации не должна быть второстепенным делом. Вам не нужно быть экспертом WCAG чтобы улучшить свой сайт, начните уже сейчас, фиксируя разные мелочи, которые делают огромную работу, такие как:
  • научиться использовать атрибут alt правильно
  • убедившись, что ваши ссылки и кнопки прописаны как таковые (без <div class="button"> - это просто зверство)
  • не полагайтесь исключительно на цвет, чтобы передавать информацию
  • используйте тег label для управления элементами формы

Код
<!-- Плохо -->
<h1><img alt="Logo" src="logo.png"></h1>

<!-- Хорошо -->
<h1><img alt="My Company, Inc." src="logo.png"></h1>

Язык и кадировка


Определение языка и кодировки страницы не является обязательным, но рекомендуется всегда объявлять их, даже если они указаны в заголовках HTTP.
Код
<!-- Плохо -->
<!doctype html>
<title>Hello, world.</title>

<!-- Хорошо -->
<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <title>Hello, world.</title>
</html>

Производительность


Размещайте все скрипты в самом низу документа, перед закрывающим тегом body, иначе они не блокируют рендеринг вашей страницы. Если ваша таблица стилей слишком большая, то изолируйте часть стилей в другой файл, что бы ускорить отрисовку необходимых элементов страницы и отложить загрузку вторичных стилей, в отдельную таблицу стилей. Два HTTP запроса к базе данных хуже, чем один, но восприятие скорости является наиболее важным фактором.
Код
<!-- Плохо -->
<!doctype html>
<meta charset="utf-8">
<script src="analytics.js"></script>
<title>Hello, world.</title>
<p>...</p>

<!-- Хорошо -->
<!doctype html>
<meta charset="utf-8">
<title>Hello, world.</title>
<p>...</p>
<script src="analytics.js"></script>

CSS


Точка с запятой


Всегда старайтесь ставить точку с запятой в конце последнего объявленного свойства в CSS. Это удобно в случае частых изменений кода, так как если забыть об этом, свойства, прописанные после попросту не сработают!
Код
/* Плохо */
div {
  color: red
}

/* Хорошо */
div {
  color: red;
}

Блочная модель


Блочная модель должна быть одинаковой для всего документа.Глобальная * {box-sizing: border-box;} Это удобно, но старайтесь не изменять блочную модель по умолчанию без необходимости.
Код
/* Плохо */
div {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

/* Хорошо */
div {
  padding: 10px;
}

Поток


Не изменяйте поведение элементов по умолчанию, если вы можете этого избежать этого. Держите элементы в естественном потоке документа столько, сколько вы можете. Например, удаление пробелов, у изображения не должны заставить вас изменить его отображение по умолчанию:
Код
/* Плохо */
img {
  display: block;
}

/* Хорошо */
img {
  vertical-align: middle;
}

Кроме того, не удаляйте элемент из потока, если вы можете избежать этого.
Код
/* Плохо */
div {
  width: 100px;
  position: absolute;
  right: 0;
}

/* Хорошо */
div {
  width: 100px;
  margin-left: auto;
}

Позиционирование


Есть много способов, чтобы позиционировать элементы в CSS, но старайтесь ограничивать себя в свойствах / значениях ниже. В порядке предпочтений:
Код
display: block;
display: flex;
position: relative;
position: sticky;
position: absolute;
position: fixed;

Селекторы


Старайтесь уменьшать длину селекторов тесно связанных с DOM. Попробуйте добавить к ним класс. Чем длинней селектор, тем дольше браузер будет его обрабатывать!
Код
/* Плохо */
div:first-of-type :last-child > p ~ *

/* Хорошо */
div:first-of-type .info

Если избежать длины не удается, то старайтесь не перегружать селектор ничем лишним.
Код
/* Плохо */
img[src$=svg], ul > li:first-child {
  opacity: 0;
}

/* Хорошо */
[src$=svg], ul > :first-child {
  opacity: 0;
}

Специфичность


Не делайте значение селекторов трудно заменяемыми. Старайтесь не использовать свойство !important.
Код
/* Плохо */
.bar {
  color: green !important;
}
.foo {
  color: red;
}

/* Хорошо */
.foo.bar {
  color: green;
}
.foo {
  color: red;
}

Переопределение


Переопределение стилей делает отладку селекторов труднее. Избегайте его, когда это возможно.
Код
/* Плохо */
li {
  visibility: hidden;
}
li:first-child {
  visibility: visible;
}

/* Хорошо */
li + li {
  visibility: hidden;
}

Наследование


Не дублируйте стили, которые могут быть унаследованы.
Код
/* Плохо */
div h1, div p {
  text-shadow: 0 1px 0 #fff;
}

/* Хорошо */
div {
  text-shadow: 0 1px 0 #fff;
}

Краткость


Старайтесь объединять несколько свойств в одно общее.
Код
/* Плохо */
div {
  transition: all 1s;
  top: 50%;
  margin-top: -10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}

/* Хорошо */
div {
  transition: 1s;
  top: calc(50% - 10px);
  padding: 5px 10px 20px;
}

Язык


Используйте слова в математических операциях
Код
/* Плохо */
:nth-child(2n + 1) {
  transform: rotate(360deg);
}

/* Хорошо */
:nth-child(odd) {
  transform: rotate(1turn);
}

Вендорные префиксы


Убейте устаревшие префиксы. Если вам необходимо их использовать, вставьте их перед стандартным свойством.
Код
/* Плохо */
div {
  transform: scale(2);
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
}

/* Хорошо */
div {
  -webkit-transform: scale(2);
  transform: scale(2);
  transition: 1s;
}

Анимации


Нет нужды использовать анимации, когда вы может те же свойства изменить через :hover. Лучшим способом будем использовать свойства opacity и transform в угоду другим.
Код
/* Плохо */
div:hover {
  animation: move 1s forwards;
}
@keyframes move {
  100% {
  margin-left: 100px;
  }
}

/* Хорошо */
div:hover {
  transition: 1s;
  transform: translateX(100px);
}

Цвета


Если вам нужна прозрачность, используйте RGBA. В противном случае, всегда используйте шестнадцатеричный формат.
Код
/* Плохо */
div {
  color: hsl(103, 54%, 43%);
}

/* Хорошо */
div {
  color: #5a3;
}

Графика


Избегайте HTTP запросы, когда эти ресурсы легко воспроизводимы с помощью CSS.
Код
/* Плохо */
div::before {
  content: url(white-circle.svg);
}

/* Хорошо */
div::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

Хаки


Не используйте их
Код
/* Плохо */
div {
  // position: relative;
  transform: translateZ(0);
}

/* Хорошо */
div {
  /* position: relative; */
  will-change: transform;
}

На этом все. Если у вас есть чем дополнить эту статью, просим вам написать это в комментариях.

  • FalleN

  • 3197

  • 1

  • 0

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!