Чистота кода. Почему HTML / CSS Essentials все еще имеет значение

Во время моего 15-летнего опыта работы в области веб-разработки я работал с различными компаниями, от корпоративного уровня до стартапов, и я работал со многими, многими коллегами-разработчиками программного обеспечения на этом пути. Одна из самых распространенных и важных проблем, с которыми я столкнулся в моих проектах, — это неспособность написать чистый и понятный код.

Последствия неупорядоченного и грязного кода

Чтобы процитировать старое, но все еще актуальное сообщение в блоге, где обсуждаются принципы чистого кода:

«Исходный код сродни финансовому долгу. Предположим, вы хотите купить дом для проживания. Большинство людей не имеют финансовых средств для оплаты наличных денег за дом, поэтому вместо этого вы получаете ипотеку. Но сама ипотека не имеет большого значения. Это ответственность. Вы должны платить проценты за свой долг каждый месяц …

Так и в веб-разработке. Код имеет постоянные издержки. Вы должны это понимать, вы должны поддерживать его, вы должны адаптировать его к новым целям с течением времени. Чем больше у вас кода, тем больше будут текущие затраты. В наших интересах иметь как можно меньше исходного кода, сохраняя при этом возможности для достижения наших бизнес-целей».

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

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

Дочитав стаью до конца, вы будете хорошо разбираться в основах кода качества и о том, как поддерживать и расширять код HTML и CSS.

Основы стилизации кода

Начнем с основы хорошего кода HTML и CSS: валидность W3C, соглашения об именах, структура файлов и т.д.

Помните о структуре с первого дня.

Если вы собираетесь разработать большое приложение, вам необходимо позаботиться о структуре каталогов и файлов. Он может или, скорее, должен выглядеть так:

Используйте валидаторы для проверки своего кода: HTML валидатор, CSS валидатор.

Пример плохого кода

<figure>
  <div>
    <img src="demo.jpg" alt="">
    <figcaption>
      <h2>Hello world</h2>
    </figcaption>
  </div>
</figure>

<picture>
  <source src="demo.webp" type="image/webp">
  <img src="demo.jpg" alt="">
</picture>

<details>
  <header>
    <summary>Expand details</summary>
  </header>
  <p>All content goes here</p>
</details>

p {
  font: 400 inherit/1.125 serif;
}

Пример хорошего кода

<figure>
  <img src="demo.jpg" alt="">
  <!-- figcaption should be child of element figure element, not div -->
  <figcaption>
    <h2>Hello world</h2>
  </figcaption>
</figure>

<picture>
  <!-- source should have srcset attribute -->
  <source src="demo.webp" type="image/webp">
  <img src="demo.jpg" alt="">
</picture>

<details>
  <!-- summary is not allowed as child of header -->
  <summary>Expand details</summary>
  <p>All content goes here</p>
</details>

p{
  font-weight: 400;
  font-size: inherit;
  line-height: 1.125;
  font-family: serif;
}

Используйте альтернативный текст в тегах <img> для обеспечения чистоты принципов кода.

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

Плохой код:

<img src="demo.jpg">

Хороший код:

<img src="demo.jpg" alt="This is placeholder of the image"

Используйте kebab-case (spinal-case).

Для имен, используйте kebab-case (spinal-case), и не используйте camelCase, или under_score.

Плохой код:

<section class="section_featured_Listing">
  <h1 class="largeTitle">H1 title</h1>
</section>

Хороший код:

<section class="section-featured-listing">
  <h1 class="large-title">H1 title</h1>
</section>

Kebab-case более читабельный, чем camelCase и under_score.

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

Имена классов должны выглядеть примерно так .noun-adjective.

Попробуйте использовать общие имена классов вместо написания конкретных имен. Это делает код более удобочитаемым

Плохой код:

<div class="team-wrapper">
  <button class="large-button-green"></button>
  <p class="greenText-john-smith-description"></p>
  <div class="white-bg"></div>
</div>

Хороший код:

<div class="section-team">
  <button class="btn-lg btn-success"></button>
  <p class="text-success"></p>
  <div class="bg-white"></div>
</div>

Не записывайте атрибуты типов для таблиц стилей и скриптов в HTML5.

Они не требуются с HTML5, но требуются стандартами W3C в HTML4 / XHTML.

Плохой код:

<link type="text/css" rel="stylesheet" href="../styles.css">
<script type="text/javascript" src="..//main.js"></script>

Хороший код:

<link rel="stylesheet" href="styles.css">
<script src="app.js"></script>

При необходимости используйте специальные классы.

Cелектор CSS должен быть более конкретным и выберите нужные элементы; старайтесь не использовать их родителей, если в этом нет нужды.

Плохо:

section aside h1 span {
  margin-left: 25%;
}

