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.
3. Nomenclatura
• Classes com nomes em minúsculo, separados por hífens:
• .eto-rpe .rdc-odr
s c i n w a p r, p o u t h l e
• Nomes em inglês:
• .il-ihih .utndsre
t t e h g l g t, b t o - i c e t
• Nomes próprios na forma original:
• . i l - a e c n s o, . e s p d d s c n e t
ttefl-ooc
mu-eio-otn
F.biz | COMPANY CONFIDENTIAL
4. Nomenclatura
• Sempre utilizar nomes que representem o módulo:
• .aiainhle
nvgto-odr
• .ihih-odr
hglgthle
• .utndsre
bto-icet
• Não utilizar nomes com características visuais como cor,
medidas, direção, etc.:
• . o - e t, . i l - l e, . o - 2 p ← RUIM
cllf
ttebu
cl20x
F.biz | COMPANY CONFIDENTIAL
5. Nomenclatura
• Estados de módulos:
• .odn .ro .ucs
l a i g, e r r, s c e s
• Usados sempre em conjunto: . l s e l a i g
cas.odn
• Nomes reservados, uso composto:
• “content”, “description”, “title”, etc.
• “post-content”, “product-description”, “category-title”, etc.
• Lista completa na documentação;
F.biz | COMPANY CONFIDENTIAL
6. Nomenclatura
• “Wrappers” para encapsular elementos em um novo
escopo
• “Holders” como a base dos módulos
• w a p r e h l e são usados como sufixos, ex.:
rpe
odr
• scinwapr
eto-rpe
• pouthle
rdc-odr
F.biz | COMPANY CONFIDENTIAL
7. Nomenclatura
Exemplo de wrapper e holder:
0. <i cas"eto-rpe"
1
dv ls=scinwapr>
0.
2
<i cas"rdc-odr>
dv ls=pouthle"
0.
3
<1cas"rdc-il"Ttl<h>
h ls=pouttte>íuo/1
0.
4
<i cas"rdc-ecito"
dv ls=poutdsrpin>
0.
5
Lrmismdlrstae..
oe pu oo i mt.
0.
6
<dv
/i>
0.
7
<dv
/i>
0. <dv
8
/i>
Elementos filhos usam o nome do módulo como prefixo.
F.biz | COMPANY CONFIDENTIAL
10. Organização das classes
Para melhorar a leitura, existe uma ordem a ser seguida:
• @ x e de @ n l d
etn
icue
• propriedades do elemento
• pseudo elementos
• filhos e pares
• variações com classes adicionais
F.biz | COMPANY CONFIDENTIAL
14. Estrutura do CSS
• Estilos apenas em classes, IDs apenas para javascript
• Atenção ao aplicar estilos em tags
• Tags como H à H não devem aplicar estilos diretamente
1
6
• Escopos fechados podem, ex.:
• .itnm >l
ls-ae
i
• .al-ae>t
tbenm
r
• Evitar o uso de HACKS
• Não utilizar ! m o t n
iprat
F.biz | COMPANY CONFIDENTIAL
16. Herança no CSS
• Classes criadas de acordo com o módulo
• Priorizar as medidas relativas E e R M
M
E
• Orientação à objeto com base em módulos utilizando
@xed
etn
• Múltiplas classes usadas para situações dinâmicas, como
selos, ícones, etc, ex.:
• <utncas"aebto io-u-oe>
bto ls=bs-utn cnbymr"
F.biz | COMPANY CONFIDENTIAL
19. Box modelling
• Priorizar tamanhos fluídos nos elementos:
• Técnica coluna fixa + flexível
• Técnica colunas flexíveis
• Garantir que os elementos ocupem o espaço esperado:
• float wrapper
• u e l com margin bottom
l
i
• padding + margin
F.biz | COMPANY CONFIDENTIAL
27. Lay-outs responsivos
• Análise do projeto para criação 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
F.biz | COMPANY CONFIDENTIAL
28. Lay-outs responsivos
• Definição de estrutura “leve”:
• 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.);
F.biz | COMPANY CONFIDENTIAL
31. Lay-outs responsivos
• Características “comuns”:
• Existem entre 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)
F.biz | COMPANY CONFIDENTIAL