Não vamos nos esquivar, vamos enfrentá-lo: o processo de escrever um bom código CSS pode ser muito, muito difícil. Muitos desenvolvedores não querem mexer com estilos. Eles estão prontos para fazer qualquer coisa, mas não CSS.
O autor do material, cuja tradução chamamos a atenção hoje, diz que ele próprio não gostou da parte do desenvolvimento da web relacionada ao CSS. Mas não há como fugir disso. Atualmente, é dada muita atenção ao design e ao que é chamado de "experiência do usuário", mas você não pode prescindir do CSS. O objetivo deste material é ajudar todos a melhorar suas habilidades no desenvolvimento e aplicação de estilos de páginas da web.
Problemas de CSS
No início de um novo projeto, os estilos geralmente parecem simples e claros. Digamos que existam muito poucos seletores CSS, como
.title ,
input ,
#app , com os quais não será difícil trabalhar.
Mas, conforme o aplicativo cresce, os estilos se tornam um pesadelo. O desenvolvedor começa a ficar confuso sobre os seletores de CSS. Ele descobre que escreve algo como
div#app .list li.item a . No entanto, o trabalho não pode ser interrompido; portanto, o programador continua a usar construções semelhantes; o código CSS é empurrado em algum lugar no final do arquivo. E realmente - quem está interessado em estilos? E o CSS em si é tão absurdo ... O resultado são 500 linhas de CSS terrível e completamente sem suporte.
Eu gostaria que você lesse este artigo, analise seus projetos anteriores e pense: "Bem, uau, como eu poderia escrever isso?"
Talvez você esteja pensando agora que "escrever CSS" significa usar estruturas CSS. Afinal, eles se destinam exatamente a facilitar o trabalho com estilos, e é com o uso deles que eles escrevem um bom código CSS. Tudo isso é verdade, mas as estruturas CSS têm certas desvantagens:
- Muitas vezes, seu uso leva ao aparecimento de um design chato, monótono e banal.
- É difícil personalizar os estilos das estruturas, e a necessidade de fazer algo que vá além da estrutura pode causar dificuldades.
- O framework, antes de usá-los, deve ser estudado.
E, no final, você não está lendo isso para se familiarizar com uma certa estrutura? Então, vamos fazer o CSS. Gostaria de observar imediatamente que o material não trata de como criar belos designs para aplicativos. É sobre como escrever CSS de qualidade fácil de manter e como organizá-lo corretamente.
SCSS
Nos meus exemplos, usarei o
SCSS . Este é um pré-processador CSS. De fato, o SCSS é um superconjunto de CSS. Possui alguns recursos muito interessantes, como variáveis, construções aninhadas, importação de arquivos, mixins. Discutiremos os recursos do SCSS que usaremos.
▍Variáveis
No SCSS, você pode usar variáveis. A principal vantagem do uso de variáveis é a possibilidade de sua reutilização. Imagine que temos um conjunto de cores para o aplicativo. A cor principal é azul. Como resultado, essa cor é aplicada literalmente em qualquer lugar. É usado na propriedade
background-color dos botões, na propriedade
color do título da página e em muitos outros locais.
E então, de repente, você decide mudar de azul para verde. Se você realizar essa substituição sem usar variáveis, terá que editar todo o código, todas as linhas em que a cor antiga é usada. Se você usar uma variável, precisará alterar apenas seu valor. Veja como é o uso variável:
// $primary-color: #0099ff; // h1 { color: $primary-color; }
▍ Construções aninhadas
O SCSS suporta construções aninhadas. Aqui está CSS regular:
h1 { font-size: 5rem; color: blue; } h1 span { color: green; }
Graças ao suporte de construções aninhadas, ele pode ser transformado da seguinte maneira:
h1 { font-size: 5rem; color: blue; span { color: green; } }
Essa opção é muito mais fácil de ler, certo? Além disso, através do uso de construções aninhadas, o tempo para criar seletores complexos é reduzido.
AgFragmentação e importação
Quando se trata de suportar estilos e sua legibilidade, fica claro que é impossível manter todo o código em um arquivo. Um arquivo de estilo pode ser usado para fins experimentais ou ao desenvolver um aplicativo pequeno, mas se você for para um nível profissional ... é melhor nem tentar. Felizmente para nós, o SCSS possui mecanismos para organizar convenientemente o código de estilo.
Arquivos que contêm fragmentos de descrições de estilo podem ser criados adicionando um sublinhado no início de seus nomes:
_animations.scss ,
_base.scss ,
_variables.scss e assim por diante.
A diretiva
@import é usada para importar esses arquivos. Veja como usar esse mecanismo:
// _animations.scss @keyframes appear { 0% { opacity: 0; } 100% { opacity: 1; } } // header.scss @import "animations"; h1 { animation: appear 0.5s ease-out; }
Você pode achar que há um erro neste código. De fato, o arquivo que queremos importar é chamado
_animations.scss e, no arquivo
header.scss , usamos o comando
@import "animations" . No entanto, não há erro. O SCSS é um sistema inteligente o suficiente para entender que, em tal situação, o desenvolvedor significa o arquivo correspondente.
É tudo o que precisamos saber sobre variáveis, construções aninhadas, fragmentação de estilos e importação. Existem outras possibilidades no SCSS, como mixins, herança e outras diretivas (entre elas
@for ,
@if e algumas outras), mas não falaremos sobre elas aqui.
Se você deseja conhecer melhor o SCSS, consulte a
documentação relevante.
Organização CSS: Metodologia BEM
Não lembro quantas vezes usei termos universais para nomear classes CSS. Como resultado, acho que tenho esses nomes familiares a todos:
.button ,
.button .page-1 ,
.page-2 ,
.custom-input .
Muitas vezes, simplesmente não sabemos como nomear determinadas entidades. Mas é muito importante. E se você estivesse desenvolvendo o aplicativo e, por algum motivo, adiasse o trabalho por vários meses? Ou, e isso é muito pior, e se alguém assumisse esse projeto? Se o código CSS usar nomes inapropriados, será difícil entender sem analisar outras partes do aplicativo.
A metodologia BEM (Block, Element, Modifier) é uma abordagem componente para o desenvolvimento web. Em particular, esta é uma convenção de nomenclatura de entidade. Essa metodologia permite estruturar o código, ajuda a dividi-lo em módulos e ajuda na sua reutilização. Vamos falar sobre blocos, elementos e modificadores.
▍ Blocos
Blocos podem ser considerados como componentes. Certamente você brincou quando criança em Lego. Portanto, ligue a máquina do tempo.
Como você construiu, digamos, uma casa comum? Aqui você precisará de uma janela, telhado, porta, paredes e, em geral, isso é suficiente. Todos esses são nossos blocos. Eles são significativos em si mesmos.
Nomeação: nome do bloco -
.blockExemplos:
.card ,
.form ,
.post ,
.user-navigation▍ Elementos
Como fazer uma janela Lego? Provavelmente, alguns cubos se parecem com quadros; portanto, se você conectar quatro desses cubos, terá uma bela janela. Estes são os elementos. Eles são partes de blocos, precisamos deles para criar blocos. No entanto, elementos fora dos blocos são inúteis.
Nomeação:
+ __ + -
.block__elementExemplos:
.post__author ,
.post__date ,
.post__text▍ Modificadores
Depois de ter uma janela, você pode alterá-la. Por exemplo - pinte com uma cor diferente. Tais mudanças nos blocos ou elementos base são realizadas usando modificadores. Esses são sinalizadores de blocos ou elementos e são usados para alterar seu comportamento, aparência e assim por diante.
Nomeação:
+ -- + -
.block__element--modifier ,
.block--modifierExemplos:
.post--important ,
.post__btn--disabled▍ Notas
- Ao usar o BEM, os nomes são dados exclusivamente para as classes. Sem IDs ou tags - apenas classes.
- Blocos ou elementos podem ser aninhados em outros blocos ou elementos, mas devem ser completamente independentes. Isso é muito importante. Portanto, por exemplo, você não precisa atribuir campos ao botão porque deseja colocá-lo sob o cabeçalho; caso contrário, o botão será associado ao cabeçalho. Use classes auxiliares em vez disso.
- Ao aplicar a metodologia BEM, os arquivos HTML serão sobrecarregados com nomes, mas essa é uma pequena taxa pelos recursos que o BEM nos fornece.
▍Exercício
Aqui está um exercício. Observe atentamente os sites que você gosta ou os que você usa com mais frequência e pense sobre o que pode ser um bloqueio neles, o que é um elemento e o que é um modificador.
Por exemplo, eis o que obtive ao analisar a Google Store.
Análise do siteAgora é a sua vez. Veja o site, pense em como ele pode ser melhorado. Para se desenvolver em um determinado campo, uma pessoa precisa buscar informações de forma independente, experimentar e criar algo novo.
▍ Exemplos
Aqui está
um exemplo preparado pelo Codepen que demonstra os recursos do BEM. Aqui, criamos algo como publicar em um determinado blog. Aqui está o HTML para este exemplo.
<div class="post"> <span class="post__author">Thomas</span> <span class="post__date">3 minutes ago</span> <p class="post__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam sit voluptatem aut quis quisquam veniam delectus sequi maxime ullam, inventore blanditiis quia commodi maiores fuga, facere quaerat doloremque in. Nisi!</p> </div> <div class="post mt-large post--important"> <span class="post__author">Thomas</span> <span class="post__date">2 hours ago</span> <p class="post__text">Voluptatem incidunt autem consequatur neque vitae aliquam, adipisci voluptatum. Ipsum excepturi dolores exercitationem rem ab similique consequatur nesciunt, tempora aut vel unde.</p> </div>
Aqui estão os estilos do SCSS:
.post { display: inline-block; padding: 1rem; background-color: #ccc; border: 1px solid #222; border-radius: 5px; &--important { background-color: yellow; } &__author { font-size: 1.2rem; font-weight: bold; color: blue; } &__date { float: right; } &__text { line-height: 2rem; font-size: 1.3rem; } } .mt-large { margin-top: 3rem; }
Mas o que aconteceu no final.
Fazendo "publicações" usando o BEMConsidere outro
exemplo . Aqui, usando o BEM, distinguimos os botões. Aqui está o HTML para este exemplo.
<div> <button class="btn"> Click me </button> <button class="btn btn--danger"> Danger </button> <button class="btn btn--success"> Success </button> <button class="btn btn--small"> Small </button> <button class="btn btn--big"> Big </button> <button class="btn btn--border"> Border </button> </div>
Aqui estão os estilos SCSS.
.colors { font-size: 1.5rem; font-family: sans-serif; } .btn { background-color: #FF6B93; color: #fff; text-transform: uppercase; padding: 1.5rem 2.5rem; border-radius: 4px; transition: all .2s; font-size: 1.3rem; border: none; letter-spacing: 2px; cursor: pointer; &:hover { background-color: #D15879; } &:focus { outline: none; } &--danger { background-color: #FF3B1A; &:hover { background-color: #D43116; } } &--success { background-color: #00D123; &:hover { background-color: #00AB1D; } } &--small { padding: 1rem 2rem; font-size: 1rem; } &--big { padding: 1.8rem 4.5rem; font-size: 1.7rem; } &--border { background-color: #fff; color: #FF6B93; border: 1px solid #FF6B93; &:hover { background-color: #FF6B93; color: #fff; } } }
E aqui está o resultado.
Design de botão usando a metodologia BEMOrganizando arquivos CSS: o modelo 7-1
Vamos falar sobre a organização de arquivos CSS. O que você aprendeu com esta parte da nossa conversa permitirá que você trabalhe de forma mais produtiva e ajude, em situações apropriadas, a encontrar instantaneamente o código CSS que precisa ser alterado. Para conseguir tudo isso, precisamos estudar o modelo "7-1".
Talvez agora pareça para você que esse modelo é chamado de alguma forma muito estranho. No entanto, não há nada de estranho aqui, e usá-lo é muito simples. Para fazer isso, basta observar duas regras simples:
- Todos os arquivos com fragmentos SCSS devem ser colocados em 7 pastas diferentes.
- Todos esses arquivos devem ser importados para um arquivo,
main.scss , localizado no diretório raiz no qual todas essas pastas estão localizadas.
O nome do modelo, como resultado, pode ser descriptografado como "7 pastas - 1 arquivo". Como você pode ver, não é tão difícil. Vamos falar sobre esse modelo em mais detalhes.
▍ 7 pastas
Aqui estão as pastas em questão:
base : nesta pasta, você precisa colocar todo o código "template", por assim dizer. Por código "modelo", aqui queremos dizer todo o código CSS que você precisa escrever ao criar um novo projeto. Por exemplo: regras tipográficas, animações, utilitários (ou seja, classes como margin-right-large , text-center ) e assim por diante.components : o nome desta pasta indica claramente o que será armazenado nela. Estamos falando dos estilos de componentes usados para criar páginas. São botões, formulários, todos os tipos de controles deslizantes, pop-ups e assim por diante.layout : esta pasta é usada para armazenar os estilos dos elementos de layout da página. Este é o cabeçalho e rodapé da página, a área de navegação, várias seções da página, a grade e assim por diante.pages : às vezes, um projeto precisa de páginas que tenham seu próprio estilo específico, diferente do estilo de outras páginas. As descrições de estilo para essas páginas especiais aqui se enquadram nesta pasta.themes : se um projeto da web envolver o uso de diferentes temas (por exemplo, algo como "modo escuro" ou "administrador"), os estilos para eles devem ser colocados aqui.abstracts : todos os tipos de coisas auxiliares entram nessa pasta - funções, variáveis, mixins.vendors : um site raro sem dependências externas. Esta pasta contém estilos que não são criados por quem desenvolve um site específico. Aqui, por exemplo, você pode salvar os arquivos do projeto Font Awesome, estilos de Bootstrap e similares.
▍Arquivo main.scss
É nesse arquivo que todos os fragmentos de estilos organizados nas sete pastas acima são importados. Alguns desses arquivos podem ficar assim:
@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;
Não posso concordar com o fato de todo esse design de sete pastas parecer bastante grande. No entanto, deve-se notar que essa arquitetura é projetada para grandes projetos. Para projetos pequenos, você pode usar a versão adaptada do modelo "7-1". Os recursos desta versão são que ele pode ficar sem algumas pastas. Portanto, aqui você pode recusar a pasta de
vendors colocando links para folhas de estilo externas ao projeto na tag
link . Além disso, você pode ficar sem a pasta de
themes , pois, provavelmente, os temas não serão usados em um pequeno aplicativo da web. E, finalmente, você pode se livrar da pasta
pages , pois neste projeto, provavelmente, não haverá páginas cujo estilo seja muito diferente do estilo geral. Como resultado, das sete pastas, apenas quatro permanecem.
Além disso, ao fazer um pequeno projeto, você pode seguir uma de duas maneiras:
- Se você preferir usar o que resta do modelo “7-1”, salve os
abstracts , components , layout e base das pastas. - Se você decidir
main.scss com uma pasta grande, todos os arquivos com fragmentos de estilo, junto com o arquivo main.scss , caem nessa pasta. Pode ser algo como isto:
sass/ _animations.scss _base.scss _buttons.scss _header.scss ... _variables.scss main.scss
O que exatamente escolher depende da sua preferência.
Aqui, se você se inspirar na idéia de usar o SCSS, poderá ter uma pergunta sobre como usar esses estilos, já que os navegadores não os suportam. Na verdade, essa é uma boa pergunta que nos leva ao estágio final da nossa conversa, para compilar o SCSS no CSS.
Compilando SCSS para CSS
Para converter o código SCSS em CSS, você precisará da plataforma
Node.js. e do gerenciador de pacotes
NPM (ou
Yarn ).
Usaremos o
node-sass , que nos permite compilar arquivos
.scss em arquivos
.css . Esta é uma ferramenta de linha de comando, é fácil de usar. Ou seja, a
node-sass parece com isso:
node-sass <input> <output> [options]
Muitas opções estão disponíveis aqui. Vamos nos concentrar em dois:
- A opção
-w permite monitorar uma pasta ou arquivo. Ou seja, o node-sass acompanhará as alterações no código e, quando elas acontecerem, compilará automaticamente os arquivos em CSS. Esse recurso é muito útil durante o processo de desenvolvimento. - A opção
--output-style determina o estilo do arquivo CSS de saída. Várias opções estão disponíveis aqui: nested , expanded , compact , compressed . Usaremos essa opção para criar um arquivo CSS finalizado.
Se você é uma pessoa curiosa (espero que seja esse o caso, porque a curiosidade é apenas para o benefício do desenvolvedor), provavelmente você estará interessado em examinar a
documentação do
node-sass .
Então, decidimos sobre as ferramentas, agora a coisa mais simples permanece. Para converter SCSS para CSS, você precisa seguir estas etapas:
Crie uma pasta do projeto e acesse:
mkdir my-app && cd my-app
Inicialize o projeto:
npm init
Inclua o pacote
node-sass no projeto:
npm install node-sass --save-dev
Crie um arquivo
index.html , pastas de estilos, arquivo
main.scss :
touch index.html mkdir -p sass/{abstracts,base,components,layout} css cd sass && touch main.scss
Adicione o seguinte 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 que leva 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"> <link rel="stylesheet" href="css/style.css"> <title>My app</title> </head> <body> <h1 class="heading">My app</h1> </body> </html>
Isso é tudo. Agora que você está trabalhando no projeto, execute o
npm run watch e abra o arquivo
index.html no seu navegador. Para reduzir CSS, execute o
npm run build .
Utilitários adicionais
▍ Recarga de página interativa
Convém organizar uma recarga de página interativa para aumentar a produtividade. Isso é mais conveniente do que recarregar manualmente
index.html . Veja como fazê-lo:
Instale o pacote do
live-server ativo (observe que ele está instalado globalmente):
npm install -g live-server
Adicione o
npm-run-all , dependendo do projeto, que permitirá executar vários scripts ao mesmo tempo:
npm install npm-run-all --save-dev
Adicione o seguinte ao
package.json :
{ ... "scripts": { "start": "npm-run-all --parallel liveserver watch", "liveserver": "live-server", "watch": "node-sass sass/main.scss css/style.css -w", }, ... }
Agora, após executar o comando
npm run start , você, no processo de trabalhar no projeto, verá instantaneamente as alterações sendo feitas nele sem recarregar a página manualmente.
▍ pacote autoprefixer
Nesta fase, você tem um ambiente de desenvolvimento personalizado, o que é muito bom. Agora vamos falar sobre ferramentas para a construção de um projeto e, em particular, sobre o pacote
autoprefixer . Esta é uma ferramenta (estamos falando de um plug-in postcss) que analisa o código CSS e adiciona prefixos de fornecedores de navegador às regras CSS usando dados de
Can I Use .
Durante a criação do site, o programador pode usar alguns novos recursos que não são totalmente suportados por todos os navegadores. Os prefixos de navegador visam solucionar vários problemas, incluindo o desenvolvimento de aplicativos da web para vários navegadores.
Código com prefixos de navegador é algo como isto:
-webkit-animation-name: myAnimation; -moz-animation-name: myAnimation; -ms-animation-name: myAnimation;
É fácil perceber que escrever esse código é muito entediante. Para facilitar a tarefa de garantir a compatibilidade do nosso código CSS com vários navegadores, sem complicar o projeto, usaremos o pacote
autoprefixer . Aqui você precisará executar as seguintes etapas:
- Compilamos todos os arquivos SCSS em um arquivo CSS principal.
- Adicione os prefixos do navegador neste arquivo usando o
autoprefixer . - Comprima esse arquivo CSS.
Essa, em geral, é a etapa final do trabalho no projeto. Então, aqui está o que você precisa fazer para usar o
autoprefixer :
Inclua duas dependências no projeto -
postcss-cli e
autoprefixer :
npm install autoprefixer postcss-cli --save-dev
Adicione o seguinte código ao
package.json e modifique o script de
build :
{ ... "scripts": { "start": "npm-run-all --parallel liveserver watch", "liveserver": "live-server", "watch": "node-sass sass/main.scss css/style.css -w", "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" ... }
npm run build , CSS-, .
, , . —
, ,
.
, ,
Sumário
, CSS, , , CSS-, , .
Caros leitores! -?