Хорошо:

.left-offset {
  margin-left: 25%;
}

Отбрасывайте единицы измерения с нулевых значений.

Добавление единиц не требуется и не дает дополнительного значения.Нет никакой разницы между 0px, 0em, 0% или любым другим нулевым значением. Единицы не важны, поскольку значение все равно равно нулю.

Плохо:

 div {
  margin: 20px 0px;
  letter-spacing: 0%;
  padding: 0px 5px;
}

Хорошо:

div {
  margin: 20px 0;
  letter-spacing: 0;
  padding: 0 5px;
}

Используйте A > B селектор.

Очень полезно использовать селектор A> B, который применяет правила только к режиму child, в этом случае вам не придется перезагружать стили всех других детей, которые не нуждаются в этом стиле. Например, это очень полезно при кодировании вложенных меню. Вам не нужно переопределять стили подменю.

Плохой вариант:

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3
    <ul>
      <li>Submenu 1</li>
      <li>Submenu 2</li>
    </ul>
  </li>
</ul>
ul li {
  list-style-type: none;
}
li ul li {
  /* redefine to default value */
  list-style-type: disc;
}

Лучше:

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3
    <ul>
      <li>Submenu 1</li>
      <li>Submenu 2</li>
    </ul>
  </li>
</ul>
ul > li {
  list-style-type: none;
}

Как написать чистый HTML

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

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

Откажитесь от ненужных оберток

Старайтесь не использовать ненужные элементы оболочки в HTML. Наличие тонны элементов <div> и <span> ушло в прошлое. Сохранение гранулярности и линейности позволяет вам достичь минимального кода.

Плохой вариант:

<section class=”container”>
  <div class=”row”>
    <div class=”col-xs-12”>
      <div class=”inner-wrapper”>
        <span>Unnecessary br tags</span>
      </div>
    </div>
  </div>
</section>

Лучше:

<section class=”container”>
  <p>Unnecessary br tags</p>
</section>

Используйте единичные классы для стилей.

Не используйте пользовательские цвета или размеры шрифта (если цвет или размер шрифта не входят в рамки, просто добавьте свои единичные классы). Единичные классы — это простые, единичные единицы стиля. Подобно встроенным стилям, стили Atomic применяют только одно объявление стиля.

Плохой стиль:

<h1>Without using atomic class</h1>
<p>Paragraph without atomic class</p>
<section>
  <h1> Another h1 text</h1>
  <p>Paragraph inside div without class</p>
</section>
h1 {
  color: red;
}
section > h1 {
  color: blue;
}

Хороший стиль:

<h1 class="text-red">Without using atomic class</h1>
<p>Paragraph without atomic class</p>
<section>
  <h1 class="text-blue"> Another h1 text</h1>
  <p>Paragraph inside div without class</p>
</section>
.text-red {
  color: red;
}
.text-blue {
  color: blue;
}

Используйте семантические элементы

Использование семантических элементов обеспечивает лучшую структуру и улучшает читабельность кода и контента.

Плохой вариант:

<span class="heading"><strong>Welcome</strong></span>
<span>This is unnecessary br tag.</span>

Лучше:

<h1>Welcome</h1>
<p>This is unnecessary br tag.</p>

Используйте тэги HTML5

Новые теги дают вам стандартизацию общих элементов, что улучша.т автоматическую обработку документов. Я обнаружил, что многие разработчики всегда используют много <div> и <span>, но сначала проверьте, какие теги логически соответствуют вашему контексту:

Плохой стиль:

 <div class="article-blue">
  <div class="article-title-red">HTML 4 title</div>
  <div class="content">
    Semantics
    <span class="boldtext">are</span>
    important.
  </div>
</div>

Хороший стиль:

 <article>
  <h1>HTML5 title</h1>
  <p>
    Semantics <strong>are</strong> important.
  </p>
</article>

CSS: Чистый код и Препроцессоры

Когда дело доходит до CSS, трудно не начинать с некоторых неоригинальных, но назойливых советов:

Используйте CSS препроцессор:

Sass — стабильный и мощный профессиональный язык расширения CSS в мире.

Для Sass доступны два синтаксиса. Первый, известный как SCSS (Sassy CSS) является расширением синтаксиса CSS. Второй и более старый синтаксис, называемый синтаксисом с отступом (или иногда просто «Sass»), обеспечивает более сжатый способ написания CSS.

Группируйте ваши селекторы. Используйте @extend in SASS.

Группируя ваши селекторы или используя @extend в SASS, вы получаете код DRY (Don’t repeat yourself — не повторять себя).

Bad code:

