Hyojun Sass Standards 2/2

F.biz | COMPANY CONFIDENTIAL

Hyojun SASSStandards 2/2

Marcelo Miranda Carneiro 27/02/2014


Nomenclatura


• Classes com nomes em minúsculo, separados por hífens:• .section-wrapper, .product-holder

• Nomes em inglês:• .title-highlight, .button-discreet

• Nomes próprios na forma original:• .title-fale-conosco, .meus-pedidos-content

Nomenclatura


• Sempre utilizar nomes que representem o módulo:• .navigation-holder• .highlight-holder• .button-discreet

• Não utilizar nomes com características visuais como cor,medidas, direção, etc.:

• .col-left, .title-blue, .col-220px ← RUIM

Nomenclatura


• Estados de módulos:• .loading, .error, .success• Usados sempre em conjunto: .classe.loading

• Nomes reservados, uso composto:• “content”, “description”, “title”, etc.• “post-content”, “product-description”, “category-title”, etc.• Lista completa na documentação;

Nomenclatura

https://bitbucket.org/fbiz/hyojun.sass-standards/wiki/Home#markdown-header-nomes-reservados


• “Wrappers” para encapsular elementos em um novoescopo

• “Holders” como a base dos módulos

• wrapper e holder são usados como sufixos, ex.:

• section-wrapper

• product-holder

Nomenclatura


Exemplo de wrapper e holder:

<div class="section-wrapper"> <div class="product-holder"> <h1 class="product-title">Título</h1> <div class="product-description"> Lorem ipsum dolor sit amet... </div> </div></div>

Elementos filhos usam o nome do módulo como prefixo.

Nomenclatura

01.02.03.04.05.06.07.08.


Organização dasclasses


Para melhorar a leitura, existe uma ordem a ser seguida:

• @extend e @include

• propriedades do elemento

• pseudo elementos

• filhos e pares

• variações com classes adicionais

Organização das classes


.module { // extends e includes @extend %placeholder-name; @include mixin-name; // propriedades do objeto color: red; // pseudo elementos &:hover { ... } ...

Organização das classes01.02.03.04.05.06.07.08.09.10.11.12.13.


... // filhos e pares .module-child { ... } + .sibbling { ... } // variações com classes adicionais &.active { ... // sobreposição de filhos .module-child { ... } }}

Organização das classes01.02.03.04.05.06.07.08.09.10.11.12.13.


Herança e estrutura


• Estilos apenas em classes, IDs apenas para javascript• Atenção ao aplicar estilos em tags

• Tags como H1 à H6 não devem aplicar estilos diretamente• Escopos fechados podem, ex.:

• .list-name > li• .table-name > tr

• Evitar o uso de HACKS• Não utilizar !important

Estrutura do CSS


%comment-item { ... }.comment-list > li,.comment-item { @extend %comment-list-item;}.comment-list { > li { // ... override da versão standalone margin-top: 10px; margin-bottom: 0; &:first-child { margin-top: 0; } }}

01.02.03.04.05.06.07.08.09.10.11.12.13.14.15.


• Classes criadas de acordo com o módulo

• Priorizar as medidas relativas EM e REM

• Orientação à objeto com base em módulos utilizando@extend

• Múltiplas classes usadas para situações dinâmicas, comoselos, ícones, etc, ex.:

• <button class="base-button icon-buy-more">

Herança no CSS


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• ul e li com margin bottom• padding + margin

Box modelling


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


Funções são usadas em situações onde apenas lógica énecessária, como cálculos, conversão de valores, etc. Ex.:

$base-font-size: 16px !default;@function to-em($value, $base-px-value: 0) { $base: $base-font-size !default; @if $base-px-value != 0 { $base: $base-px-value; } @return ($value / $base) * 1em;}

Functions

01.02.03.04.05.06.07.08.


Mixins são usados em situações onde a saída de CSSe/ou lógica é necessária. Ex.:

@mixin absolute-center($size, $ver: true, $hor: true) { @if $ver { top: 50%; margin-top: nth($size, 2) * -0.5; } @if $hor { left: 50%; margin-left: nth($size, 1) * -0.5; }}

Mixins

01.02.03.04.05.06.07.08.


Extensões de grandes blocos estáticos de código. OHyojun usa apenas placeholder selectors. Ex.:

%base-button { padding: 0.83em; display: inline-block; font-size: 1em; text-decoration: none; color: $base-button-font-color; background-color: $base-button-bg-color;}

Extends

01.02.03.04.05.06.07.08.

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_


Abaixo, os botões terão características do “base button”:

.highlight-button { @extend %base-button; font-size: 1.25em; color: $highlight-button-font-color; background-color: $highlight-button-bg-color;}.discreet-button { @extend %base-button; font-size: 0.75em;}

Extends

01.02.03.04.05.06.07.08.09.10.


A saída será impressa no CSS como:

.highlight-button, .discreet-button { ... (conteúdo de %base-button)}.highlight-button { font-size: 1.25em; ...}.discreet-button { font-size: 0.75em;}

Extends

01.02.03.04.05.06.07.08.09.10.


Configurações de animação via placeholder selectors:

%anim-product-item { // OUT (DEFAULT) .photo-holder img, .value, .anim-icon { @include transition-timing-function($base-anim-ease); @include transition-property(transform); @include transition-duration($fast-anim-duration); @include transition-delay(0); } ...

Animations

01.02.03.04.05.06.07.08.09.10.

http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholder_selectors_


... .anim-icon { @include transform-origin(bottom center); } // ON &:hover .anim-icon { @include transition-timing-function($bounce-anim-ease); @include transition-duration($base-anim-duration); } &:hover .photo-holder img, &:hover .value { @include transition-duration($fast-anim-duration); }}

Animations01.02.03.04.05.06.07.08.09.10.11.12.


Documentação

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

https://bitbucket.org/fbiz/hyojun

https://bitbucket.org/fbiz/hyojun.sass-standards/src/HEAD?at=master


/ thank you

http://www.fbiz.com.br/

Hyojun Sass Standards 2/2

Technology

Transcript of Hyojun Sass Standards 2/2