Что такое CSSOM?

CSSOM (CSS Object Model)

CSSOM — это программный интерфейс (API), который позволяет JavaScript получать доступ и изменять CSS стили страницы. CSSOM — это аналог DOM для CSS, который предоставляет структурированное представление всех стилей документа.

Как работает CSSOM

Когда браузер загружает страницу, он создает две независимые модели:

1. DOM (Document Object Model) — структура HTML элементов
2. CSSOM (CSS Object Model) — структура применённых CSS стилей

Для отрисовки страницы браузер объединяет DOM и CSSOM в Render Tree, который затем используется для layout и рисования пикселей.

// Пример доступа к CSSOM через document.styleSheets
const stylesheets = document.styleSheets;
console.log(stylesheets[0]); // CSSStyleSheet объект

// Доступ к правилам внутри таблицы стилей
const rules = stylesheets[0].cssRules;
console.log(rules[0]); // CSSRule объект

Структура CSSOM

CSSStyleSheet — объект, представляющий одну таблицу стилей:

// Получить все таблицы стилей
for (let sheet of document.styleSheets) {
  console.log(sheet.href); // URL файла стиля
  console.log(sheet.cssRules); // Все CSS правила
  console.log(sheet.media); // Медиа-запросы
}

CSSRule — объект, представляющий одно CSS правило:

const firstRule = document.styleSheets[0].cssRules[0];
console.log(firstRule.selectorText); // '.button' - селектор
console.log(firstRule.style); // CSSStyleDeclaration - стили
console.log(firstRule.style.backgroundColor); // Доступ к конкретному свойству

Практические примеры использования CSSOM

Пример 1: Чтение вычисленных стилей элемента

const element = document.querySelector('.button');
const styles = window.getComputedStyle(element);

console.log(styles.backgroundColor); // 'rgb(0, 120, 212)'
console.log(styles.fontSize); // '16px'
console.log(styles.display); // 'block'

// Это показывает ФИНАЛЬНЫЕ стили после применения всех CSS правил

Пример 2: Добавление нового CSS правила динамически

const stylesheet = document.styleSheets[0];

// Добавить новое правило в конец таблицы стилей
const ruleIndex = stylesheet.cssRules.length;
stylesheet.insertRule(
  '.new-class { color: red; font-weight: bold; }',
  ruleIndex
);

// Теперь элементы с классом .new-class получат эти стили

Пример 3: Изменение существующего CSS правила

const stylesheet = document.styleSheets[0];

for (let i = 0; i < stylesheet.cssRules.length; i++) {
  const rule = stylesheet.cssRules[i];
  
  if (rule.selectorText === '.button') {
    rule.style.backgroundColor = 'blue';
    rule.style.padding = '10px 20px';
    break;
  }
}

Пример 4: Удаление CSS правила

const stylesheet = document.styleSheets[0];

for (let i = 0; i < stylesheet.cssRules.length; i++) {
  const rule = stylesheet.cssRules[i];
  
  if (rule.selectorText === '.old-class') {
    stylesheet.deleteRule(i);
    break;
  }
}

CSSOM vs Inline Styles

Inline стили (низший уровень приоритета при работе с JS):

const element = document.querySelector('div');
element.style.color = 'red'; // Это НЕ CSSOM, это DOM API
element.style.fontSize = '20px';

CSSOM (воздействует на глобальные стили):

document.styleSheets[0].insertRule('.my-div { color: red; }');
// Это повлияет на ВСЕ элементы с классом .my-div

Производительность и CSSOM Blocking

Одна из важных концепций — CSSOM Blocking. Браузер не может начать отрисовку страницы, пока CSSOM полностью не загружен и обработан.

<!-- CSS блокирует парсинг HTML и рендеринг -->
<link rel="stylesheet" href="styles.css">
<!-- Страница не отрисуется, пока styles.css не загрузится -->

<script>
  // JavaScript также ждёт, пока CSSOM будет готов
  const styles = window.getComputedStyle(element);
</script>

Оптимизация:

• Минимизируй размер CSS
• Используй media queries для неблокирующих стилей
• Загружай некритичные стили асинхронно

CSSOM API методы

// insertRule(rule, index) - добавить правило
stylesheet.insertRule('body { margin: 0; }', 0);

// deleteRule(index) - удалить правило
stylesheet.deleteRule(0);

// cssRules - список всех правил
const rulesList = stylesheet.cssRules;

// addRule(selector, style) - старая версия (deprecated)
stylesheet.addRule('.old-browser', 'color: blue');

Практическое применение в моих проектах

1. Динамическая смена темы (light/dark mode)

   • Изменял CSS переменные через CSSOM
   • Избегал перерисовки всей страницы

2. Анализ критичного CSS для performance

   • Проверял, какие стили блокируют рендеринг
   • Оптимизировал порядок загрузки CSS

3. Инъекция стилей в третьесторонних скриптов

   • Добавлял CSS правила для виджетов
   • Скрывал или стилизовал элементы при необходимости

Вывод

CSOM — это мощный API для работы со стилями через JavaScript. Понимание CSSOM важно для:

• Оптимизации производительности страницы
• Реализации динамических тем
• Управления сложными стилями
• Диагностики проблем с CSS

Однако для большинства задач достаточно базовых методов типа .style и getComputedStyle(). Прямая манипуляция глобальным CSSOM требуется редко и требует осторожности.