Патология вёрстки

Патология
вёрстки

Бутстрапома

Бутстрапома: клиника

• Стадия I: Подключение полной версии модульного фреймворка вне зависимости от необходимости.
• Стадия II: Подключение двух и более фреймворков схожей функциональности.

Бутстрапома

Возможно доброкачественное течение:

• Админки, внутренние сервисы.
• Прототипирование в браузере.
• Необходимость быстрого старта.
• Отсутствие у заказчика адекватных финансовых возможностей.
• Условно: при демпингозе.

Бутстрапома: лечение

• Отлучение от фреймворков.
• Работа с препроцессорными версиями фреймворков.
• Удаление неиспользуемого кода.

• Конкатенация файлов.
• Включение gzip на сервере.

Полиреквестома

Полиреквестома: этиология

• Изображения.
• Шрифты.
• Стилевые файлы.
• Скрипты.

Возможно доброкачественное течение.

Полиреквестома: лечение

• Конкатенация, спрайты.
• Ленивая подгрузка.
• Переход на HTTP2.

Автоматизит и Ваниллоз

Автоматизит: лёгкая форма

      nicothin@nicwin10 MINGW64 /d/projects/automatoma (master)
      $ npm start
      module.js:471
          throw err;
          ^
      Error: Cannot find module 'gulp-sequence'
          at Function.Module._resolveFilename (module.js:469:15)
    

Автоматизит: запущенное состояние

      [19:10:07] Starting 'style'...
      [19:10:27] Finished 'style' after 20.32 s
      [19:10:27] Starting 'js'...
      [19:10:38] Finished 'js' after 10.54 s
    

Осложнение: PostCSS-психоз

      .foo-bar {
          text: tomato bold center uppercase 1.25em 1.5 .05em;
          margin: * auto;
          lost-column: 1/4;
          color: rgb(200) rgba(0, 0.5);
          clear: fix-legacy;
      }
    

Автоматизит: лечение

• Вменяемое описание функциональности.
• Отсутствие переусложнения (минимум языков и синтаксисов).
• Отсутствие необязательных задач на этапе разработки.
• Минимум используемых пакетов.

Ваниллоз: клиника

• Без обработки стилей и скриптов (на этапе разработки(?)).
• Без фреймворков.
• Без спрайтов или с ручной/одноразовой сборкой спрайтов.
• Ручное обновление страницы.
  

Дивоспаноз

      <div class="card">
        <img class="card__img" src="..." alt="Баскетбольный мяч (размер 7)">
        <div class="card__title">Баскетбольный мяч (размер 7)</div>
        <div class="card__descr">Мяч баскетбольный RBG7 рекомендован для игры в зале и на улице для начинающих спортсменов.</div>
        <div class="card__footer">
          <span class="card__price">12 €</span>
          <span class="card__buy-btn">В корзину</span>
        </div>
      </div>
    

Дивоспаноз

      <article class="card">
        <img class="card__img" src="..." alt="Баскетбольный мяч (размер 7)">
        <h2 class="card__title">Баскетбольный мяч (размер 7)</h2>
        <div class="card__descr"><p>Мяч баскетбольный RBG7 рекомендован для игры в зале и на улице для начинающих спортсменов.</p></div>
        <footer class="card__footer">
          <span class="card__price">12 €</span>
          <button class="card__buy-btn">В корзину</button>
        </footer>
      </article>
    

Острая классянка

      <nav class="navbar navbar-expand-lg navbar-light bg-light">
        …
        <form class="form-inline my-2 my-md-1 my-lg-0">
          <input class="form-control mr-sm-2 mr-lg-1" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0 my-md-1">Search</button>
        </form>
      </nav>
    

Острая классянка

      <nav class="navbar">
        …
        <form class="search  navbar__form">
          <input class="search__field" type="search" placeholder="Search" aria-label="Search">
          <button class="btn  search__btn">Search</button>
        </form>
      </nav>
    

Веб-евангелоз

«Но фолбэки означают, что я пишу раскладку дважды!»

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

Синдром кардиоэлектрорентгенографической одиннадцатиклассницы

Ожирение селекторов

      <article class="card">
        <h2 class="card__title">Заголовок</h2>
        …
      </article>
    

      .card h2 { … }             /* Стадия I */
      h2.card__title { … }       /* Стадия II */
      .card h2.card__title { … } /* Стадия III (терминальная) */
    

!important-мания/-фобия

      .card {
        font-size: 2rem !important; /* stylelint-disable-line */
      }
    

Костыли без показаний

      <article>
        <h2>ZX Spectrum 48k</h2>
        <div style="background: url(img/zx-48k.jpg)"></div>
        <div>Артефакт давно ушедшей эпохи.</div>
      </article>
    

Инвалидность разметки

      <p>
        Строка 0.
        <div>Строка 1.</div>
        <div>Строка 2.</div>
        Строка 3.
      </p>
    

Думай как браузер

      <p>Строка 0.</p>
      <div>Строка 1.</div>
      <div>Строка 2.</div>
      Строка 3.
      <p></p>
    

Прочие патологии

• Снижение или отсутствие «рефлексов верстальщика».
• Синдром КАПСа и транслит-синдром.
• Пробелотабоз.
• Вендорный префиксит.
• БЭМ головного мозга.
• Reactоголизм. Vueайеризм. Angularомания.
• jQuery-фобия.

Вопросы?

• vk.com/n.gromov
• nicothin.pro/contact

© Николай Громов.