- Boxes
- Rules e declaration blocks
- box model
- Margin collapse
- Seletores
- Unidades
- Ordem de preferencia
- Debug
- Float
- Flexbox
- CSS Patterns
- Grid
- Rules antes das chaves
- Declaration entre as chaves
{...}
- Box-sizing(
content-boxborder-box) - Overflow(
autohiddenvisible) - Background-clip(
border-boxpadding-boxcontent-box) - Display(
blockinlineinline-block) - Position(
staticrelativeabsolutefixed)
- Top e Bottom
- First child e Last child
- Sem altura
- Seletores simples(
elementos,classeseids) - Seletores de atributo(
[attr[=]]) - Pseudo classes(
parte 1parte 2) - Pseudo elementos
- Combinadores(
,>+~)
- Valores Numericos(
unitlesspxemremvwvhvminvmax) - Porcentagens(
parent-relatedfont-related) - Cores(
keywordhexhslrgbhslargba) - Funções(
rgba()translate()url()...)
- Importancia(
!important) - Especificidade(
1000100101) - Ordem no código
- Stylesheets
- Computed
- Box-model
- float(
noneleftrightinherit) - clear(
nonebothleftright) - Height collapse(
empty div::afterdisplay: flow-root)
flex-direction(rowrow-reversecolumncolumn-reverse)flex-wrap(nowrapwrapwrap-reverse)flex-flow(<flex-direction> <flex-wrap>)justify-content(flex-startflex-endcenterspace-betweenspace-aroundspace-evenly)align-items(stretchflex-startflex-endcenterbaseline)align-content(flex-startflex-endcenterstretchspace-betweenspace-around)
orderflex-growflex-shrinkflex-basisflex(<flex-grow> <flex-shrink> <flex-basis>)align-self
- SMACSS(Scalable and Modular Architecture for CSS)
- BEMCSS(Block Element Modifier CSS)
- RSCSS(Reasonable System for CSS Stylesheet Structure)
- MaintainableCSS
- Base (input, input[type=checkbox], h1, p)
- Importancia do reset.css
- Layout (Wrappers para modules)
- (.l-layout, #sidebar, .l-inline, .l-inline #sidebar)
- Module (Partes reutilizaveis)
- (.module, .cart, .form, .form-sidebar)
- Modulo subclasse
- State (Estado do seu componente)
- (.is-state, .cart.is-empty, .form.is-invalid)
- Pode ser usado em modulos e layouts
- Dependente do uso de javascript
- Theme (Quando necessrio, irá descrever como os layouts e modules deverão aparentar)
- Separado em outros arquivos (mod-name.css, theme.css)
- Block (.block)
- Element (.block__element)
- Modifier (.block__element .block__element--modifier) (.block .block--modifier)
- Nomenclatura (No minimo 2 palavras)
- .cart-item, .header-logo
- Nomenclatura de elementos (Uma unica palavra)
- .cart-item > .title, .header-logo > .acomlogo
- Nomenclatura de Variantes (Prefixado com -)
- .cart-item.-small, .header-logo > .acomlogo.-blue
- Semantica (.col-md.red.pb3.m10) (.basket)
- Legibilidade
- Facilidade para responsivo
- Facilidade para pesquisar ctrl+f
- Reduz risco de mudanças indesejadas - Não tem diferença de inline style
- Hooks para testes automatizados
- Hooks para o JS
- Mais facil para debugar
- Recomendado na doc do HTML - Não causa confusão ao estilizar estados como :hover
- Diminui o tamanho do HTML, CSS pode e deve ser cacheado
- Reuso e ID's
- Convenção (.<module>[-component][-state][--modifier])
- .basket
- .basket-item
- .basket-item-isOutOfStock
- Modules vs Components - Modules são feito de componentes - Modules são distintos na sua aplicação, e combinados formam estruturas complexas
- States
- Fechado x Aberto, Habilitado x Desabilitado
- (.basket .basket-hasInvalidproducts)
- Modifiers
- Diferentemente do estado, modifiers so usados quando as diferenças são conhecidas
- (.basket .basket--suba, .product .product--phone)
- Versionamento para teste A/B
- (.basket, .basket2)
display(grid,inline-grid)grid-template-columns(<track-size><line-name>)grid-template-rows(<track-size><line-name>)grid-template-areas("<grid-area-name>|.|none| ...")grid-template(<grid-template-rows> / <grid-template-columns>)grid-column-gap(<line-size>)grid-row-gap(<line-size>)grid-gap(<grid-row-gap> ? <grid-column-gap>)justify-items(startendcenterstretch)align-items(startendcenterstretch)place-items(<align-items> ? <justify-items>)justify-content(igual flexbox)align-content(igual flexbox)place-content(<align-content> ? <justify-content>)grid-auto-columns(<track-size>)grid-auto-rows(<track-size>)grid-auto-flow(rowcolumnrow densecolumn dense)grid(<grid-template><grid-template-rows> / [auto-flow ?&& dense] <grid-auto-columns>[auto-flow ?&& dense] <grid-auto-rows> / <grid-template-columns>)
grid-column-start(<line>span <number>span <name>auto)grid-column-end(<line>span <number>span <name>auto)grid-row-start(<line>span <number>span <name>auto)grid-row-end(<line>span <number>span <name>auto)grid-column(<start-line> / <end-line>)grid-row(<start-line> / <end-line>)grid-area(<row-start> / <column-start> / <row-end> / <column-end>)justify-self(startendcenterstretch)align-self(startendcenterstretch)place-self(<align-self> ? <justify-self>)