Для чего указывают рандомные классы?

Question

На многих сайтах я замечал такую штуку, что некоторые указывают класс тега рандомными буквами. Скажем, для нас привычный вид это «header”, а они указывают «Gdbdu7hd”, для чего это делается? И как такое же использовать на моем сайте? Что за библиотека?

Answer 1

В React этим занимается библиотека styled-components, в ней есть весь необходимый готовый функционал и примеры использования.

В обычном webpack проекте такого можно добиться с помощью встроенной в css-loader опции module и гибко настроить генерацию уникального имени css правила.

Пример загрузчика в конфиге:

{
    loader: 'css-loader',
    options: {
        modules: {
            // In Dev only
            //localIdentName:'[name]__[local]--[hash:base64:5]',
            
            // Production
            localIdentName:'[hash:base64:10]',
        },
    },
},

Пример использования

.css файл:

:global body {
  margin: 0;
  padding: 0;
}

.page {
  background-color: purple;
  width: 100vw;
  height: 100vh;
}

.text {
  font-size: 5em;
}

.js файл:

import styles from "./style.css";

const element = document.querySelector(".element");

element.innerHTML = `<div class="${styles.page}">
    <p class="${styles.text}">CSS Modules Webpack</p>
</div>`;

Результат исходного кода:

<div class="element">
    <div class="_dXGhaRn5sCToGGGDCh">
        <p class="CHJ8S9DbrdfTxcs_BEte">CSS Modules Webpack</p>
    </div>
</div>

БЛОГ НА HUSL

Для чего указывают рандомные классы?

Ответы (1 шт):