Shoelace.css: Um kit inicial de CSS de volta ao básico

As estruturas CSS, como Bootstrap e Semantic UI, tornaram-se uma parte essencial do web design. Elas fornecem as redefinições necessárias, os estilos padrão e os componentes que nos poupam horas e horas de trabalho.

A maioria das estruturas CSS é criada usando pré-processadores como Less ou Sass, o que é ótimo, exceto quando as pessoas incluem toda a biblioteca dessa forma:

<!-- Bootstrap 4 - 192KB -->
<link rel="stylesheet" href="https://davidwalsh.name/bootstrap.min.css">

Ou isto:

<!-- Semantic UI 2.2 - 567KB --> 
<link rel="stylesheet" href="https://davidwalsh.name/semantic.min.css">

Observe o tamanho dos arquivos para o minificado versões. E isso não inclui nem mesmo os scripts.

Há alguns problemas aqui:

Primeiro, o senhor não precisa a maioria das coisas que acompanham as estruturas. Elas não foram projetadas para que o usuário use a versão incluída no pacote, exceto, talvez, para criar um protótipo muito rápido.

Segundo, quando o senhor usa a versão empacotada, perde o que torna os pré-processadores tão bons, como personalizar tudo com variáveis. Por exemplo, no Bootstrap 4, o senhor precisará atualizar pelo menos 30 estilos apenas para alterar a cor primária globalmente. Falha!

É claro que a razão pela qual a maioria das pessoas carrega tudo é porque é mais fácil. O senhor não precisa se preocupar com Less, Sass, Stylus ou com a configuração de um script de compilação.

E se o senhor pudesse ter o melhor dos dois mundos?

Apresentando Shoelace.css

Eu criei Shoelace.css para resolver esse mesmo problema. É um kit inicial de CSS puro, altamente personalizável, que pesa apenas 31 KB minificado (7,9 KB gzipado). O senhor pode carregá-lo localmente ou via CDN e ainda assim personalizar tudo com variáveis. E é totalmente gratuito.

O Shoelace usa um recurso bem suportado do CSS chamado Propriedades personalizadas. Muitas pessoas gostam de chamá-las de “variáveis CSS”. De qualquer forma, elas são incrivelmente úteis.

O senhor define propriedades personalizadas em sua folha de estilo da seguinte forma:

:root {
  --body-color: #000;
  --body-bg-color: #fff;
  --link-color: blue;
}

E depois usá-los mais tarde, assim:

body {
  color: var(--body-color);
  background-color: var(--body-bg-color);  
}

a {
  color: var(--link-color);  
}

O bom das propriedades personalizadas é que elas funcionam em cascata, portanto, o senhor pode substituí-las conforme necessário. Para personalizar o Shoelace, basta substituir algumas variáveis e pronto. Não é necessário nenhum pré-processamento!

Confira esta demonstração no CodePen para ver o Shoelace em ação. O senhor pode alterar as variáveis e observar a atualização dos componentes diretamente no navegador.

Sem mágica. Apenas CSS.

O que há na caixa

Gosto de pensar no Shoelace como uma redefinição de CSS polvilhada com componentes úteis. Ele não faz tanto quanto uma estrutura completa, mas isso é intencional. Ele vem com o essencial, porque geralmente é tudo o que o senhor realmente precisa. É claro, o senhor pode estender o Shoelace com seus próprios componentes, conforme necessário.

Aqui está o que o senhor recebe fora da caixa:

• Redefinição de CSS
• Estilos de conteúdo padrão
• Alertas
• Distintivos
• Botões
• Formulários
• Carregadores
• Abas
• Tabelas
• Utilitários de texto
• Utilidades do Float
• Dimensionamento de utilitários
• Utilitários de espaçamento

Uma coisa que o Shoelace não tem vem com um sistema de grade. Isso também é intencional, pois o suporte ao CSS Grid foi melhorou significativamente e o senhor realmente não precisa mais de um. Se o senhor ainda não explorou o CSS Grid, Rachel Andrew criou Grade por exemplo para que o senhor se atualize.

Se o senhor tiver a obrigação de oferecer suporte a navegadores mais antigos, é recomendável incluir seu sistema de grade favorito sobre o Shoelace.

O futuro das estruturas CSS

Não gosto de chamar o Shoelace de estrutura. Ele é mais um “kit inicial de CSS” que permite que o senhor crie coisas sem a sobrecarga exigida pelos pré-processadores. O fato de o senhor poder <link> com uma linha e ter acesso imediato a um boilerplate de CSS totalmente personalizável é incrível.

Acho que o Shoelace é o futuro das estruturas CSS. Os pré-processadores ainda têm um lugar no mundo do web design, e terão pelo menos até que o modificadores de cor e consultas de mídia personalizadas mas o CSS está se atualizando rapidamente, e a Shoelace está tirando o máximo proveito disso.

Shoelace foi criado por @claviska. Os senhores podem saber mais sobre esse projeto visitando shoelace.style.