CSS é uma linguagem de design fácil de usar para criar sites e aplicativos coloridos. CSS pode ser divertido ao trabalhar em projetos menores, mas se torna muito complicado em projetos de grande escala, onde você pode experimentar inconsistências de nomenclatura e repetição de código. Os desenvolvedores introduziram várias soluções para esse problema, desde metodologias BEM e SMACSS a estruturas destinadas a resolver alguns desses problemas subjacentes.
Ao longo dos anos, muitos frameworks CSS surgiram para ajudar a simplificar o processo de desenvolvimento. Essas estruturas têm abordagens diferentes. Por exemplo, alguns deles seguem a metodologia do utilitário primeiro e, portanto, são chamados de estruturas do utilitário primeiro.
As estruturas de utilitários em primeiro lugar fornecem uma classe de utilitários de baixo nível para construir designs personalizados em seu arquivo HTML. As classes de utilitários são nomeadas de acordo com a finalidade pretendida, de forma que sejam facilmente compreensíveis para a pessoa comum.
O objetivo principal da classe .bg-white é adicionar uma cor de fundo branca. Existem diferentes classes para diferentes finalidades, como definir a cor do plano de fundo ou adicionar uma margem ou preenchimento a um contêiner.
É importante notar que os frameworks que priorizam a utilidade não fornecem uma solução duradoura para os problemas subjacentes do CSS como uma linguagem de design, mas podem ajudar a reduzir as dores de cabeça relacionadas ao estilo no processo de desenvolvimento.
Sem mais delongas, vamos dar uma olhada nas melhores estruturas CSS de utilidade inicial disponíveis em 2021.
Tailwind CSS
Tailwind CSS fornece um extenso catálogo de classes de utilitários que podem ser usados em trânsito para desenvolver sites de aparência elegante. Você pode projetar seu código HTML com um alto grau de personalização, sem nunca sair do arquivo HTML.
Instalando TailwindCSS
Para acessar o Tailwind CSS e seu conjunto de classes em movimento, adicione a referência abaixo ao seu arquivo HTML:
Seu modelo HTML inicial deve ser semelhante a este:
Observe que alguns recursos do Tailwind CSS, como diretivas, não estão disponíveis na versão CDN.
Tailwind CSS também está disponível por meio do módulo npm. Você pode instalá-lo executando o comando abaixo em seu terminal:
npm install tailwindcss
Para nos nós e Tailwind CSS em produção , você deve injetar a base, os componentes e os estilos de utilitário no seu recém-criado arquivo usando a diretiva @tailwind :
/* injeção de comprovação de vento traseiro */ @tailwind base; componentes @tailwind; @tailwind utilities;
Os estilos básicos que são padrão para Tailwind CSS são adicionados com a injeção do preflight @tailwind base . Os usuários podem inserir seu próprio estilo de base usando a diretiva @layer base :
@tailwind base; @layer base { h1 { @aplicar texto-2xl; } uma { @aplicar text-blue-500; }
} componentes @tailwind; @tailwind utilities;
As diretivas
@apply são usadas para a composição do estilo:
Acima está a implementação de código de um componente de cartão usando Tailwind CSS:
Tailwind CSS é a escolha certa se você está priorizando velocidade e eficiência no processo de desenvolvimento . Ele remove todo o código CSS desnecessário, resultando em um aplicativo muito melhor otimizado. Além disso, você pode escrever CSS do Tailwind em seu arquivo HTML sem criar um novo arquivo. Isso torna o desenvolvimento muito mais fácil e direto.
Embora Tailwind CSS possa soar próximo e futurista , ainda é relativamente viciado e difícil de ler. Você precisará de muita prática para se acostumar com suas várias classes, que não são semânticas.
Tachyons
Tachyons é um leve (cerca de 14 KB), framework CSS com prioridade para o utilitário que segue a arquitetura CSS para dispositivos móveis. Você pode criar um site rápido e responsivo, tudo dentro do seu arquivo HTML. Os táquions funcionam bem em HTML, Ember, React, Angular e muito mais.
Instalação de Tachyons
Os táquions podem ser acessados adicionando uma referência ao arquivo reduzido:
Seu arquivo HTML inicial deve ser estruturado da seguinte maneira:
Como alternativa, você pode instalar via npm:
npm install [email protected]
Embora o Tachyons seja escrito com PostCSS, há suporte adicional para SASS, que permite um desenvolvimento mais flexível.
Lorem ipsum dolor sit, amet consectetur adipisicing elit.=
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque odit quisquam atque e a dolores labore impedit corrupti placeat cupiditate obcaecati.
Shed.css
Segundo seus fundadores, a ideia de construir S hed.css surgiu depois que um dos fundadores se cansou de escrever CSS repetidamente. Ele acreditava que todo o CSS de que alguém poderia precisar já foi escrito e não há necessidade de reinventar a roda.
Shed.css fornece uma classe de propósito único que serve como um bloco de construção para seu componente ou aplicativo. Em vez de escrever CSS incessantemente, você recebe um conjunto de opções que desencorajam a prática de bicicletas. Como Tachyons, Shed foi escrito principalmente com PostCSS .
Instalando Shed.css
O galpão pode ser instalado usando o módulo npm.
Execute o comando abaixo em seu terminal para começar:
npm install--saveDev shed-css
A implementação do botão com Shed.css se parece com isto:
Conecte-se
Basscss
As classes
Basscss são nomeadas em um formato legível por humanos, em vez de adotar uma abordagem semântica. Assim como as outras bibliotecas listadas acima, Basscss oferece uma alternativa leve e responsiva ao CSS puro.
Instalação de Basscss
Para colocar as mãos nos Basscss, você pode vincular uma referência ao CDN
Ou por meio da instalação do npm
npm install [email protected]
Aqui está um exemplo de como usar Basscss:
Basscss v8.0.2
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sapiente, voluptatibus.
Expressive css
Expressivo CSS é baseado na arquitetura de desenvolvimento que prioriza o utilitário. O nome visa destacar a missão do Expressive, que é fornecer classes que são compreensíveis para o usuário médio. Isso torna Expressive uma escolha particularmente boa para design visual.
Aqui está um exemplo de como usar CSS Expressivo:
Lorem ipsum dolor sit
div>As aulas precisam ser ‘semânticas’?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi illum beatae voluptatibus nobis aliquid minima incidunt, ullam dolor dolorem nemo quia similique e aque veniam molestias aliquam, animi blanditiis earum quam labore mollitia architecto porro, in impedit! Cupiditate officiis magnam minima.
Conclusão
A ideia de uma abordagem que prioriza o utilitário para a nomenclatura de classes existe há algum tempo, mas só recentemente ganhou impulso com o lançamento do TailwindCSS. As aulas de utilitários podem parecer estranhas no início, mas à medida que você se acostumar com elas, você apreciará os benefícios que elas têm a oferecer.
A postagem Principais estruturas CSS com prioridade para os utilitários apareceu primeiro em LogRocket Blog .
Categories: UncategorizedWordpress
