CSSOM: O que é e como funciona?

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:

Fica aqui o artigo deles!

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:

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

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

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:

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:

// 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:

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:

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:

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:

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:

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:

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.

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:

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:

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
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
"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

Nessa página