Escrevemos CSS melhor e mais bonito

Para ser sincero: escrever um bom CSS é difícil.
Muitos desenvolvedores não gostam de escrever CSS. Qualquer coisa, mas não isso! Não CSS.

Quando você teve que enfrentar o CSS ao desenvolver aplicativos, essa não foi a parte mais prazerosa do trabalho. Mas não pode ser evitado, certo? Hoje é tão importante agradar o usuário com o design do aplicativo que sem CSS - nada.

Quando o projeto está apenas começando, tudo vai bem. Você tem apenas alguns seletores: .title , input , #app - tão fáceis quanto #app .

Mas, gradualmente, o aplicativo cresce e é assustador analisar o CSS: não é tão fácil descobrir todos esses seletores. Você começa a escrever algo como div#app .list li.item a , alguns trechos de código são repetidos várias vezes e despeja toda a sua escrita no final do arquivo: você não se importa, porque o CSS é péssimo. O resultado são 500 linhas de código CSS que não podem ser suportadas.


Sou eu quando lutando contra CSS

Traduzido para Alconost

Meu desafio hoje é ensiná-lo a escrever CSS melhor. Quero que você olhe para projetos antigos e pense: “Oh deuses! Como você pôde escrever isso?

Mas e as estruturas CSS? - você pergunta. Afinal, eles foram inventados para isso - para escrever um bom código CSS.

Certo. Mas eles têm desvantagens:

• O design da saída geralmente é chato.
  
• Pode ser difícil fazer as configurações necessárias ou ir além dos recursos da estrutura.
  
• Para usar estruturas, primeiro você precisa estudá-las.
  

Bem, você está lendo este artigo - isso significa que há uma razão, certo? Portanto, sem mais delongas, vá em frente, aprenda a escrever CSS melhor.

Nota Este artigo não é sobre como criar aplicativos bonitos, mas sobre como escrever o código CSS suportado e como organizá-lo.

SCSS

Nos exemplos, usarei o SCSS .

O SCSS é um pré-processador CSS, essencialmente um superconjunto de CSS que adiciona alguns recursos interessantes, como variáveis, aninhamento, importações e impurezas ("mixins").

A seguir, mostrarei quais oportunidades usaremos aqui.

Variáveis

O SCSS possui variáveis ​​e sua principal vantagem é a reutilização. Suponha que você tenha uma paleta de cores para um aplicativo e a cor principal seja azul.

Portanto, você tem azul em todos os lugares: o fundo dos botões de background-color , a cor da color cabeçalhos, os links. AZUL - EM TODA PARTE.

E de repente azul você não gostou. O novo favorito é verde.

• Se você não usou variáveis, precisará alterar todas as linhas nas quais há azul.
  
• E com variáveis, basta alterar o valor de uma delas.
  

 //   $primary-color: #0099ff; //    h1 { color: $primary-color: } 

Aninhamento

No SCSS, você pode usar o aninhamento. Portanto, a partir do fragmento

 h1 { font-size: 5rem; color: blue; } h1 span { color: green; } 

você pode criar um código como este:

 h1 { font-size: 5rem; color: blue; span {  color: green; } } 

O último lê melhor, certo? O aninhamento permite que você gaste menos tempo escrevendo seletores complexos.

Arquivos parciais e de importação

Se você precisar fornecer capacidade de manutenção e legibilidade, armazenar todo o código em um arquivo enorme é uma má idéia. Se você estiver experimentando ou escrevendo um aplicativo pequeno, ele ainda é suportável, mas em nível profissional ... nem tente. Felizmente para nós, o SCSS resolve esse problema.

Podemos criar "arquivos parciais" - para os quais o nome começa com um sublinhado : _animations.scss, _base.scss, _variables.scss e assim por diante.

Para importá-los, a diretiva correspondente é usada: @import . Por exemplo, você pode fazer isso:

 // _animations.scss @keyframes</i> appear { 0% {  opacity: 0; } 100% {  opacity: 1; } } <i>// header.scss</i> <b>@import "animations";</b> h1 { animation: appear 0.5s ease-out; } 

