Как разработчики генерируют и используют случайно названные классы css [duplicate]

  d = {'a': 1, 'b': 1, 'c': 2, 'd': 2} return d.get (s, 3)  
20
задан Nick Ginanto 7 February 2013 в 10:07
поделиться

2 ответа

Обновление: CSS-модули

Эта практика теперь известна как «CSS-модули» и становится все более популярной благодаря популярности Webpack. Концепция состоит в том, чтобы преобразовать (хеш) CSS-селекторов в уникальные имена классов, чтобы убедиться, что между модулями не существует столкновений между стилями.

Модуль css-loader для Webpack имеет modules, который позволяет эту функцию. Он обычно используется с React, где вы назначаете имена классов в своей разметке через объект JS, доступный при импорте файла CSS, например

import styles from './style.css

. Если этот файл CSS имеет селектор, например. .sidebar, он применяется в разметке через

className={styles.sidebar} // JSX

. Webpack будет хешировать имя класса и селектор сопряжения для обеспечения уникальности.

Оригинальный ответ ↓

Это будет продукт минимизации и сжатия. Это, несомненно, будет написано с человекочитаемыми идентификаторами и именами классов, но, как прокомментировал Zeta, они затем заменяются аббревиатурами для сохранения байтов. Такие вещи не имеют значения для среднего веб-сайта, но когда вы получаете миллионы просмотров страниц в минуту, все это считается.

Взгляните на разницу между развитием и production версии jQuery. Это пример результата минимизации и сжатия.

9
ответ дан Astrotim 16 August 2018 в 10:31
поделиться
  • 1
    кажется логичным, но я его не покупаю. Глядя на верхние сайты alexa, youtube имеет очень читаемые идентификаторы и имена классов, и они не короткие. yahoo, кажется, имеет комбинацию этого .. с чем-то вроде этого <div class="searchwrapper tabpanel selected" id="p_13838465-searchwrapper" role="tabpanel" aria-labelledby="yui_3_4_0_1_1360241032142_164">. Википедия также имеет читаемые имена. Кроме того, twitter и pinterest (которые очень популярны) имеют читаемые имена, amazon.com. Итак, все эти популярные сайты не заботятся об этих байтах, но facebook делает? я сомневаюсь в этом – Nick Ginanto 7 February 2013 в 14:49
  • 2
    Вы знаете, что facebook и google имеют гораздо больше трафика на сервере – Bluedayz 25 May 2014 в 10:14

Это происходит потому, что они компилируют свой код, я имею в виду, что они пишут код в java, и все остальные обрабатываются с помощью GWT того же самого о facebook, который они пишут с помощью C, а затем делают то же самое.

0
ответ дан user3099030 16 August 2018 в 10:31
поделиться
  • 1
    Ваше первое утверждение верно в отношении компилируемого кода. Тем не менее, передним интерфейсом Facebook является not , скомпилированный из C :) – Ruslan 12 September 2015 в 12:57
  • 2
    Facebook использовал для перевода своего PHP-кода (который используется для разработки интерфейса) в C ++, который затем был скомпилирован в двоичный файл и запущен как исполняемый файл. Это было сделано главным образом по соображениям производительности, но теперь вместо этого PHP-код скомпилирован в промежуточный байт-код, который затем запускается виртуальной машиной HipHop, которая является компилятором точно вовремя. – Chris Rutherfurd 2 April 2017 в 08:55