• Какие существуют "общие" правила по верстке web страниц?

    @itsjustmypage
    Перевести блочную модель в привычный вид (*, *::before, *::after {box-sizing: border-box;}
    Подключить normalize.css (body margin 0 там тоже есть).
    Верстка семантическими тегами. Header, main, footer, section, article, aside, вот это всё. О том где и как их применять подробно в спецификации https://www.w3.org/TR/html/fullindex.html#index-el...
    Сохранять семантичность и доступность при кастомизации форм всех видов (input, button). Пример правильной кастомизации чекбоксов https://www.youtube.com/watch?v=E6kLaaQFctU
    Размечать документ, сохраняя правильную структуру заголовков (h1-h6), что такое правильная структура есть в спецификации https://www.w3.org/TR/html/sections.html#the-h1-h2...
    Использовать какую-либо методологию вёрстки (обычно БЭМ).
    Верстать модульно, максимально независимыми блоками (см пункт о методологии).
    Сжимать изображения, использовать SVG при возможности (векторные иконки, косые и криволинейные украшательства и т.д.)
    Использовать автопрефиксер для автоматического проставления префиксов в CSS.
    Стили для обработки пользовательского ввода (на случай, если текста будет слишком много/мало, длинные слова и т.д.)
    Как-нибудь обработать FOUT(мерцание нестилизованного текста)/FOIT(мерцание невидимого текста). Как правило это просто font-display: swap.

    Пока не знаю что ещё добавить, можешь погуглить чеклисты вёрстки, взять что-то из них.
    И здесь посмотреть webmasters.teamdev.com
    Ответ написан
    Комментировать
  • Как убрать браузерную обводку у кнопок (появляющуюся в состоянии :focus) в Chrome и Firefox?

    wprivalov
    @wprivalov
    Разрабатываю на Yii2
    для bootstrap 4 (100% рабочий вариант):

    a.active.focus,
    a.active:focus,
    a.focus,
    a:active.focus,
    a:active:focus,
    a:focus,
    button.active.focus,
    button.active:focus,
    button.focus,
    button:active.focus,
    button:active:focus,
    button:focus,
    .btn.active.focus,
    .btn.active:focus,
    .btn.focus,
    .btn:active.focus,
    .btn:active:focus,
    .btn:focus {
    outline: 0!important;
    outline-color: transparent!important;
    outline-width: 0!important;
    outline-style: none!important;
    box-shadow: 0 0 0 0 rgba(0,123,255,0)!important;
    }
    Ответ написан
    4 комментария
  • В чем смысл bootstrap'a и его аналогов?

    Vlad_IT
    @Vlad_IT Куратор тега CSS
    Front-end разработчик
    Я если и использую bootstrap (что бывает очень редко), то создаю свой каркас в html, и уже через стили импорчу нужные bootstrap'овские классы
    .catalog-item {
        @include make-col(2);
    }

    т.к. мне лично не нравится засорять html множеством классов. Стили поменять чаще легче, чем разметку. В теории, можно научить сборщик не собирать классы bootstrap, которые не использовались в основных стилях.
    Ответ написан