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.
Спасибо, что прочитали :)
Ресурсы
- https://develoger.com/how-to-obfuscate-css-class-names-with-react-and-webpack-20e2b5c49cda
- https://www.sitepoint.com/understanding-css-modules-methodology/
Веб-разработчики завтрашнего дня
Понравилась эта статья? Если это так, получите больше похожего контента, подписавшись на нашу публикацию! ИЛИ опубликуйте свои статьи, отправив название канала и черновик ссылки. на [email protected]