Стратегия Amway по развитию CSS без внешних ссылок

внешний интерфейс CSS

Если вашему проекту не требуется совместимость с IE8, попробуйте реализовать следующую стратегию разработки CSS.

Никаких внешних ссылок в CSS-коде!

То есть не делайте никаких запросов http/https из файлов CSS.

Например, мы использовали для отображения фона небольшой иконки, код CSS был бы таким:

.icon-arrow-down {
    background-image: url(./images/arrow-down.svg);
}

Реализация стратегии разработки CSS без внешних ссылок выглядит так:

.icon-arrow-down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12.012 19.676l-8.508-8.508-2.502 2.502 11.011 11.011 11.011-11.011-2.502-2.502z'%3E%3C/path%3E%3C/svg%3E");
}

Вся графика исходной внешней ссылки является встроенной.

Преимущества стратегии разработки CSS без обратных ссылок

1. Более быстрый рендеринг страницы

Встраивание материала, меньше запросов http/https, должно быть быстрее, чем много запросов. В наши дни узким местом производительности небольших файлов является не передача трафика, а инициирование и получение запросов.

2. Миграция и ссылки удобнее

Поскольку внешних ссылок нет, макет стиля или компоненты, которые вы написали, хотят, чтобы другие использовали их, это очень просто, просто скопируйте файл CSS. Однако, если это традиционная реализация внешней цепочки, необходимо копировать ресурсы статического изображения вместе, и стоимость будет высокой.

Низкая связанность, легкая миграция и ссылка — вот самые важные причины, по которым я продвигаю разработку CSS без внешних ссылок, что действительно удобно.

3. Отсутствие междоменных проблем

Например, у файлов шрифтов есть междоменные проблемы, а у встроенных файлов такой проблемы нет.

3. Отсутствие затрат на консолидацию

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

Практика разработки CSS без внешних ссылок

Обычно основными внешними ссылками в файлах CSS являются маленькие значки, поэтому, если маленькие значки хорошо обрабатываются, CSS также может попрощаться с внешними ссылками.

  1. Попрощайтесь с графикой PNG и используйте векторную графику.
  2. Приоритетное использованиеТехнология SVG-спрайтов, маленькие значки не отображаются в CSS.
  3. Если проект относительно небольшой и в нем используется мало значков, нет необходимости использовать технологию SVG Sprites, поддержка которой по-прежнему требует больших затрат. Приоритетом является использование CSS для рисования значков, нам не нужно писать свои собственные, мы можем просто скопировать значки CSS, которые уже написали другие. Для этого смотрите статью, которую я подготовил специально для этой недели"Разделение кода и организация общих иконок на чистом CSS",Введение в документ см. здесь.
  4. В конце концов, значки, которыми может управлять CSS, ограничены, и в настоящее время рекомендуетсяИспользовать escape-форматСделайте SVG встроенным, что нам удобно для задания цвета.

    Конкретные шаги заключаются в следующем:
    Перейдите на платформу с маленькими значками, чтобы загрузить, или экспортируйте исходный значок SVG из инструмента дизайна (скетч или фигма), а затем откройте то, что я сделал.Инструмент сжатия SVGO, скопируйте, выберите или перетащите этот значок для загрузки, в настоящее время в крайнем правом поле ввода находится экранированный встроенный код SVG:

    复制CSS转义内联SVG代码

    требуется при использованииurl()двойные кавычки внутри функции",Например:

    .icon-arrow-down {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M12.012 19.676l-8.508-8.508-2.502 2.502 11.011 11.011 11.011-11.011-2.502-2.502z'%3E%3C/path%3E%3C/svg%3E");
}

    Если у вас нет высоких требований к стилю пользовательского интерфейса значков, вы также можете использоватьэта страница инструментовВ нем предусмотрено более 1500 мелких иконок:

    Щелкните любую маленькую иконку, вы можете копировать различные формы встроенного кода, существует четыре типа встроенного кода, встроенный HTML, встроенный Base64, встроенный экранированный код CSS и т. д.:

    点击小图标后的各种内联方法示意

Если в проекте есть другая графика, отличная от обычных маленьких значков, она обрабатывается аналогичным образом.

потенциально спорный

1. Размер файла намного больше
Действительно, вполне возможно, что то, что раньше составляло 10 КБ CSS, теперь составляет 100 КБ. Однако объем общих загруженных нами ресурсов не увеличился, наоборот, некоторые материалы можно сжать в GZIP после того, как они будут преобразованы в персонажей, и объем меньше.

Тогда, в эту эпоху, это уже эпоха видеотрафика.Молодежь не моргает, когда видит накладные расходы видеотрафика.Размер CSS 100К (передача только более 30К), стоит ли упоминать этот объем? вообще никак не влияет..

Наступает эра 5G, и 100 КБ CSS-файлов подобны песчинке, не заслуживающей упоминания и вообще не волнующей.

2. Время рендеринга CSS увеличено

Это правда, что время рендеринга CSS несколько увеличится. Но веб-страницы, которые мы разработали, были настолько простыми, что о дополнительном времени рендеринга не стоило и упоминать.

Кроме того, незначительное время, добавленное к рендерингу CSS, ничто по сравнению с сэкономленным временем запроса. По сравнению с отправкой в ​​школу 10 человек скорость в одну сторону была 60 на одного человека за раз, теперь за один раз перевозится 10 человек, а скорость в одну сторону 50. Какой из них экономит больше времени, очевидно.

Новые стратегии для новой эры

В наши дни трафик уже не имеет ценности, и нет необходимости сравнивать размер CSS ради JS, поэтому ресурсы внешней цепочки CSS можно с уверенностью встраивать.

В наше время производительность программного и аппаратного обеспечения очень высока, а так называемое время вычислений и рендеринга на самом деле не так уж и мало, главное — время, сэкономленное за счет встраивания.

Наконец, позвольте мне еще раз упомянуть, что самая важная роль внешних ссылок CSS — это не производительность, ключ в том, чтобы не поддерживать связь, обслуживание и обслуживание в будущем, что более удобно и беззаботно. следовательно,Убедитесь, что в вашем CSS нет внешних ссылок., иначе это важнейшее преимущество перестанет существовать.






Категории