O que são estilos embutidos e qual é a sua prioridade?
sobes.tech IA
Resposta da IA
Os estilos embutidos são estilos definidos diretamente no elemento HTML usando o atributo style.
<p style="color: red;"> Este texto será vermelho </p>
A prioridade dos estilos embutidos é a mais alta entre todos os métodos de definir estilos em CSS. Eles sobrescrevem os estilos de folhas de estilo externas (.css), os estilos em blocos <style> no <head> e os estilos herdados dos elementos pais. A exceção são as regras com a bandeira !important.
Exemplo de prioridades (do mais alto ao mais baixo, com a mesma especificidade):
- Regras com
!important(não recomendado usar). - Estilos embutidos (
atributo style). - Folhas de estilo externas (
<link rel="stylesheet">). - Estilos internos (
bloco<style>no<head>`). - Estilos herdados.
- Estilos padrão do navegador.
Os estilos embutidos possuem uma especificidade equivalente a um seletor ID (#id).
A principal desvantagem dos estilos embutidos é a baixa manutenibilidade. Eles dificultam a gestão centralizada de estilos, complicam a refatoração e levam à duplicação de código. Portanto, seu uso geralmente deve ser limitado, por exemplo, para estilos temporários de depuração ou em componentes onde os estilos são calculados dinamicamente e vinculados a um elemento específico.