Você pode ter pensado: “Ah! Ele tem um erro aqui! Precisamos escrever _animations.scss , não animations . ”

Não. O SCSS é inteligente o suficiente para perceber que este é um arquivo parcial.

É tudo o que precisamos saber sobre variáveis, aninhamento, arquivos parciais e importação. O SCSS tem outras possibilidades - impurezas, herança e várias diretivas ( @for , @if , ...), mas não vou tocá-las aqui.

Se você estiver interessado, leia a documentação : é clara o suficiente e bem escrita.

Ordenação CSS: Metodologia BEM

Eu usei nomes comuns para classes CSS inúmeras vezes. Bem, você sabe: .button .page-1 .page-2 .custom-input .

Muitas vezes, não temos idéia de qual nome escolher - embora nomear seja uma tarefa importante. Imagine que você começou a escrever um aplicativo e decidiu adiar esse negócio por vários meses - ou, pior ainda, alguém assumiu o controle do seu projeto. Se você não pensar na nomeação no código CSS, será difícil entender imediatamente o que se entende em uma linha específica.

O BEM ajuda a resolver esse problema. BEM é uma convenção de nomenclatura; significa bloco, elemento, modificador.

Essa metodologia ajudará você a estruturar seu código, torná-lo mais modular e simplificar a reutilização. Vamos ver o que "bloco", "elemento" e "modificador" significam.

Blocos

Um bloco pode ser imaginado como um componente. Tomemos, por exemplo, o construtor Lego.

Como fazer uma casa simples de um designer? Vai levar uma janela, um telhado, uma porta, algumas paredes - e é isso. Este é precisamente nossos blocos - eles carregam significado por conta própria.

Nomeação: nome do bloco: .block
Exemplos: .card, .form, .post, .user-navigation

Itens

E como fazer uma janela a partir de cubos de designer? Você pode encontrar os cubos que se parecem com partes do quadro e montar uma bela janela com eles. Estes serão os nossos elementos . Eles representam as partes necessárias do bloco, mas fora do bloco são inúteis.

Nomeação: nome do bloco + __ + nome do elemento: .block__element
Exemplos: .post__author, .post__date, .post__text

Modificadores

Então, criamos algum tipo de janela. Agora precisávamos de uma janela verde ou, por exemplo, uma pequena janela. Esses serão nossos modificadores. São sinalizadores em blocos e elementos usados ​​para alterar comportamento, aparência etc.

Nomeação: nome do bloco OR elemento + -- + nome do modificador: .block__element--modifier, .block--modifier
Exemplos: .post--important, .post__btn--disabled

Anotações

• BEM significa nomear classes e somente classes . Não identificadores e nem tags - apenas classes .
  
• Blocos e elementos podem ser aninhados em outros blocos e elementos, mas devem ser completamente independentes. Necessariamente independente . Portanto, não é necessário adicionar um campo ao botão para que fique sob o cabeçalho, caso contrário ele será anexado ao cabeçalho. Melhor usar classes auxiliares.
  
• Sim, o arquivo HTML ficará sobrecarregado, mas não é assustador: as vantagens do BEM superam essa desvantagem.
  

Exemplo

Um pequeno exercício para os leitores. Acesse os sites que você costuma visitar e pense sobre quais blocos, elementos e modificadores podem estar lá.

Por exemplo, posso imaginar uma foto assim na loja do Google:



Agora é a sua vez. Seja curioso e pense sobre o que poderia ser feito melhor. E, é claro, para melhorar suas próprias habilidades, você precisa pesquisar, experimentar e escrever código de forma independente.

Organização de arquivos CSS: o princípio 7-1

Ainda não te cansei? Ótimo! Vamos descobrir como organizar arquivos CSS. Isso melhorará bastante a eficiência do trabalho e ajudará você a encontrar instantaneamente o código CSS que precisa ser corrigido.

É hora de se familiarizar com o princípio "7-1".
Esses números não dizem nada, certo?

Mas tudo é bem simples. Existem duas regras a seguir:

