Ответы пользователя по тегу Вёрстка
  • В чем отличие папок app от dist?

    @ned4ded
    Верстка, Фронтенд
    В названии, * ба-дам-тсс * (:

    Обычно в папках app / src / client и т.д. хранятся исходные файлы веб-приложения, в папках dist / build / www хранятся скомпилированные файлы.

    Но название не имеет особого значения, это скорее какое-то негласное соглашение о наименование, в любом проекте их можно (но не нужно) назвать по своему усмотрению.
    Ответ написан
  • Делать pixelperfect ломая поведение flexbox или же делать правильно flexbox ломая pixelperfect?

    @ned4ded
    Верстка, Фронтенд
    Добрый день. Вкусовщина, конечно, но я за нормальную работу стилей, а не подгон под пп, исключением является случай, когда такой подгод обусловлен некоторой идеей дизайнера (но в 90% случаев это просто недочет дизайна).

    Используя flexbox и делая все по PP приходится отказываться от justify-content, и использовать костыли в виде margin чтобы подогнать под макет, в свою очередь это здорово мешает при адаптации под меньшие разрешения, приходится постоянно перебивать размеры margin, с justify-content и flex-wrap адаптировать по сути и не надо оно само адаптируется но не подходит под PP c расхождением до 50-70 пикселей.


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

    Иными словами, если вы видите, что у вас в ряду 3 блока и пространство между ними должно распределяться +/- равномерно (но в дизайне один из блоков расположен не на месте), тогда justify-content будет оправдан, но если у вас 3 блока разной ширины с разными отступами и такое решение обусловлено некоторым "видением", то придется выкручиваться (:
    Ответ написан
  • Как убрать пустоту между блоками без Masonry?

    @ned4ded
    Верстка, Фронтенд
    .b2 {
        width: calc(50% - 2px); // 2px можете убрать, когда уберете бордер у b3
        float: right;
    }
    Ответ написан
  • Как правильно использовать em в кнопках?

    @ned4ded
    Верстка, Фронтенд
    Добрый вечер!

    Насколько я понимаю работу браузера, то на уровне рендеринга нет никаких em, rem и иных относительных величин, пересчет идет в px, в связи с чем остаток от деления после рекалькуляции em, rem и т.д. иногда может быть бесконечным. Из-за этого у вас выскакивают такие неровные пиксели.

    Более общий момент: какой смысл присваивать значения шрифта для элемента равным rem, а остальным величинам в том же классе делать в em, а не в rem? Вся суть em в том, что такой элемент может быть засунут в тег small, например, и все значения будут пересчитаны относительно этого тега. REM создавался, чтобы избежать сложения значений вложенных em'ов (compounding), а вы в итоге создаете элемент, значения которого привязываются к локальному шрифту, а шрифт этого элемента привязываете к размеру рутового шрифта, WHAAT?

    Есть смысл сделать, например, так:
    .button {
      fz: 1em; // default
      p: 0.5em 0.75em;
      lh: 1.25;
    
      &--small {
        font-size: 0.75em;
      }
    }


    В данном случае кнопка у вас будет соответствовать размеру шрифта элемента-родителя, а если добавить к ней класс .button--small, то 75% шрифта родителя и все значения пересчитаются соответствующим образом.

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

    Единственное, где можно считать em хорошей практикой по моему мнению, - это иконки и некоторые текстовые утилиты (типа бутстраповского .small).
    Ответ написан
  • Какова вероятность, что js вытеснит css?

    @ned4ded
    Верстка, Фронтенд
    Нет, не вытеснит, так же как наличие мяса не вытесняет с полок магазинов хлеб. Хороший веб-сайт - это компромис между производительностью и динамикой, и если что-то можно сделать через css, то лучше это сделать именно через css, не применяя js.
    Ответ написан
  • Как подгонять макет под Pixel Perfect?

    @ned4ded
    Верстка, Фронтенд
    Доброго дня!

    У этого расширения есть поле "масштаб".

    5a140b32241b1741659528.png

    Вам нужен, судя по всему, масштаб = ~0,85.

    В любом случае, если не получится уменьшить масштаб картинки, то можно уменьшить масштаб отображения окна браузера (ctrl+колесо).
    Ответ написан