Padrão de desenvolvimento e organização de SASS para framework Hyojun, da F.biz. Esta segunda parte foca em práticas, e alguns conceitos para construção do CSS.
separados por hífens: • . s e c t i o n - w r a p p e r, . p r o d u c t - h o l d e r • Nomes em inglês: • . t i t l e - h i g h l i g h t, . b u t t o n - d i s c r e e t • Nomes próprios na forma original: • . t i t l e - f a l e - c o n o s c o, . m e u s - p e d i d o s - c o n t e n t Nomenclatura
o módulo: • . n a v i g a t i o n - h o l d e r • . h i g h l i g h t - h o l d e r • . b u t t o n - d i s c r e e t • Não utilizar nomes com características visuais como cor, medidas, direção, etc.: • . c o l - l e f t, . t i t l e - b l u e, . c o l - 2 2 0 p x ← RUIM Nomenclatura
l o a d i n g, . e r r o r, . s u c c e s s • Usados sempre em conjunto: . c l a s s e . l o a d i n g • Nomes reservados, uso composto: • “content”, “description”, “title”, etc. • “post-content”, “product-description”, “category-title”, etc. • Lista completa na documentação; Nomenclatura
um novo escopo • “Holders” como a base dos módulos • w r a p p e r e h o l d e r são usados como sufixos, ex.: • s e c t i o n - w r a p p e r • p r o d u c t - h o l d e r Nomenclatura
d i v c l a s s = " s e c t i o n - w r a p p e r " > < d i v c l a s s = " p r o d u c t - h o l d e r " > < h 1 c l a s s = " p r o d u c t - t i t l e " > T í t u l o < / h 1 > < d i v c l a s s = " p r o d u c t - d e s c r i p t i o n " > L o r e m i p s u m d o l o r s i t a m e t . . . < / d i v > < / d i v > < / d i v > Elementos filhos usam o nome do módulo como prefixo. Nomenclatura 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 .
ordem a ser seguida: • @ e x t e n d e @ i n c l u d e • propriedades do elemento • pseudo elementos • filhos e pares • variações com classes adicionais Organização das classes
e { / / e x t e n d s e i n c l u d e s @ e x t e n d % p l a c e h o l d e r - n a m e ; @ i n c l u d e m i x i n - n a m e ; / / p r o p r i e d a d e s d o o b j e t o c o l o r : r e d ; / / p s e u d o e l e m e n t o s & : h o v e r { . . . } . . . Organização das classes 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 . 1 1 . 1 2 . 1 3 .
i l h o s e p a r e s . m o d u l e - c h i l d { . . . } + . s i b b l i n g { . . . } / / v a r i a ç õ e s c o m c l a s s e s a d i c i o n a i s & . a c t i v e { . . . / / s o b r e p o s i ç ã o d e f i l h o s . m o d u l e - c h i l d { . . . } } } Organização das classes 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 . 1 1 . 1 2 . 1 3 .
apenas para javascript • Atenção ao aplicar estilos em tags • Tags como H 1 à H 6 não devem aplicar estilos diretamente • Escopos fechados podem, ex.: • . l i s t - n a m e > l i • . t a b l e - n a m e > t r • Evitar o uso de HACKS • Não utilizar ! i m p o r t a n t Estrutura do CSS
n t - i t e m { . . . } . c o m m e n t - l i s t > l i , . c o m m e n t - i t e m { @ e x t e n d % c o m m e n t - l i s t - i t e m ; } . c o m m e n t - l i s t { > l i { / / . . . o v e r r i d e d a v e r s ã o s t a n d a l o n e m a r g i n - t o p : 1 0 p x ; m a r g i n - b o t t o m : 0 ; & : f i r s t - c h i l d { m a r g i n - t o p : 0 ; } } } 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 . 1 1 . 1 2 . 1 3 . 1 4 . 1 5 .
o módulo • Priorizar as medidas relativas E M e R E M • Orientação à objeto com base em módulos utilizando @ e x t e n d • Múltiplas classes usadas para situações dinâmicas, como selos, ícones, etc, ex.: • < b u t t o n c l a s s = " b a s e - b u t t o n i c o n - b u y - m o r e " > Herança no CSS
• Técnica coluna fixa + flexível • Técnica colunas flexíveis • Garantir que os elementos ocupem o espaço esperado: • float wrapper • u l e l i com margin bottom • padding + margin Box modelling
dos CSS: • Estrutura é leve? 1 request (estrutura + página) • Estrutura é pesada? 2 requests (estrutura, página) • Organização no SASS: • Quais são os breakpoints? • O que é comum entre os diferentes tamanhos? = common • O que é específico para um tamanho? = ###-label Lay-outs responsivos
Pouca complexidade e quantidade de linhas; • Download dos KB não supera o tempo da abertura de conexão + latência; • Definição de estrutura “pesada”: • Muitas linhas, assets em base64; • Download de KB é maior, próximas páginas navegadas estarão no cache (max-age, expires, etc.); Lay-outs responsivos
todos os breakpoints, como cores, fontes, etc. • Definição das variáveis compartilhadas em COMMON • Características “específicas”: • Existem apenas no breakpoint atual, como posicionamento, espaçamentos, layout, etc. • Sobreposição de variáveis compartilhadas em ###-LABEL (ex.: 320-mobile) Lay-outs responsivos
apenas lógica é necessária, como cálculos, conversão de valores, etc. Ex.: $ b a s e - f o n t - s i z e : 1 6 p x ! d e f a u l t ; @ f u n c t i o n t o - e m ( $ v a l u e , $ b a s e - p x - v a l u e : 0 ) { $ b a s e : $ b a s e - f o n t - s i z e ! d e f a u l t ; @ i f $ b a s e - p x - v a l u e ! = 0 { $ b a s e : $ b a s e - p x - v a l u e ; } @ r e t u r n ( $ v a l u e / $ b a s e ) * 1 e m ; } Functions 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 .
a saída de CSS e/ou lógica é necessária. Ex.: @ m i x i n a b s o l u t e - c e n t e r ( $ s i z e , $ v e r : t r u e , $ h o r : t r u e ) { @ i f $ v e r { t o p : 5 0 % ; m a r g i n - t o p : n t h ( $ s i z e , 2 ) * - 0 . 5 ; } @ i f $ h o r { l e f t : 5 0 % ; m a r g i n - l e f t : n t h ( $ s i z e , 1 ) * - 0 . 5 ; } } Mixins 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 .
código. O Hyojun usa apenas placeholder selectors. Ex.: % b a s e - b u t t o n { p a d d i n g : 0 . 8 3 e m ; d i s p l a y : i n l i n e - b l o c k ; f o n t - s i z e : 1 e m ; t e x t - d e c o r a t i o n : n o n e ; c o l o r : $ b a s e - b u t t o n - f o n t - c o l o r ; b a c k g r o u n d - c o l o r : $ b a s e - b u t t o n - b g - c o l o r ; } Extends 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 .
“base button”: . h i g h l i g h t - b u t t o n { @ e x t e n d % b a s e - b u t t o n ; f o n t - s i z e : 1 . 2 5 e m ; c o l o r : $ h i g h l i g h t - b u t t o n - f o n t - c o l o r ; b a c k g r o u n d - c o l o r : $ h i g h l i g h t - b u t t o n - b g - c o l o r ; } . d i s c r e e t - b u t t o n { @ e x t e n d % b a s e - b u t t o n ; f o n t - s i z e : 0 . 7 5 e m ; } Extends 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 .
como: . h i g h l i g h t - b u t t o n , . d i s c r e e t - b u t t o n { . . . ( c o n t e ú d o d e % b a s e - b u t t o n ) } . h i g h l i g h t - b u t t o n { f o n t - s i z e : 1 . 2 5 e m ; . . . } . d i s c r e e t - b u t t o n { f o n t - s i z e : 0 . 7 5 e m ; } Extends 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 .
% a n i m - p r o d u c t - i t e m { / / O U T ( D E F A U L T ) . p h o t o - h o l d e r i m g , . v a l u e , . a n i m - i c o n { @ i n c l u d e t r a n s i t i o n - t i m i n g - f u n c t i o n ( $ b a s e - a n i m - e a s e ) ; @ i n c l u d e t r a n s i t i o n - p r o p e r t y ( t r a n s f o r m ) ; @ i n c l u d e t r a n s i t i o n - d u r a t i o n ( $ f a s t - a n i m - d u r a t i o n ) ; @ i n c l u d e t r a n s i t i o n - d e l a y ( 0 ) ; } . . . Animations 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 .
i m - i c o n { @ i n c l u d e t r a n s f o r m - o r i g i n ( b o t t o m c e n t e r ) ; } / / O N & : h o v e r . a n i m - i c o n { @ i n c l u d e t r a n s i t i o n - t i m i n g - f u n c t i o n ( $ b o u n c e - a n i m - e a s e ) ; @ i n c l u d e t r a n s i t i o n - d u r a t i o n ( $ b a s e - a n i m - d u r a t i o n ) ; } & : h o v e r . p h o t o - h o l d e r i m g , & : h o v e r . v a l u e { @ i n c l u d e t r a n s i t i o n - d u r a t i o n ( $ f a s t - a n i m - d u r a t i o n ) ; } } Animations 0 1 . 0 2 . 0 3 . 0 4 . 0 5 . 0 6 . 0 7 . 0 8 . 0 9 . 1 0 . 1 1 . 1 2 .
mcarneiro
tammielis
robhawkes
morganepeng
pedronauck
destraynor
pauljervisheath
palkan
ufuk
lynnandtonic
colly
tenderlove
shlominoach