1. Coloque arquivos parciais em 7 pastas.
   
2. Importe todos eles para um arquivo main.scss localizado na raiz. Isso é tudo.
   

Sete pastas:

• A pasta base é o código CSS do modelo que você escreve sempre que inicia um novo projeto. Podem ser regras de layout, animações, classes auxiliares (por exemplo, margin-right-large , text-center , ...) e assim por diante.
  
• A pasta de components - todos os componentes usados ​​para formar páginas: botões, formulários, módulos de paginação - "swipers", janelas pop-up etc.
  
• Pasta de layout - para o layout de várias partes da página, ou seja, o cabeçalho, rodapé, navegação, seções, grade personalizada etc.
  
• A pasta de pages é para páginas que precisam de um estilo separado e diferente do padrão.
  
• A pasta de themes - para vários temas de aplicativos (modo escuro, administração etc.).
  
• Pasta de abstracts - todas as funções, variáveis ​​e impurezas. Em suma, coisas auxiliares.
  
• A pasta de vendors é uma biblioteca externa, sem a qual, talvez, nenhum aplicativo possa fazer. A pasta vendors contém arquivos que são independentes de você: Font Awesome, arquivos Bootstrap e tudo mais.
  

Arquivo principal

Todos os arquivos parciais são importados aqui.

 @import abstracts/variables; @import abstracts/functions; @import base/reset; @import base/typography; @import base/utilities; @import components/button; @import components/form; @import components/user-navigation; @import layout/header; @import layout/footer; … 

Sim, parece um pouco inchado, eu admito. Mas essa arquitetura foi inventada para grandes projetos - e para tarefas menores, existe outra opção.

Em primeiro lugar, não precisamos da pasta de vendors : todo o código CSS externo estará na tag de link colocada no cabeçalho. Além disso, a pasta de themes não é necessária: provavelmente, um aplicativo pequeno terá apenas um tema. Por fim, não haverá estilos para páginas específicas - portanto, removemos a pasta correspondente. Portanto, restam quatro pastas - ótimo!

Agora temos duas opções:

1. Se você seguir o princípio "7-1", precisará salvar os abstracts , components , layout e base das pastas.
   
2. Se você se sentir mais à vontade trabalhando com uma pasta grande na qual haverá todos os arquivos parciais e main.scss , você terá algo assim:
   

 sass/ _animations.scss _base.scss _buttons.scss _header.scss … _variables.scss main.scss 

Depende de você.

Eu convenci! Como aplicar tudo isso? Quero dizer, os navegadores não suportam arquivos scss , certo?

É verdade que deve ser notado! Na etapa final, compilaremos o SCSS no CSS.

Criar CSS a partir de SCSS

Vamos precisar do Node.js e do NPM (ou Yarn ).

Usaremos o node-sass , que nos permitirá compilar arquivos .scss em .css .

Sua interface é bastante simples:

 node-sass <> <> [] 

Usaremos apenas dois parâmetros:

• A -w - monitora o diretório ou arquivo. O node-sass aguardará as mudanças no código e, assim que detectá-las, compilará imediatamente o arquivo correspondente em CSS, o que é muito conveniente durante o desenvolvimento.
  
• O parâmetro --output-style saída - como será o arquivo CSS de saída. Pode assumir os seguintes valores: nested|expanded|compact|compressed . Usaremos essa opção ao criar o arquivo CSS.
  

Se você está curioso (espero que sim: o desenvolvedor deve estar curioso!), A documentação completa está aqui .

Agora sabemos quais ferramentas serão usadas. O resto é ainda mais fácil de fazer:

• Criando um projeto: mkdir my-app && cd my-app
  
• Inicialize: npm init
  
• Inclua a node-sass : npm install node-sass --save-dev
  
• Crie as pastas necessárias, os arquivos index.html e main.scss :
  

 touch index.html mkdir -p sass/{abstracts,base,components,layout} css cd sass && touch main.scss 

• Adicione os seguintes scripts ao arquivo package.json :
  

 { … "scripts": {  "watch": "node-sass sass/main.scss css/style.css -w",  "build": "node-sass sass/main.scss css/style.css --output-style compressed" }, … } 

