Hyojun Sass Standards 2/2

Hyojun SASS
Standards 2/2
Marcelo Miranda Carneiro
27/02/2014
F.biz | COMPANY CONFIDENTIAL

Nomenclatura

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


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

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;

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

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.

Organização das
classes

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

0. .oue{
1
mdl
0.
2
0.
3
/ etnseicue
/ xed
nlds
0.
4
@xed%lchle-ae
etn paeodrnm;
0.
5
@nld mxnnm;
icue ii-ae
0.
6
0.
7
/ poreae d ojt
/ rpidds o beo
0.
8
clr rd
oo: e;
0.
9
1.
0
/ ped eeets
/ suo lmno
1.
1
&hvr{..}
:oe
.
1.
2
1.
3
..
.

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

..
.
/ flo eprs
/ ihs
ae
.ouecid{..}
mdl-hl
.
+.ibig{..}
sbln
.
/ vraõscmcassaiini
/ aiçe o lse dcoas
&atv {..
.cie
.
/ sbeoiã d flo
/ orpsço e ihs
.ouecid{..}
mdl-hl
.
}


Herança e estrutura

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

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

%omn-tm{..}
cmetie
.
.omn-it>l,
cmetls
i
.omn-tm{
cmetie
@xed%omn-itie;
etn cmetls-tm
}
.omn-it{
cmetls
>l {
i
/ ..oerd d vrã sadln
/ . vrie a eso tnaoe
mri-o:1p;
agntp 0x
mri-otm 0
agnbto: ;
&frtcid{
:is-hl
mri-o:0
agntp ;
}
}
}


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"

Box modelling

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

Exemplo coluna fixa + flexível

Exemplo colunas flexíveis

Exemplo sem float wrapper

Exemplo com float wrapper

Exemplo da soma de margins

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

• 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.);

Exemplo estrutura “leve”

Exemplo estrutura “pesada”

• 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)

Exemplo análise módulos responsivos

SASS

Localização dos diretórios

Functions
Funções são usadas em situações onde apenas lógica é
necessária, como cálculos, conversão de valores, etc. Ex.:
0. $aefn-ie 1p !eal;
1
bs-otsz: 6x dfut
0. @ucint-m$au,$aep-au:0 {
2
fnto oe(vle bs-xvle )
0.
3
$ae $aefn-ie!eal;
bs: bs-otsz dfut
0.
4
@f$aep-au ! 0{
i bs-xvle =
0.
5
$ae $aep-au;
bs: bs-xvle
0.
6
}
0.
7
@eun(vle/$ae *1m
rtr $au
bs)
e;
0. }
8


Mixins
Mixins são usados em situações onde a saída de CSS
e/ou lógica é necessária. Ex.:
0. @ii aslt-etr$ie $e:tu,$o:tu){
1
mxn bouecne(sz, vr re hr re
0.
2
@f$e {
i vr
0.
3
tp 5% mri-o:nh$ie 2 *-.;
o: 0; agntp t(sz, )
05
0.
4
}
0.
5
@f$o {
i hr
0.
6
lf:5% mri-et nh$ie 1 *-.;
et 0; agnlf: t(sz, )
05
0.
7
}
0. }
8


Extends
Extensões de grandes blocos estáticos de código. O
Hyojun usa apenas placeholder selectors. Ex.:
0. %aebto {
1
bs-utn
0.
2
pdig 08e;
adn: .3m
0.
3
dsly iln-lc;
ipa: niebok
0.
4
fn-ie 1m
otsz: e;
0.
5
tx-eoain nn;
etdcrto: oe
0.
6
clr $aebto-otclr
oo: bs-utnfn-oo;
0.
7
bcgon-oo:$aebto-gclr
akrudclr bs-utnb-oo;
0. }
8


Extends
Abaixo, os botões terão características do “base button”:
0.
1
0.
2
0.
3
0.
4
0.
5
0.
6
0.
7
0.
8
0.
9
1.
0

.ihih-utn{
hglgtbto
@xed%aebto;
etn bs-utn
fn-ie 12e;
otsz: .5m
clr $ihih-utnfn-oo;
oo: hglgtbto-otclr
bcgon-oo:$ihih-utnb-oo;
akrudclr hglgtbto-gclr
}
.icetbto {
dsre-utn
@xed%aebto;
etn bs-utn
fn-ie 07e;
otsz: .5m
}


Extends
A saída será impressa no CSS como:
0.
1
0.
2
0.
3
0.
4
0.
5
0.
6
0.
7
0.
8
0.
9
1.
0

.ihih-utn .icetbto {
hglgtbto, dsre-utn
..(otúod %aebto)
. cned e bs-utn
}
.ihih-utn{
hglgtbto
fn-ie 12e;
otsz: .5m
..
.
}
.icetbto {
dsre-utn
fn-ie 07e;
otsz: .5m
}


Animations
Configurações de animação via placeholder selectors:
0. %nmpoutie {
1
ai-rdc-tm
0.
2
0.
3
/ OT(EAL)
/ U DFUT
0.
4
.ht-odrig .au,.nmio {
poohle m, vle ai-cn
0.
5
@nld tasto-iigfnto(bs-nmes)
icue rniintmn-ucin$aeai-ae;
0.
6
@nld tasto-rprytasom;
icue rniinpoet(rnfr)
0.
7
@nld tasto-uain$atai-uain;
icue rniindrto(fs-nmdrto)
0.
8
@nld tasto-ea()
icue rniindly0;
0.
9
}
1.
0
..
.

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

..
.
.nmio {@nld tasomoii(otmcne) }
ai-cn
icue rnfr-rgnbto etr;
/ O
/ N
&hvr.nmio {
:oe ai-cn
@nld tasto-iigfnto(buc-nmes)
icue rniintmn-ucin$oneai-ae;
@nld tasto-uain$aeai-uain;
icue rniindrto(bs-nmdrto)
}
&hvr.ht-odrig &hvr.au {
:oe poohle m, :oe vle
@nld tasto-uain$atai-uain;
icue rniindrto(fs-nmdrto)
}


Documentação

bitbucket.com/fbiz/hyojun
bitbucket.com/fbiz/hyojun.sass-standards


/ thank you


Hyojun Sass Standards 2/2

Mais conteúdo relacionado

Destaque

Semelhante a Hyojun Sass Standards 2/2

Hyojun Sass Standards 2/2