Ответы пользователя по тегу Вёрстка
  • Как сделать адаптивную таблицу html?

    jMas
    @jMas
    Full stack developer
    • Скролящийся контейнер
    • CSS Grids

    https://css-tricks.com/responsive-data-tables/
    Ответ написан
    Комментировать
  • Как вы начинаете вёрстку сайта?

    jMas
    @jMas
    Full stack developer
    Разбиваю макет по модулям (элемент списка + список, шапка, навигация, форма, кнопка). Определяю пересечения модулей (например два блока на разных страницах очень похожи - для них один модуль и просто у одного из них в HTML будет указан дополнительный класс .module.module-supermodule).

    Завожу несколько файлов:
    app.css - только импорты для модулей.
    @import "base.css";
    @import "icon.css";
    @import "btn.css";
    /* ... */
    @import "some-module.css";

    base.css - любые базовые стили не привязанные к классам, обычно стили для тегов, никаких намеков на классы или id.

    Верстаю сначала помодульно. Модуль обычно включает в себя только классы ограниченные определенным префиксом, например .nav- или .sidebar-.

    Распространенные модули, которые кочуют из проекта в проект .btn-, .icon-, .form-, .nav-. Принцип организации модуля прост: внутри строго использовать классы с определенным префиксом. Искать такой модуль в списке CSS файлов очень просто - префикс и есть название файла, в верстке понять что элемент принадлежит к определенному модулю тоже достаточно просто - у всех классов этого модуля есть этот префикс. Если модуль - это список, допустим .list: в модуле сначала будет идти .list-item, а затем .list .list-item - для того чтобы можно было использовать .list-item отдельно от родителя .list, иногда бывает очень полезно.

    В целом по структуре организации проекта все. Дальше - выбор определенного шага сетки (отступы, размеры элементов) должны быть кратны выбранному значению шага.

    Для сборки модулей в один файл использую конкатенатор, умеющий смотреть импорты и вытаскивать CSS файлы по ним. Если использовать LESS или SASS задача вообще элементарная. Я просто знаю, что люди которым я отдаю верстку не часто знакомы с LESS и SASS, чтобы отдавать стили в таком виде.

    По сути премудрости старта заканчиваются. Дальше все зависит сугубо от вашего профессионализма.

    P.S.: Кстати, почему то все сбрасывают стили - я этого никогда не делаю. Достаточно знать особенности стандартных стилей, тщательное тестирование в разных браузерах. Получается на деле стандартные отступы заданные браузером наоборот помогают. Тем более прошли те времена, когда был ощутимый разброс в стандартных значениях. В общем странно.
    Ответ написан
    4 комментария