CSS-модули Google

Веб-разработчики завтрашнего дня

Понравилась эта статья? Если это так, получите больше похожего контента, подписавшись на нашу публикацию! ИЛИ опубликуйте свои статьи, отправив название канала и черновик ссылки. на [email protected]

НАБЛЮДЕНИЕ

Google часто пишет самые элегантные и эффективные коды, и эта компания является одной из ведущих компаний в технологической отрасли. Google создает стандарт, и разработчики программного обеспечения часто пытаются понятьчто делает Google, даже если они на самом деле не понимаютПОЧЕМУ. Я определяю Принятие без вопросов как корень инерции от лени и буду задавать вопросы ПОЧЕМУна протяжении всей этой статьи.

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

Однажды я открыл Chrome Dev Tools после поиска thanos и заметил, что имя класса HTML CSS кажется довольно случайным и неудобочитаемым (по сравнению с традиционным осмысленным className).

Страница результатов поиска Google thanos

по сравнению с Традиционный

ПОИСК …

Чтобы найти ответ, я провел много поисков в Google и смог найти правдоподобный ответ на вопрос, что и почему Google делает это.

Переименование имен классов CSS во время компиляции с помощью CSS-загрузчика

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

  • Уникальное имя класса CSS с ограниченной областью действия в конечном итоге повышает производительность и предотвращает любые неожиданные конфликты имен классов.

Например,

Фрагмент кода React из одного из моих проектов

приводит к имени класса CSS в формате

[path][name]__[local]--[hash:base64:5]

из-за css-loader и localIndentName

Преимущество css-loader и localIndentName

  • Уникальное имя класса CSS с ограниченной областью действия в конечном итоге повышает производительность и предотвращает любые неожиданные конфликты имен классов.

Недостатки css-loader и localIndentName

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

  • Длинное имя класса CSS плохо с точки зрения взаимодействия с пользователем, поскольку оно увеличивает размер пакета CSS и, в конечном итоге, замедляет отрисовку страницы.

Бонус — местная конвенция;

Вы можете стилизовать экспортированные имена классов

По умолчанию ключи экспорта JSON отражают имена классов (т. е. значение asIs).

asIs — Имена классов будут экспортированы как есть

camelCase — Имена классов будут верблюжьими, исходное имя класса не будет удалено из локальных

camelCaseOnly — Имена классов будут верблюжьими, исходное имя класса будет удалено из локальных

dashes — Только дефисы в именах классов будут верблюжьими.

dashesOnly — Дефисы в именах классов будут верблюжьими, исходное название класса будет удалено из локалей

Делаем имена короткими

Возвращаясь к странице результатов поиска Google thanos

bNg8RB , wYq63b … имена классов CSS намного короче, чем то, что мы сделали ранее

Проще говоря,

мы могли бы преобразовать

[path][name]__[local]--[hash:base64:5]

to

[hash:base64:6]
  • Это выведет 6-буквенные имена классов, закодированные с помощью base64.

Преимущества коротких имен классов

  • Короткие имена классов уменьшают размер пакета CSS.
Shorter CSS class names --> smaller bundle size --> 
less amount of data to transfer over network
  • Другими словами, более короткие имена классов CSS обеспечивают более быструю визуализацию и улучшают взаимодействие с пользователем, поскольку по сети необходимо передавать меньше данных.

Недостатки коротких имен классов

  • возможное столкновение имен классов, потому что это всего 6 букв
  • Если вы считаете небезопасным использовать только 6 букв, вы можете добавить больше…

Вывод

Модуль CSS делает CSS таким, каким он должен быть написан:

  • модуль
  • в пределах области действия
  • но по-прежнему можно использовать повторно

Это выглядит уродливо и кажется, что невозможно отлаживать стили CSS с помощью «случайных имен классов». Но это неправомерно по двум причинам.

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

Модуль CSS имеет много преимуществ с точки зрения оптимизации взаимодействия с пользователем, и я настоятельно рекомендую использовать модули CSS.

Спасибо, что прочитали :)

Ресурсы

Веб-разработчики завтрашнего дня

Понравилась эта статья? Если это так, получите больше похожего контента, подписавшись на нашу публикацию! ИЛИ опубликуйте свои статьи, отправив название канала и черновик ссылки. на [email protected]