p {
   font-size: 22px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
h1 {
  font-size: 41px;
  color: #000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Good code:

.font-smoothing {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  font-size: 22px;
  @extend .font-smoothing;
}
h1 {
  font-size: 22px;
  @extend .font-smoothing;
}

Используйте rem вместо пикселей в CSS.

Испольуйте размерность REM, например font-size вычисляется от font-size корневого <html>.

Они также позволяют быстро масштабировать весь проект, изменяя размер корневого шрифта (например, при определенном запросе на медиа / размер экрана).

Вы будете писать меньше кода для responsive.

Плохо:

p {
  font-size: 22px;
  padding: 10px;
}

@media (max-width: 767px) {
  p {
    font-size: 16px;
    padding: 5px;
  }
}

Лучше:

html {
  font-size: 14px;
}
@media (max-width: 767px) {
  html {
    font-size: 12px;
  }
}

p {
  font-size: 1.6rem;
  padding: 1rem;
}

Попробуйте отказаться от фиксированных height или width в CSS.

Heights может быть сгенерирована с помощью внутреннего содержимого + padding, а width может быть определена сеткой (при необходимости используйте вложенную сетку).

Плохо:

<footer id="footer" class="text-center">
  <h2>Let's Get In Touch!</h2>
  <hr>
  <p>Ready to start your next project with us?</p>
 </footer>
#footer {
  height: 130px;
}

Лучше:

<footer id="footer" class="text-center">
  <h2>Let's Get In Touch!</h2>
  <hr>
  <p>Ready to start your next project with us?</p>
</footer>
#footer {
  padding-top: 23px;
  padding-bottom: 47px;
}

Обязательно используйте родительский элемент только один раз в SCSS.

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

Плохо:

.section-parent-class {
  position: relative;
  h2 {
      color: #ff0;
    }
  header {
    margin: 2rem 1rem;
  }
}

@media (max-width: 767px) {
  .section-parent-class {
    footer {
      padding: .5rem;
    }
  }
}

Лучше:

.section-parent-class {
  position: relative;
  h2 {
    color: #ff0;
  }
  header {
    margin: 2rem 1rem;
  }
  
  footer {
    @media (max-width: 767px) {
      padding: .5rem;
    }
  }
}

Подумайте, какие элементы будут затронуты до написания правила CSS.

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

Плохо:

/* Commonly used class */
.title {
    color: #008000;
}

Хорошо:

/* Specify it not to affect other titles */
.section-blog .title {
    color: #008000;
}

Попробуйте искать существующие правила и переменные CSS перед написанием новых.

Всегда ищите существующие правила, которые соответствуют желаемому стилю, как в пользовательском CSS, так и в рамках. Только если ничего нет, приступайте к написанию нового.

Это особенно важно при работе с большими приложениями.

Отвратительно:

.jumbotron {
  margin-bottom: 20px;
}

Хорошо:

// измените $jumbotron-padding в _variables.scss
.jumbotron {
  margin-bottom: $jumbotron-padding;
}

Используйте краткие свойства и значения.

Использование кратких свойств, you can write concise and, more often than not, much more readable style sheets, saving precious time and energy.

Bad code:

img {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 25px;
  margin-left: 10px;
}
button {
  padding: 0 0 0 20px;
}

Good code:

img {
  /* Shorthand style */
  margin: 5px 10px 25px;
}
button {
  /* Don’t play with shorthand too much */
  padding-left: 20px;
}

Используйте em вместо px для line-height.

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

Плохо:

p {
  font-size: 12px;
  line-height: 24px;
}

Хорошо:

p {
  font-size: 12px;
  line-height: 2em; /* или просто line-height: 2; */
}

Используйте классы Bootstrap как можно больше.

Хотя это правило может применяться к инфраструктурам пользовательского интерфейса в целом, я использую Bootstrap в качестве примера, потому что это самая популярная в мире библиотека компонентов интерфейса.

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

Плохо:

<section class="without-bootstrap">
  <div class="first-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div>
  <div class="second-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div>
</section>
.first-column,
.second-column {
  width: 25%;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
}
...

Хорошо:

<section class="row">
  <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div>
  <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div>
</section>

Настройте ваш фреймворк правильно.

Bootstrap основывается на файле variables.scss, который позволяет легко настраивать и настраивать ваш интерфейс без написания одной строки кода. В противном случае, если вы собираетесь самостоятельно самостоятельно создавать все настройки, лучше не использовать фреймворк.

Некоторые разработчики избегают менять variables.scss, думая, что они все равно смогут обновить Bootstrap до новой версии без особых хлопот, но это может быть утомительной задачей. Даже небольшие обновления требуют, чтобы разработчики читали журнал изменений, просматривали все разметки и CSS и переносили на новую версию вручную.

Bad code:

navbar {
  padding: 20px 10px;
}
.carousel-indicators {
  li {
    width: 6px;
    height: 6px;
    margin-right: 3px;
    margin-left: 3px;
  }
}

