CSSOM — Modelo de Objeto CSS
Tags: javascript, css, architecture, webdev
Published: 2023-12-14 16:52:03

As Folhas de Estilo em Cascata (CSS) desempenham um papel fundamental no desenvolvimento web, controlando a apresentação e o layout das páginas da web. Enquanto muitos desenvolvedores estão familiarizados com o Modelo de Objeto de Documento (DOM) para manipular documentos HTML e XML, poucos estão familiarizados com o Modelo de Objeto CSS (CSSOM). Neste artigo, exploraremos o CSSOM em detalhes, abordando sua importância, estrutura e aplicações práticas no desenvolvimento web.

> Esse artigo foi criado para abordagem do tema desse vídeo:

{% embed https://youtu.be/ay5X2dmyTN4 %}

## O que é o Modelo de Objeto CSS (CSSOM)?

O Modelo de Objeto CSS, frequentemente abreviado como CSSOM, é um componente fundamental no desenvolvimento web que lida com a representação e manipulação de estilos CSS em um documento web. Ele atua como uma ponte entre os estilos CSS definidos em suas folhas de estilo e como esses estilos são aplicados aos elementos HTML em uma página da web.

Em termos simples, o CSSOM fornece uma maneira estruturada de acessar, modificar e manipular propriedades e regras CSS aplicadas aos elementos HTML. Assim como o DOM permite que você interaja com a estrutura e o conteúdo de um documento HTML, o CSSOM permite que você trabalhe com os estilos CSS aplicados a esses elementos.

> “Todo código contido nesse artigo está em JavaScript.”

## A Importância do CSSOM

O CSSOM desempenha um papel crucial no desenvolvimento web por várias razões:

**1. Separação de conteúdo e apresentação**
Uma das diretrizes fundamentais do desenvolvimento web é a separação de conteúdo e apresentação. Isso significa que o HTML deve conter principalmente informações e estrutura, enquanto o CSS é responsável pela aparência e estilo. O CSSOM torna possível essa separação, permitindo que você altere a aparência de uma página sem afetar seu conteúdo.

Aqui estão algumas razões pelas quais isso é crucial:

- Manutenção mais fácil
Ao manter o conteúdo e a apresentação separados, torna-se mais fácil fazer alterações em um aspecto sem afetar o outro. Isso é particularmente importante em projetos web de grande escala, onde várias pessoas podem estar trabalhando em diferentes partes do projeto. A manutenção se torna mais eficiente quando você pode fazer alterações nos estilos sem tocar no conteúdo.

- Acessibilidade
A separação de conteúdo e apresentação também é fundamental para garantir que seu site seja acessível a todos os usuários, incluindo aqueles que usam leitores de tela. O conteúdo bem estruturado (semântica adequada) garante que a informação seja clara, enquanto os estilos cuidadosamente aplicados garantem que a apresentação seja agradável, mas não prejudique a compreensão.

- Flexibilidade
Ao separar conteúdo e apresentação, você ganha flexibilidade para adaptar seu site a diferentes dispositivos e tamanhos de tela. Isso é essencial em um mundo onde os usuários acessam sites de uma variedade de dispositivos, desde smartphones até telas grandes de desktop. Usando técnicas responsivas de CSS, você pode ajustar facilmente a apresentação de acordo com as necessidades do dispositivo.

- Desenvolvimento mais rápido
Separar conteúdo e apresentação também pode acelerar o desenvolvimento. Os desenvolvedores podem se concentrar em criar a estrutura semântica do documento HTML, enquanto os designers podem trabalhar nos estilos CSS sem interferir na estrutura. Isso permite que ambas as equipes trabalhem simultaneamente.

- Acesso e manipulação de estilos
O CSSOM oferece uma interface programática para acessar e manipular estilos CSS. Isso é essencial para criar páginas da web dinâmicas e interativas. Você pode modificar estilos em resposta a eventos do usuário, criar temas alternativos para sua página ou até mesmo criar ferramentas de personalização de estilo.

- Renderização eficiente
O navegador utiliza o CSSOM para calcular como os elementos da página devem ser exibidos. Ao otimizar o desempenho do CSSOM, você pode melhorar a velocidade de carregamento e renderização de suas páginas da web.

**2. Acesso e manipulação de estilos**
O CSSOM oferece uma interface programática para acessar e manipular estilos CSS. Isso é essencial para criar páginas da web dinâmicas e interativas. Você pode modificar estilos em resposta a eventos do usuário, criar temas alternativos para sua página ou até mesmo criar ferramentas de personalização de estilo.

Aqui estão algumas técnicas comuns:

**- Acesso por meio do objeto `style` de um elemento**

Cada elemento HTML possui uma propriedade `style` que representa os estilos aplicados diretamente a esse elemento. Você pode acessar e modificar esses estilos da seguinte forma:

```javascript
const elemento = document.getElementById('meu-elemento'); 
const estilo = elemento.style;
```

Isso permite que você acesse e modifique propriedades de estilo específicas diretamente:

```javascript
elemento.style.backgroundColor = 'azul'; elemento.style.fontSize = '16px';
```

**- Acesso a estilos computados**

Os estilos computados são os estilos finais aplicados a um elemento após a resolução de todas as regras CSS que se aplicam a ele. Você pode acessar os estilos computados por meio do `window.getComputedStyle`:

```javascript
const elemento = document.getElementById('meu-elemento'); 
const estilosComputados = window.getComputedStyle(elemento); 

// Acessando um estilo específico 
const corDeFundo = estilosComputados.backgroundColor; 
const tamanhoDaFonte = estilosComputados.fontSize;
```

**- Acesso a regras CSS externas**

Se você deseja acessar regras CSS que não são diretamente aplicadas a um elemento específico, pode fazê-lo por meio das folhas de estilo (stylesheets) vinculadas à página. O CSSOM permite que você percorra as regras em uma folha de estilo e recupere informações sobre elas:

```javascript
// Obtendo a primeira folha de estilo vinculada à página 
const folhaDeEstilo = document.styleSheets[0]; 

// Iterando pelas regras na folha de estilo 
for (const regra of folhaDeEstilo.cssRules) { 
  console.log(regra.cssText); // Exibe o texto da regra CSS 
}
```

## Manipulação de Estilos com o CSSOM

Além do acesso aos estilos, o CSSOM também permite a manipulação dos estilos CSS. Isso é útil para criar interatividade em uma página da web. Aqui estão algumas maneiras de manipular estilos:

**- Modificação direta de estilos**
Você pode modificar estilos diretamente usando o objeto style de um elemento, como mencionado anteriormente:


```javascript
 elemento.style.backgroundColor = 'azul'; elemento.style.fontSize = '16px';
```
 
**- Adição de classes CSS**
Outra técnica comum é adicionar ou remover classes CSS de elementos HTML. Isso é especialmente útil quando você deseja aplicar estilos predefinidos a elementos em resposta a eventos do usuário:

```javascript
elemento.classList.add('destaque'); 
elemento.classList.remove('destaque');
```

**- Criação e modificação de regras CSS dinamicamente**
Você pode criar e modificar regras CSS dinamicamente e adicioná-las ao CSSOM usando JavaScript. Isso permite que você adicione novos estilos à página sem recarregá-la:

```javascript
const novaRegra = document.styleSheets[0].insertRule('h1 { color: verde; }', 0);

```

**- Remoção de regras CSS**
Também é possível remover regras CSS existentes do CSSOM:

```javascript
document.styleSheets[0].deleteRule(0);
```

## 3. Renderização eficiente

O navegador utiliza o CSSOM para calcular como os elementos da página devem ser exibidos. Ao otimizar o desempenho do CSSOM, você pode melhorar a velocidade de carregamento e renderização de suas páginas da web.

**Estrutura do CSSOM**

O CSSOM é uma representação em árvore dos estilos CSS aplicados a uma página da web. Ele inclui os seguintes componentes principais:

1. Regras CSS
As regras CSS são o cerne do CSSOM. Elas contêm informações sobre como os estilos devem ser aplicados aos elementos HTML. As regras são divididas em seletores (que indicam a quais elementos se aplicam) e declarações (que definem as propriedades e valores a serem aplicados).

2. Estilos Computados
Os estilos computados representam os estilos finais aplicados a um elemento HTML após a resolução de todas as regras CSS que se aplicam a ele. Isso leva em consideração herança, especificidade e outros aspectos das regras CSS.

3. Elementos
Os elementos representam os elementos HTML em uma página da web. Cada elemento tem uma árvore de estilos associada a ele que contém os estilos aplicados.

4. Nodes(Nós)
Os nós são objetos intermediários que conectam elementos a regras CSS. Eles representam a interseção entre a estrutura do DOM e a estrutura do CSSOM.

**Manipulação do CSSOM**

Manipular o CSSOM envolve a utilização de JavaScript para acessar e modificar estilos CSS. Aqui estão alguns exemplos de tarefas que você pode realizar com o CSSOM:

1. Acesso a estilos
Você pode acessar os estilos aplicados a um elemento usando o objeto style do elemento DOM. Por exemplo:

```javascript
const elemento = document.getElementById('meu-elemento'); 
const estilo = elemento.style;
```

2. Modificação de estilos
Você pode modificar estilos diretamente no CSSOM. Por exemplo, para alterar a cor de fundo de um elemento, você pode fazer o seguinte:

```javascript
elemento.style.backgroundColor = 'azul';
```

3. Criação dinâmica de regras CSS
Você pode criar regras CSS dinamicamente e adicioná-las ao CSSOM usando JavaScript. Isso permite que você adicione novos estilos à página sem recarregá-la.

```javascript
const novaRegra = document.styleSheets[0].insertRule('h1 { color: verde; }', 0);
```

4. Remoção de regras CSS
Você também pode remover regras CSS existentes do CSSOM:

```javascript
document.styleSheets[0].deleteRule(0);
```
 
## Conclusão 

O Modelo de Objeto CSS (CSSOM) é uma parte essencial do desenvolvimento web moderno. Ele permite a manipulação eficiente dos estilos CSS em uma página da web, possibilitando a criação de páginas dinâmicas e altamente personalizáveis. Compreender o CSSOM e suas funcionalidades é fundamental para qualquer desenvolvedor web que deseje criar experiências de usuário envolventes e visualmente atraentes na web. Portanto, aproveite ao máximo essa poderosa ferramenta em seus projetos de desenvolvimento web.

**Fontes de Referência**

Para aprofundar o entendimento da importância da separação de conteúdo e apresentação e suas implicações no desenvolvimento web, você pode consultar as seguintes fontes:

1. W3C CSS Basic Box Model: Este documento da W3C explica como os elementos HTML são formatados usando o CSS e destaca a separação de conteúdo e apresentação. [W3C CSS Basic Box Model](https://www.w3.org/TR/CSS21/box.html)
2. MDN Web Docs — Separation of structure and presentation: A Mozilla Developer Network (MDN) oferece informações detalhadas sobre o princípio da separação de estrutura e apresentação, juntamente com exemplos práticos. [MDN Separation of structure and presentation](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Use_of_color)
3. “CSS Zen Garden”: O projeto CSS Zen Garden demonstra vividamente como a separação de conteúdo e apresentação permite que diferentes estilos sejam aplicados ao mesmo conteúdo HTML. [CSS Zen Garden](http://www.csszengarden.com/)