• Adicione o link ao arquivo CSS compilado na tag head do arquivo index.html:
  

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <b><link rel="stylesheet" href="css/style.css"></b> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html> 

Isso é tudo! Ao escrever o código, execute o npm run watch e abra o arquivo index.html no navegador. Para reduzir o CSS, basta executar o npm run build .

Algo mais

Reinicie em tempo real

Para argumentar melhor, você pode adicionar um recarregamento automático do arquivo index.html local.

Para fazer isso, faça o seguinte:

• Instale o pacote live-server : npm install -g live-server
  Nota: Este é um pacote global .
  
• Adicione npm-run-all dependendo do projeto: npm install npm-run-all --save-dev - isso permitirá que você execute vários scripts ao mesmo tempo.
  
• Adicione os seguintes scripts ao package.json :
  

 { … "scripts": { <b>   "start": "npm-run-all --parallel liveserver watch",  "liveserver": "live-server",</b>  "watch": "node-sass sass/main.scss css/style.css -w", }, … } 

Agora, se você iniciar o npm run start , as alterações serão exibidas imediatamente - sem movimentos desnecessários da sua parte.

Prefixos automáticos

Montamos ferramentas de desenvolvimento - ótimo! Agora vamos falar sobre ferramentas de construção, em particular - sobre isso: Autoprefixer .
Essa ferramenta (ou melhor, o plug-in postcss) analisa CSS e adiciona prefixos de fornecedor às regras CSS usando valores de Can I Use .

Ao criar um site, podem ser usados ​​novos recursos que não são suportados em todos os navegadores. O suporte a essas funções permite prefixos de fornecedores.

Um exemplo de como ficará:

 -webkit-animation-name: myAnimation; -moz-animation-name: myAnimation; -ms-animation-name: myAnimation; 

Sim, escrever à mão é entediante. Facilitar a vida para nós é uma ferramenta para adicionar automaticamente prefixos que tornarão o código CSS compatível com os navegadores sem nenhum esforço extra.

Então, para compilar CSS:

1. Compilamos todos os arquivos SCSS em um arquivo CSS.
   
2. Adicione prefixos usando o Autoprefixer.
   
3. Comprima o arquivo CSS.
   

Não há mais nada - não mude de canal.

• Adicione duas dependências - postcss-cli e autoprefixer : npm install autoprefixer postcss-cli --save-dev
  
• Modificamos o script de build e adicionamos essas linhas ao package.json :
  

 { … "scripts": {  "start": "npm-run-all --parallel liveserver watch",  "liveserver": "live-server",  "watch": "node-sass sass/main.scss css/style.css -w", <b>   "compile": "node-sass sass/main.scss css/style.css",  "prefix": "postcss css/style.css --use autoprefixer -o css/style.css",  "compress": "node-sass css/style.css css/style.css --output-style compressed",  "build": "npm-run-all compile prefix compress"</b> … } 

Agora, quando você inicia o npm run build , os prefixos do provedor serão adicionados e o próprio código CSS será compactado. Apenas mágica!

Você quer um pouco mais de magia? Eu levantei o repositório - para que você possa descobrir mais rápido?

Se você estiver interessado em saber como eu apliquei essas habilidades na página do meu portfólio, dê uma olhada neste repositório e aproveite o resultado . Espero que esses exemplos ajudem a entender melhor o que foi discutido no artigo.

E ... é tudo por hoje! Agora você pode escrever código CSS modular reutilizável suportado.



Sobre o tradutor

O artigo foi traduzido por Alconost.

A Alconost localiza jogos , aplicativos e sites em 68 idiomas. Tradutores em idioma nativo, teste linguístico, plataforma em nuvem com API, localização contínua, gerentes de projeto 24/7, qualquer formato de recursos de string.

Também criamos vídeos de publicidade e treinamento - para sites que vendem, imagem, publicidade, treinamento, teasers, exploradores, trailers do Google Play e da App Store.

Mais detalhes