• Какой сброс будет лучше для css?

    valgerofficial
    @valgerofficial
    Десигнер LVL100
    Вот так

    *,
    ::before,
    ::after {
        padding: 0;
        margin: 0;
    
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
             -o-box-sizing: border-box;
                box-sizing: border-box;
    }
    
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        -webkit-font-smoothing: subpixel-antialiased;
        text-rendering: geometricPrecision;
    }
    
    body {
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Helvetica Neue, sans-serif;
    
        -webkit-font-smoothing: subpixel-antialiased;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        -webkit-touch-callout: none;
    }
    
    html,
    body {
        height: 100%;
        min-height: 100%;
        font-feature-settings: kern 1, liga 1, calt 1, pnum 1, tnum 0, onum 1, lnum 0, dlig 0;
    }
    
    html,
    body,
    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    main,
    menu,
    nav,
    section,
    summary {
        display: block;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {font-weight: 400;}
    
    h1  {font-size: 2.2em;}
    h2  {font-size: 1.9em;}
    h3  {font-size: 1.65em;}
    h4  {font-size: 1.4em;}
    h5  {font-size: 1.2em;}
    h6  {font-size: 1em;}
    
    audio:not([controls]) {
        display: none;
        height: 0;
    }
    
    [hidden],
    template {
        display: none;
    }
    
    a {
        background: transparent;
        text-decoration: none;
        cursor: pointer;
    }
    
    a:active,
    a:hover {
        outline: 0;
    }
    
    img {
        border: 0;
    }
    
    ul,
    li {
        outline: 0;
        border: 0;
        list-style: none;
    }
    
    abbr {
        cursor: help;
        font-feature-settings: kern 1, liga 1, calt 1, pnum 1, tnum 0, onum 1, lnum 0, smcp 1, c2sc 1;
    }
    
    abbr[title] {
        text-decoration: none;
        border-bottom: 1px dotted;
    }
    
    b,
    strong {
        font-weight: 700;
    }
    
    dfn {
        font-style: italic;
    }
    
    mark {
        background: #ff0;
        color: #000;
    }
    
    time {
        font-feature-settings: kern 1, liga 1, calt 1, pnum 1, tnum 0, onum 1, lnum 0;
    }
    
    small {
        font-weight: 400;
        font-size: 80%;
    }
    
    sub,
    sup {
        font-size: 75%;
        line-height: 0;
        position: relative;
        vertical-align: baseline;
    }
    
    sup {
        top: -0.5em;
        font-feature-settings: kern 1, liga 1, calt 1, pnum 1, tnum 0, onum 1, lnum 0, dlig 0, sups 1;
    }
    
    sub {
        bottom: -0.25em;
        font-feature-settings: kern 1, liga 1, calt 1, pnum 1, tnum 0, onum 1, lnum 0, dlig 0, subs 1;
    }
    
    svg:not(:root) {
        overflow: hidden;
    }
    
    hr {
        height: 0;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }
    
    pre {
        overflow: auto;
    }
    
    code,
    kbd,
    pre,
    samp {
        font-family: "Source Code Pro", Consolas", "Courier New", SFMono-Regular, Menlo, Monaco, monospace;
        font-size: 0.8em;
        font-feature-settings: kern 0, liga 0, calt 1, dlig 0, pnum 0, tnum 1, onum 0, lnum 1, zero 1;
    }
    
    button,
    form,
    input,
    optgroup,
    select,
    textarea {
        outline: 0;
        color: inherit;
        font: inherit;
    }
    
    button,
    select {
        border: 0;
        text-transform: none;
    }
    
    button,
    html input[type="button"],
    input[type="reset"],
    input[type="submit"] {
        -webkit-appearance: button;
        cursor: pointer;
    }
    
    button:not(:disabled),
    [type="button"]:not(:disabled),
    [type="reset"]:not(:disabled),
    [type="submit"]:not(:disabled) {
      cursor: pointer;
    }
    
    button[disabled],
    html input[disabled] {
        cursor: default;
    }
    
    button::-moz-focus-inner,
    input::-moz-focus-inner {
        border: 0;
    }
    
    input {
        line-height: normal;
    }
    
    input[type="radio"],
    input[type="checkbox"] {
        box-sizing: border-box;
        padding: 0;
    }
    
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        height: auto;
    }
    
    input[type="search"] {
        -webkit-appearance: textfield;
        -moz-box-sizing: content-box;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
    }
    
    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }
    
    input[type="color"],
    input[type="date"],
    input[type="datetime"],
    input[type="datetime-local"],
    input[type="number"],
    input[type="range"],
    input[type="tel"],
    input[type="week"] {
        font-feature-settings: kern 0, liga 1, calt 1, pnum 1, tnum 0, onum 0, lnum 1, zero 0;
    }
    
    fieldset {
        border: 1px solid silver;
        margin: 0 2px;
        padding: 0.35em 0.625em 0.75em;
    }
    
    legend {
        border: 0;
    }
    
    textarea {
    	resize: vertical;
        overflow: auto;
    }
    
    optgroup {
        font-weight: 700;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
    
    tbody,
    caption {
        font-feature-settings: kern 1, liga 1, calt 1, pnum 0, tnum 1, onum 0, lnum 1, zero 1;
    }

    Ответ написан
  • Как поступить с css в многостраничном сайте?

    BormotunJedy
    @BormotunJedy
    Верстальщик
    На больших проектах логично создавать отдельные файлы стилей. В scss или sass или less, которые потом собираются в один css. Насчет комментариев внутри кода - утяжеляют. Иногда это бывает критично.
    Стили уникальных страниц прописываю с одинаковым началом - например, about__ или shop__.
    Тогда при сборке уникальные стили страницы идут один за другим и не перекликаются с другими страницами. И править при необходимости такой файл легче.
    Alex правильно говорит, по уму все стили еще на стадии подготовки к верстке должны быть разделены на группы.
    Ответ написан
  • Как поступить с css в многостраничном сайте?

    @sewaca
    Если планируется натяжка на какой-то движок, то одним файлом будет удобнее, просто добавляй комментарии в код по типу /* About */ и т.д.
    Если натяжка не планируется, то лучше делать отдельными файлами. Так и по оптимизации (pagespeed) будет лучше, и верстать удобнее
    Ответ написан
  • Как поступить с css в многостраничном сайте?

    Kozack
    @Kozack Куратор тега CSS
    Thinking about a11y
    В идеальном мире все стили у вас разбиты по группам:
    Общие стили -- которые применяются на всех или на связанных страницах сайта. (Макет, какая-то шапка, подвал)
    Специфичные -- которые применяются на одной или нескольких конкретных страницах. (Таблица цен на одной странице, или другой макет для админки)

    Кроме этого, следует разделять:
    Критичные -- самые основные и важные стили, без которых ваш сайт не должен отображаться вообще.
    Не критичные -- стили без которых сайт останется доступным.

    И в идеальном мире, вам стоит дробить на файлы в соответствии с этим.
    Общие стили, пользователь скачает один раз и при повторном посещении сайта или переходе на другие страницы они будут загружаться из кэша что значительно повысит скорость повторной загрузки. Но сильно раздувать этот файл не стоит. И из него стоит выбрасывать всё, что скорее всего пользователю не понадобится.
    При посещении какой-то конкретной страницы могут быть дополнительно загружены специфичные стили. Их желательно выносить из отдельно только для того, чтобы уменьшить файл с общими стилями. Например можно вынести стили для страницы "Сбросить пароль", так как предполагается, что во время обычного сеанса эта страница пользователю не понадобится.

    Критичные стили. Это всё что касается первоначальной отрисовки. Эти стили загружаются как можно раньше. Они имеют высокий приоритет и блокируют рендеринг страницы. Чем такие файлы меньше тем лучше! Всё что можно загрузить потом -- нужно загружать потом.
    Не критичные стили -- это всё остальное.

    На пример: Форма. Общие стили формы -- критичный CSS. А стили для отображения условного попапа с подтверждением отправки -- не критичный. В результате, браузер скачивает критичный CSS, отображает страницу, пользователь уже может с ней работать и заполнять форму, а браузер в фоне дозагружает остальной CSS для попапа.

    Но, это картина идеального мира и всё нужно изучать для конкретного случая. Например, если у вас практически весь CSS критичный, и только несколько десятков правил можно вынести в "не критичный" то вы много в производительности не выиграете, а скорее проиграете из-за накладных сетевых расходов.

    Или другой пример. Предположим, что на вашем сайте все страницы достаточно уникальны. В таком случае, разделять "общие" и "специфичные" стили может быть лишним или слишком затратным для поддержки.
    Ответ написан
  • Как в html таблицах переносить элемент на следующую строку (в письмах для Outlook)?

    sergski
    @sergski
    web-developer
    оставьте в строке 1 столбец, а в нём ваши блоки, но каждый в таблице с align="left"
    пример
    Ответ написан
  • Почему задают такие свойства для елемента с position absolute?

    BormotunJedy
    @BormotunJedy
    Верстальщик
    Чтобы не сидеть часами у монитора и не писать бесконечные медиа-запросы. Таким незамысловатым образом верстальщики сокращают количество кода, делают его удобочитаемым, а поведение элементов на странице - предсказуемым. И это желательно делать не некоторым верстальщикам, а всем поголовно.
    Ответ написан
  • Что из себя представляет вёрстка?

    BormotunJedy
    @BormotunJedy
    Верстальщик
    Верстка во фрилансе - это вид сложной работы по добыче денег посредством владения навыком выполнять работу веб-верстальщика по заказу найденного и убежденного вами в том, что вы справитесь с этой работой, заказчика.
    Отличается от работы в офисе тем, что фрилансер сам ищет заказы, заказчика и ведет с ними все переговоры - от получения заказа в работу до получения от заказчика денег.
    Правда, для того. чтобы устроиться в офис работать верстальщиком, у вас должен быть приличный багаж умений, навыков и знаний, подтвержденный дипломами/сертификатами и толстым портфолио.
    А у фрилансера есть шанс найти заказчика, который портфолио не спросит. Но и платить такой заказчик много не намерен.
    Про практические аспекты верстки мои коллеги подробно ответили.
    Удачи!
    Ответ написан
  • Что изучить чтобы начать работать верстальщиком?

    BormotunJedy
    @BormotunJedy
    Верстальщик
    1) html4 - html5 - все базовые теги (как минимум)
    2) css3 - block, flex, grid, animation, transition, transform, все для текста
    3) JavaScript - подключение, слушатели, взаимодействие с DOM, базовые функции
    4) Знать стандарты scss/sass.
    5) BEM - правила наименования классов в разметке
    6) все про style, class, id, data-, приоритеты в стилях
    7) умение работать с git (GitHub, Bitbucket, Jira) и репозиториями - для работы в командных проектах
    8) навыки коммуникации и ведения переговоров
    9) базовые навыки в чтении и составлении технических заданий на верстку (ТЗ)
    10) сверстать не менее 5 шаблонов разных типов и найти того, кто проверить и прокомментирует верстку, поправит и подскажет, - ментор или учитель
    11) любовь к этой работе

    Думаю, мои коллеги добавят еще чего-нибудь. А вот эти 11 пунктов - база для начала работы верстальщиком.
    Ответ написан
  • Почему идентификаторы и классы на многих популярных сайтах выглядят как что-то случайное?

    samodum
    @samodum
    Какой вопрос - такой и ответ
    Это сделано для того, чтобы усложнить жизнь парсерам.
    Да, это генерируется автоматически
    Ответ написан
  • Почему идентификаторы и классы на многих популярных сайтах выглядят как что-то случайное?

    Aleksandr-JS-Developer
    @Aleksandr-JS-Developer
    Бери и делай
    Автоматически и не обязательно, чтобы запутать.
    Это делается для модульности. В CSS модульности нативной нет, вот и генерят всякими сборщиками
    Ответ написан
  • В каких моментах нужен min-height/width?

    Get-Web
    @Get-Web Куратор тега CSS
    Front-End Developer
    К примеру у вас есть какой-нибудь список с красивыми ссылками одинаковой высоты, но текст в ней может быть и в одну и в 2 строки, если мы для отступов применим только padding, то может получится вот так:

    Но если мы сделаем минимальную высоту и уменьшим padding, то у нас не измениться размер, а текст красиво впишется в размеры:


    Мелочь, а приятно.
    Ответ написан
  • Как правильно подключить svg?

    valgerofficial
    @valgerofficial
    Десигнер LVL100
    Я всегда конвертирую SVG в шрифт - иконки. И юзаю их.
    Ответ написан