O CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para definir a apresentação de documentos HTML. Alguns dos conceitos fundamentais do CSS incluem:
A herança é um mecanismo pelo qual as propriedades CSS aplicadas a um elemento são transmitidas aos seus elementos filhos. Por exemplo, ao definir o estilo de fonte para o elemento <body>, todos os elementos dentro do corpo do documento herdarão essa fonte, a menos que seja especificado de outra forma.
A especificidade refere-se à regra que determina qual estilo será aplicado a um elemento quando existem estilos em conflito. Os seletores mais específicos têm maior prioridade. Por exemplo, um seletor de ID (#) é mais específico do que um seletor de classe (.) ou um seletor de elemento. Além disso, os estilos definidos inline têm maior prioridade do que os estilos definidos em folhas de estilo externas ou internas.
O princípio da cascata refere-se à ordem de aplicação dos estilos quando há várias regras em conflito que se aplicam ao mesmo elemento. O CSS segue uma ordem de cascata que determina como os estilos são aplicados, com base na origem, especificidade e ordem de declaração das regras. Isso permite que os estilos sejam sobrescritos e combinados de forma flexível para criar a apresentação desejada.
Estes conceitos são fundamentais para compreender como o CSS funciona e como criar estilos eficazes e bem estruturados para os documentos HTML.
<p>Este é um parágrafo de texto comum.</p> <p class="destaque">Este parágrafo tem uma classe de destaque.</p> <p id="paragrafo-destaque">Este parágrafo tem um ID e é destacado.</p>
Um Design System é um conjunto de padrões de design, componentes e diretrizes que visam garantir consistência e reutilização em projetos de desenvolvimento web.
No âmbito de um Design System, o HTML é utilizado para estruturar o conteúdo de uma página web, enquanto o CSS é utilizado para estilizar esse conteúdo, seguindo as diretrizes definidas pelo Design System. Utilizando classes CSS consistentes e semântica HTML apropriada, podemos garantir que os elementos da interface sejam facilmente estilizados e reutilizados em todo o projeto.
A reutilização é um dos princípios fundamentais de um Design System. Componentes e padrões de design devem ser projetados de forma modular, de modo que possam ser facilmente integrados e reaproveitados em diferentes partes do projeto. Isso promove consistência visual e agilidade no desenvolvimento, uma vez que não é necessário recriar elementos de interface comuns.
Os princípios de SOLID são um conjunto de cinco princípios de design de software que visam criar sistemas mais compreensíveis, flexíveis e fáceis de manter. Embora não sejam exclusivamente aplicáveis a Design Systems, esses princípios podem ser relacionados de forma útil:
Adotar esses princípios ao projetar um Design System pode contribuir para um sistema mais robusto, flexível e fácil de manter ao longo do tempo.
.button {
display: inline-block;
padding: 10px 20px;
font-size: 16px;
border: 2px solid #007bff;
background-color: transparent;
color: #007bff;
text-align: center;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s, color 0.3s;
}
.button:hover {
background-color: #007bff;
color: #fff;
}
.button-secondary {
border-color: #6c757d;
color: #6c757d;
}
.button-secondary:hover {
background-color: #6c757d;
color: #fff;
}
<a href="#" class="button">Botão Primário</a>
<a href="#" class="button button-secondary">Botão Secundário</a>
Neste exemplo, temos um componente de botão simples. O princípio de Dependency Inversion Principle é demonstrado na separação entre a definição das propriedades visuais do botão (cores, tamanho, borda, etc.) no CSS e a aplicação dessas propriedades nos elementos HTML. Isso permite que o componente de botão não dependa diretamente das propriedades visuais definidas no CSS, mas sim de uma abstração das propriedades que podem ser facilmente alteradas ou estendidas sem modificar o componente em si. Essa separação de responsabilidades promove uma arquitetura flexível e desacoplada, seguindo o princípio de Dependency Inversion Principle.
<style>
/* Exemplo de CSS embutido para ilustrar o componente */
.shape {
width: 100px;
height: 100px;
background-color: #007bff;
margin-bottom: 10px;
}
.circle {
border-radius: 50%;
}
.square {
border-radius: 0;
}
</style>
<div class="shape circle"></div>
<div class="shape square"></div>
Neste exemplo, temos uma classe .shape que representa uma forma básica. Duas sub-classes, .circle e .square, estendem a classe .shape e representam diferentes tipos de formas. O Princípio de Substituição de Liskov é aplicado aqui, pois uma instância de .circle pode ser substituída por uma instância de .shape em qualquer contexto sem afetar o comportamento do programa. O mesmo se aplica à classe .square. A classe base (.shape) define o comportamento comum a todas as formas, enquanto as classes derivadas (.circle e .square) estendem esse comportamento para formas específicas. Isso permite que usemos polimorfismo, substituindo instâncias de sub-classes por instâncias da classe base sem introduzir erros ou comportamentos inesperados.