Code Guide

Правила оформления HTML

  • Используйте новую строку для каждого блока, списка или элемента таблицы и сделайте дополнительный отступ для каждого нового дочернего элемента.
  • Всегда используйте для отступа два пробела.
  • Не используйте табуляцию и не смешивайте табуляцию с пробелами.
  • Значения атрибутов выделяйте в двойные кавычки.
Подробная документация. 
<blockquote>
  <p><em>Space</em>, the final frontier.</p>
</blockquote>

<ul>
  <li>Moe<li>
  <li>Larry<li>
  <li>Curly<li>
</ul>

<table>
  <thead>
    <tr>
      <th scope="col">Income</th>
      <th scope="col">Taxes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>$ 5.00</td>
      <td>$ 4.50</td>
    </tr>
  </tbody>
</table>

Перенос свойств элемента

Переносите длинные строки.

Хотя для HTML нет рекомендации по длине строк, лучше переносить длинные строки — это значительно улучшает читабельность кода.

При переносе длинных строк, каждая новая пересеянная строка должна иметь отступ не менее 2-х пробелов от отступа исходной строки.

<p class="d-inline-flex gap-1">
  <a
    class="btn btn-primary"
    data-bs-toggle="collapse"
    href="#collapseExample"
    role="button"
    aria-expanded="false"
    aria-controls="collapseExample"
  >
    Link with href
  </a>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Правила оформления CSS

  • Для отступа всегда используйте два пробела — это единственный способ гарантировать, что код будет отображаться одинаково в любой среде.
  • При группировании селекторов сохраняйте отдельные селекторы в одной строке.
  • Включите один пробел перед открывающей фигурной скобкой блоков объявлений для удобства чтения.
  • Поместите закрывающие фигурные скобки блоков объявления в новую строку.
  • Включите один пробел после : для каждого объявления.
  • Каждое объявление должно отображаться в отдельной строке для более точного сообщения об ошибках.
  • Завершайте все объявления точкой с запятой. Последнее объявление необязательно, но без него ваш код более подвержен ошибкам.
  • Значения свойств, разделенные запятыми, должны содержать пробел после каждой запятой (например, box-shadow).
Подробная документация. 
// Bad CSS
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

// Good CSS
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgb(0 0 0 / .5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

Правила оформления PHP

Всегда используйте для отступа два пробела.

Использовать одинарные ковычки.

Строки при печати можно обрамлять одинарными или двойными кавычками. Результат будет не одинаков, поэтому нужно четко понимать разницу. Если текст обрамлен одинарными кавычками, то этот текст выводится как есть. Если использовались двойные кавычки, то строка сканируется на наличие переменных. Если внутри строки найдено имя переменной, то будет выведено значение, а не переменная.

Одинарные кавычки предпочтительнее, потому что такой код работает быстрее.

Использовать только длинные теги <?php ?> или теги short-echo <?= ?>.

// Bad
<? $const = 'asdsad' ?>
<?php echo $const ?>

// Good 
<?php $const = 'asdasd' ?>
<?= $const ?>

В PHP блоках использовать базовый синтаксис, а для управляющих структур в шаблонах использовать альтернативный синтаксис.

<?php 
$count = 0;

for ($i = 0; $i < 10; $i++) { 
  $count++;
}
?>

<ul>
<?php for ($i = 0; $i < 10; $i++): ?>
  <li><?= $i ?></li>
<?php endfor ?>
</ul>

Использовать пробелы после открытия и закрытия php тегов для short-echo. <?= $const ?>

Если PHP код написан в 1 строку с открывающем и закрывающим тегом, лучше убирать ; в конце для лучшей читабельности кода.

// Bad 
<?php$count=0;?>
#HTML
<?php if(true):?>
  #HTML
  <?=$count;?>
  <?= $count; ?>
  #HTML
<?php endif;?>
#HTML

// Good 
<?php $count = 0 ?>
#HTML
<?php if (true): ?>
  #HTML
  <?= $count ?>
  #HTML
<?php endif ?>
#HTML

Остально желательно использовать из PSR.

Разделы