.png)
Tipos de classes
Classes utilitárias
Classes criadas com propriedades de CSS específicas, da qual podem ser aplicada em elementos de forma global em todo o projeto.
Todas as classes utilitárias são globais por natureza. O conceito de uma classe utilitária é uma classe que aplica propriedades de CSS globais em nosso projeto.
Por exemplo: adicionamos a classe utilitária background-color-gray no projeto starter do Client-First para nos ajudar a organizar e gerenciar cores de background utilizados em nosso projeto.
Utilizamos a classe utilitária font-size-large no projeto starter do Client-First para nos ajudar a organizar e gerenciar tamanhos de tipografia unificados em nosso projeto.
Classes utilitárias não utilizam o caracter underline ‘_’ no nome da classe.
Classes customizadas
Classes customizadas criadas componentes, páginas, grupos de elementos ou elementos específicos
Chamamos de classe “customizada” pois estas estão fora das classes utilitárias de nosso projeto. Classes customizadas devem ser criadas quando classes utilitárias não podem ou não devem ser usadas em um certo elemento. Neste caso, a classe é customizada para aquele elemento.
Por exemplo: uma classe para estilizar um elemento específico nos headers globais de um projeto poderia ser chamada de header_background-layer.
Outro exemplo: uma classe para estilizar um elemento específico (no caso um headshot/avatar) em um slide de testimonial, pode ser chamada de testimonial-slider_headshot.
No Client-First, classes customizadas devem conter o underline no nome da classe
Classes globais
Classes globais são uma classificação de classe. Uma classe global tem como intuito ser utilizada através de todo um projeto. Tanto classes globais como classes utilitárias podem ser consideradas classes globais.
Uma classe global aplica estilos que ficarão unificados em todo o projeto, e não deve ser utilizada ou feita para um elemento específico.
“Global” significa em todo e qualquer lugar no projeto.
Todas as classes utilitárias são globais, por natureza.
Por exemplo, classes de margin e padding são classes utilitárias globais. A classe margin-large tem um valor de margin de 3rem. Quando atualizamos o valor para 4rem, qualquer elemento que utilize a classe margin-large irá ser atualizado para 4rem.
margin-large e padding-large são controladores globais que mudam os valores de nossas margin e padding em nosso projeto.
Sendo assim, nos permite que fazemos mudanças impactantes e globais por todo nosso projeto quando utilizamos classes utilitárias globais de forma correta.Vale lembrar que classes globais não são limitadas somente às classes utilitárias. As classes globais podem ser definidas como qualquer tipo de classe que tem o intuito de alterar estilos de forma globalizada por todo um site.
No Client-First v2, explicamos melhor e encorajamos o uso de classes customizadas como classes globais.Por exemplo: A classe faq_item pode ser uma classe global customizada. Imagine que temos várias sections de FAQ em nosso projeto, e dessa forma, utilizamos a faq_item para gerenciar e alterar o estilo dos itens de FAQ de uma só vez em todo nosso projeto.
Outro exemplo: A classe header_content pode ser uma classe global customizada, que servirá para customizar um wrapper de conteúdo do header de uma só vez em todo nosso projeto.
Classes combo
Uma classe combo é uma variante para a classe base. Classes combo herdam estilos da classe base, adicionando mais estilos “por cima” delas.
Definimos “classe base” a primeira classe que está inserida em um elemento. Adicionando uma classe por cima da classe base, criamos uma variação única através de uma classe combo.
Classes combo que são adicionadas para gerar uma variação única de uma classe base utilizam o prefixo is-.
Uma classe combo empilhada só funciona quando combinada com a classe base que vem antes dela. No vídeo abaixo, entenda que a classe combo is-blue não funcionará sozinha, e não aparecerá disponível no Webflow a não ser “dentro” da classe base button.
Classes combo podem ser criadas a partir de classes customizadas ou de classes utilitárias base. O exemplo acima button is-blue mostra uma classe utilitária sendo utilizada como uma classe combo.
Podemos também criar uma classe combo para uma classe customizada. Por exemplo: header_content is-home. Esta seria uma variação da classe customizada header_content.
O prefixo -is
Definimos classes combo no Client-First com o prefixo is-, que, ao pé da letra em português, significa “é-”. Quando vemos uma classe com prefixo is-, sabemos que essa é uma classe combo criada em cima de uma classe base.
Evite o “deep-stack” - empilhamento excessivo de classes
O Client-First tem uma regra universal — não empilhar excessivamente.
Deep-stack — quando várias classes estão empilhadas dentro de um elemento.
Deep stacking — o ato de empilhar várias classes dentro de um elemento.
Este é um termo criado pelo Client-First para resolver problemas que nos encontramos com classes empilhadas no Designer do Webflow.
O Client-First não recomenda a estratégia de deep-stacking (empilhamento excessivo) no Webflow.
Por exemplo:
No Client-First, preferimos evitar o deep stacking de classes como no exemplo acima. Abordaremos mais esta filosofia e os motivos por trás disso nesta documentação.
Segue alguns dos motivos:
Motivos pelo qual evitamos o deep stack:
Impossibilidade de reordenar classes no painel de estilos do Webflow
No Webflow, temos controle limitado das classes quando elas estão empilhadas. Não é possível as reordenar e gerenciar de forma efetiva dentro do Designer. Para editar uma classe que está no meio da pilha, por exemplo, precisamos remover as últimas classes que vem após ela, uma vez que o Webflow só permite editar a última classe da lista.
No caso abaixo, você pode ver que precisamos remover algumas classes para substituir o text-weight de text-weight-medium para text-weight-bold:
Este problema se torna extremamente complicado quando fazemos edições em breakpoints menores, como tablet e mobile, e temos ainda menos controle de edição quando editamos breakpoints adicionais.
Workflow mais lento. Requer mais etapas para pequenas alterações
O workflow acima consome tempo. Se essa é uma prática constante, gastarmos sempre mais tempo no gerenciamento e desenvolvimento do projeto.
Curva de aprendizado maior
Acreditamos que o deep stacking leva a uma curva de aprendizado mais acentuada. Há um requerimento mais profundo na compreensão do que as classes fazem e como gerenciá-las.
É rápido "escrever código" CSS no Webflow
Programar CSS no Webflow é rápido e eficiente através do Painel de Estilos do Webflow. Podemos criar uma nova classe e visualmente adicionar propriedades CSS para ela, através de um processo muito rápido, e gostamos de tirar vantagem disso no Client-First.
A economia no tamanho do CSS não é significativa
Quando usamos classes globais em um projeto, reduzimos o tamanho do arquivo CSS. Porém, não acreditamos que essas economias no tamanho do CSS sejam mais vantajosas do que os benefícios da criação de classes customizadas no Webflow.
Aprenda mais sobre o deep stacking posteriormente:
Temos uma explicação mais completa sobre isso em Estratégias de Classe 2.
Utilize classes customizadas
Classes customizadas são um método poderoso e bem recomendado no Client-First.
Utilizamos classes customizadas para os seguintes propósitos:
- Edições fáceis para elementos específicos. Se utilizamos um sistema de classes organizado, conseguimos fazer mudanças únicas e rápidas para elementos específicos e componentes em nosso projeto.
- Para evitar o uso de classes utilitárias em todo lugar de nosso projeto. Os sistemas de classes utilitárias são poderosos, mas não devem ser utilizados para desenvolver todo nosso projeto. Quando a utilização de classes utilitárias deixam nosso trabalho como desenvolvedor de Webflow mais complicado, encorajamos a criação de classes customizadas. O uso de classes utilitárias só deve ser feito quando há benefícios claros para tal.
- Para evitar o deep stacking. Uma classe customizada pode substituir o deep stack de 3 classes empilhadas.
Exemplo de textura de background
Suponhamos que queremos estilizar a textura de um background em um componente.
Pode ser que possamos estilizar nossa textura de background com três classes empilhadas. Por exemplo, background-absolute + fit-size + opacity-low. Quando combinadas, essas três classes nos dão uma combinação de estilos que precisamos.
Mas ao invés de empilhar múltiplas classes para essa textura de background, podemos criar uma classe customizada chamada de services-item_background-texture. Neste nome em inglês, esta classe claramente comunica que a classe serve para uma “textura que está no background de uma imagem de um item de serviços”
Podemos agora rapidamente e com mais liberdade fazer edições para esta classe customizada ao invés de manualmente reorganizar e reordenar classes empilhadas. Se precisamos de um estilo único, temos uma classe customizada pronta para aceitar customizações específicas.
Desenvolvimento CSS tradicional
No desenvolvimento em CSS tradicional (programando fora do Webflow), classes empilhadas podem ser a melhor solução, já que dessa forma torna-se necessário programar menos código.
No entanto, isso não é desenvolvimento CSS tradicional. Isso é Webflow – e o Client-First é uma coleção de princípios criada especificamente para o Webflow.
No Webflow, acreditamos que gasta-se menos tempo e esforço para criar e gerenciar estilos de uma classe customizada em um elemento do que gerenciar uma lista de classes empilhadas em deep stack.
Veremos uma explicação completa de criação de classes customizadas na página Estratégias de Classe 2.
Convenção de nomenclatura
Crie nomes claros e específicos para classes.
Seja um desenvolvedor Webflow, um cliente ou qualquer outra pessoa, este alguém deve conseguir entender de forma clara do que uma classe se trata através de seu nome, mesmo que eles nunca tenham ouvido falar em Client-First.
Mindset de nomenclatura
Objetivos da convenção de nomenclatura do Client-First
- Empoderar uma pessoa não-técnica de gerenciar seu website.
- Ser claro, informativo e descritivo no nome de nossas classes.
- Dar ao leitor o maior contexto possível sobre o propósito de uma classe.
- Ler o nome de uma classe e saber qual é o seu propósito.
- Sem abreviações, sem confusão.
- Dar o maior contexto possível na relação daquela classe e o website.
- Criar nomes baseados em técnicas de organização.
- Usar keywords (palavras-chave) para procurar por classes disponíveis no Styles panel do Webflow.
- Visualizar qual o propósito da classe através de seu nome.
Perguntas que devemos nos perguntar quando nomeando classes
Nomes de classes devem dizer o que elas fazem. Quando criamos seus nomes, devemos pensar nas seguintes questões:
- “O que esta classe está fazendo no projeto?"
- "Qual o propósito desta classe no projeto?"
- "Como posso dar o maior contexto possível sobre o que essa classe significa para o projeto?”
O nome de uma classe deve responder estas perguntas.
Nomes e palavras-chave significativos
Uma palavra-chave significativa nos da contexto do que essa classe e elemento esta fazendo. Ser o mais descritivo possível em nossa nomenclatura nos ajuda a ficar mais organizados.
Palavras chave e nomes claros são fundamentos básicos do Client-First. Cada nome de classe deve servir um propósito com significado. Devemos prover para a próxima pessoa a participar do projeto o maior contexto possível no propósito da classe.
Palavras-chave vão de gerais a específicas dentro do nome de uma classe
Vamos olhar para o exemplo text-size-large.
A palavra-chave mais geral neste nome é o text. Essa palavra nos diz que essa palavra tem a ver com um elemento de texto.
size nos diz que estamos trabalhando com a customização do tamanho do texto. A palavra “size” é mais específica, já que ela se refere a uma propriedade CSS particular do texto — font-size.
Por último, temos large, que nos dá uma informação mais específica sobre o valor do text size. É um "grande tamanho de texto".
Perceba que não estamos chamando esta classe large-size-text. Embora isso poderia tão claro quanto, temos benefícios significativos no Client-First quando seguimos uma convenção de nomenclatura geral-para-específica. Permitimos uma busca por classes mais inteligente, além de Folders (pastas do Client-First) mais organizadas. Vamos aprender mais sobre este conceito posteriormente nesta documentação.
Agora vamos ver um exemplo que utiliza uma classe customizada, a team-list_headshot-wrapper.
O nome da pasta é team-list_, que nos diz que este elemento tem algo a ver com a página do time ou com a sessão de time, e que é uma lista. "Team list" (Nome do time) é o nome do grupo que contém elementos específicos.
headshot (foto do rosto) já fica mais específico, nos dizendo que isso tem algo a ver com o elemento headshot contido na lista do time.
wrapper (envelope) fica ainda mais específico nos dizendo que este está “envelopando” o headshot.
Ler o nome da classe team-list_headshot-wrapper é claro e lógico, mesmo que o usuário não entenda o CSS por trás disso. O usuário de Webflow vai entender que editar esta classe vai fazer [algo] para a lista de headshots da lista do time. É uma excelente pista para a próxima pessoa que colaborar no projeto.
Agora, imagine adicionar mais elementos dentro do nosso headshot wrapper. Podemos ficar bastante organizados com uma geral-para-específica nomenclatura.
team-list_headshot-wrapper
team-list_headshot-image
team-list_headshot-texture-layer
team-list_headshot-background
Desta forma, nossa lista de classes para a team list (lista do time) é bastante organizada e lógica dentro de nosso projeto. Essa nomenclatura se integra muito bem na função de Folders (pastas) do Client-First.