como manter seu css escalável e organizado
TRANSCRIPT
Como manter seu CSS escalável e organizado.
Como manter seu CSS escalável e organizado.
Como manter seu CSS escalável e organizado.
olá!
github.com/eder@edereduardo
software engineer@
Aplicações de pequena escala.
style.css
Aplicações de larga escala.
global.css | general.css | all.css
Pré-processadores: usar ou não usar?
Pré-processadores: usar ou não usar?
Sim, mas só se for agora!!!
Pré-processadores: usar ou não usar?
Pré-processadores: usar ou não usar?
Pré-processadores: usar ou não usar?
cacildis!!!!
1. CSS and Inline Comments
2. Local and Global Variables
3. Placeholders for Extends
4. Ampersands for a Parent Selector
5. Control Directives & Expressions
6. Compass
Organização:
Muitos pontos de entrada Único ponto de entrada
Organização:
único ponto de entrada
application.scss
módulos & componentes
../modules/_boxes.scss
../sections/_faq.scss
../sections/_account.scss
convenção & nomenclatura
BEM
A metodologia BEM foi desenvolvido no Yandex com os seguintes objetivos em mente:
Desenvolvimento rápido e resultados duradouros . Os projetos devem ser criados rapidamente, utilizando uma arquitetura que garanta sustentabilidade e longevidade para o desenvolvimento.
Yandex é uma das maiores empresas de internet na Europa, que operam o motor de busca mais popular da Rússia.
.wedding-home_container { …}
Domínio Contexto Bloco | elemento
.wedding-home_container--campaign { @extend .wedding-home_container;
background-color: blue;
}
Domínio Contexto Bloco | elemento Modificador
front-end deve conhecer design de software?
Sim, CSS tem muita similaridade com a programação.
S.O.L.I.D
S.O.L.I.DÉ um acrônimo dos cinco primeiros princípios da programação orientada a objetos e design de código identificados por Robert C. Martin (ou Uncle Bob) por volta do ano 2000. O acrônimo SOLID foi introduzido por Michael Feathers, após observar que os cinco princípios poderiam se encaixar nesta palavra.
Single responsibility principle:O Módulo deve ter seu comportamento contido e isolado.
Open/closed principleMódulo deve ser capaz de estender um comportamento de uma classe, sem modificá-lo.
Dependency inversion principleMódulo deve depender de abstração... classes de um nível alto não devem depender de classes de um nível mais baixo.
Mas se ….
Devo usar framework ?
Designer front-end
Tipografia
Style guide:
http://designmodo.github.io/Flat-UI/
Obrigado !!!