CSS Namespaces
Lista de CSS Namespaces
- .l- : layouts
- .o- : objects
- .c- : components
- .js : JavaScript hooks
- .is |.has- : state classes
- .t1 |.s1 : typography sizes
- .u- : utility classes
Layouts
Os layouts são blocos maiores que contêm outros componentes. Eles são responsáveis por criar a estrutura geral da página. Eles são frequentemente usados como containers para outros componentes.
Objetos
Os objetos são as menores unidades e são independentes do contexto, quer dizer que eles não sabem onde são usados. Você pode pegar qualquer objeto, jogá-lo em outro lugar e não vai quebrar a estrutura do seu site.
Isso também significa que os objetos não devem mudar nenhuma estrutura fora de si. Portanto, os blocos de objeto não podem conter nenhuma dessas propriedades/valores:
- absolute
- fixed
- float
- margin
- padding
- position
- top
- right
- bottom
- left
Componentes
Os componentes podem conter outros objetos e componentes
JavaScript Hooks
Hooks de Javascript (.js) indicam se um objeto/componente requer JavaScript.
State Classes
As classes de estado indicam o estado atual do objeto/componente . Quando uma classe de estado é aplicada, você sabe imediatamente se um objeto/componente tem uma lista suspensa (.has-dropdown) ou está no estado aberto (.is-open).
Typography Sizes
As classes de tamanho de tipografia são usadas para definir o tamanho da fonte. Eles são usados para definir o tamanho da fonte de um objeto/componente.
Utility Classes
Classes utilitárias são classes auxiliares que executam algo extremamente específica. Elas fazem isso tão bem que substituem todo o resto. Como tal, eles geralmente contêm apenas uma propriedade e incluem a declaração !important.