Good code:

$navbar-padding-y:      ($spacer / 2) !default;
$navbar-padding-x:      $spacer !default;

$carousel-indicator-width:       30px !default;
$carousel-indicator-height:      3px !default;
$carousel-indicator-spacer:      3px !default;

Не переопределяйте .container width.

Попробуйте использовать систему сетки, или изменить контейнерный width в _variables.scss. Если вам нужно уменьшить его ширину, просто используйте max-width вместо ширины. В таком случае, .container из Bootstrap останутся нетронутыми в responsive.

Плохо:

.container {
  @media (min-width: $screen-lg-min) {
      width: 1300px;
  }
}

Хорошо:

// изменение $container-lg в _variables.scss
.container {
  @media (min-width: $screen-lg-min) {
    width: $container-lg;
  }
}

Используйте классы Bootstrap 4 и пишите меньше CSS.

Начните использовать Bootstrap 4. Он включает много новых классов которые помогут вам быстрее создать новые слои, особенно Flexbox.

Плохой вариант:

<div class="flex-ex">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
<div class="flex-ex flex-reverse">
  <div>Flex item 1</div>
  <div>Flex item 2</div>
  <div>Flex item 3</div>
</div>
.flex-ex {
  display: flex;
  > div {
    padding: 2px;
  }
  &.flex-reverse {
    flex-direction: row-reverse;
  }
  li {
   list-style: none;
    padding: .5rem;
  }
}

Хороший:

 <ul class="list-unstyled list-inline d-flex flex-row">
  <li class="p-2">Flex item 1</li>
  <li class="p-2">Flex item 2</li>
  <li class="p-2">Flex item 3</li>
</ul>
<ul class="list-unstyled list-inline d-flex flex-row-reverse">
  <li class="p-2">Flex item 1</li>
  <li class="p-2">Flex item 2</li>
  <li class="p-2">Flex item 3</li>
</ul>

Теперь мы можем писать классы в элементе удаляя все границы.

Плохо:

<div class="border-example2 py-5">
  <span class="border0"></span>
  <span class="border-top0"></span>
  <span class="border-right0"></span>
  <span class="border-bottom0"></span>
  <span class="border-left0"></span>
</div>
border-example2 {
  > span {
    width: 100px;
    height: 100px;
    display: inline-block;
    margin: .50rem;
    background-color: #e1e1e1;
    border: 1px solid;
      &.border0 {
        border: none;
      }
      &.border-top0 {
        border-top: none;
      }
      &.border-right0 {
        border-right: none;
      }
      &.border-bottom0 {
        border-bottom: none;
      }
      &.border-left0 {
        border-left: none;
      }
    }
}

Хорошо:

<div class="border-example py-5">
  <span class="d-inline-block m-2 border-0"></span>
  <span class="d-inline-block m-2 border-top-0"></span>
  <span class="d-inline-block m-2 border-right-0"></span>
  <span class="d-inline-block m-2 border-bottom-0"></span>
  <span class="d-inline-block m-2 border-left-0"></span>
</div>
.border-example {
  > span {
    width: 100px;
    height: 100px;
    background-color: #e1e1e1;
    border: 1px solid;
  }
}

Используйте .col-sm-X if .col-md-X и .col-lg-X.

не нужно писать .col-lg-10 потому что когда мы пишем .col-md-10, мы автоматически включаем .col-lg-10.

Плохой пример:

<ul class="press-list list-inline row">
  <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li>
  <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li>
</ul>

Хороший пример:

<ul class="press-list list-inline row">
  <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li>
  <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li>
</ul>

Не сипользуйте .col-xs-12.

Не используйте .col-xs-12 потому что если.col-xs-X подключен, то .col-xs-12 подключается по умолчанию.

Плохо:

<section id="services">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <h2>Services</h2>
        <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
      </div>
    </div>
    <div class="row text-center">
      <div class="col-md-6 col-xs-12">
        <h4>E-Commerce</h4>
        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
      </div>
    </div>
  </div>
</section> 

Хорошо:

<section id="section-services" class="text-center">
  <div class="container">
    <h2>Services</h2>
    <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
    <div class="row">
      <div class="col-md-6">
        <h4>E-Commerce</h4>
        <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p>
      </div>
    </div>
  </div>
</section> 

Не испольуйте reset.css — вместо него normalize.css.

Если вы используете Bootstrap, то normalize.css он уже входит в состав, и не нужно подключать дважды

Итог

Я надеюсь, что вы смогли почерпнуть что-то полезное и что вы будете больше думать о написании минимального кода HTML и CSS с лучшими навыками.

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

Надеюсь,статья была полезной и информативной.

 

Оригинал статьи Clean Code: Why HTML/CSS Essentials Still Matter

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *