Quando você escreve muito código CSS, você pode experimentar mais de um erro. Alguma ferramenta pode ser necessária para impedir que seus erros de escrita de CSS.
Talvez, às vezes, seu erro seja realmente um bug. Também é possível que inconsistências ou estilos de código não claros sejam causados simplesmente por apressadamente. Talvez muitos deles pareçam triviais (dependendo da sua personalidade), mas à medida que a base de código cresce e o tempo se acumula, muitas pessoas farão coisas feias ao usá -las. As consequências das coisas não são algo que você pode imaginar.
Você tenta se controlar. Seus colegas também o ajudam quando você estiver livre para corrigir seus erros em tempo hábil. No entanto, você e seus colegas são o fabricante de erros; portanto, no final, são inevitavelmente falhas pelo menos até certo ponto. Mais tarde, você ou outras pessoas resolverão o problema causado por erros de CSS em sua página.
Nem você nem seus colegas gostam de discutir os erros que cometiam, porque é embaraçoso. Às vezes pode ser frustrante ou emocionalmente rompido. Às vezes, uma determinada especificação é útil para a manutenção da base de código, como um estilo de escrita consistente, que pode parecer um pouco pedante e chato quando executado manualmente. Caso contrário, eles mostrarão os elementos do seu amor habitual para mostrar e teimosia.
Além disso, você pode preferir corrigir erros em tempo hábil, em vez de esperar que o código seja revisado e outras pessoas aponte os erros e modifique -os e declare que você não terá esses erros novamente. Quando o seu erro CSS ocorre, um feedback oportuno ajudará você a economizar muito tempo.
O que você precisa é de uma máquina que impeça erros
Você precisa de uma máquina que impeça que erros aconteçam, pode entender o CSS e entender você: suas intenções, preferências, idéias e fraquezas.
Essas máquinas terão limitações. Tudo não é perfeito. Mas essa limitação é diferente de você e de seus colegas. Desde que possa evitar erros, continuará a impedi -los, trabalhando incansavelmente. Ao mesmo tempo, você e seus colegas sempre podem melhorar a máquina, expandir sua funcionalidade e enfraquecer suas limitações. É de código aberto, e pessoas de todo o mundo podem participar e fazer sua parte-outros autores que querem impedir de ter erros de escrita de CSS.
Como outros, os autores do CSS precisam de linters
Chamamos esses programas que impedem erros de "linheiros". Existem vários liners melhores no JavaScript. Eslint Em particular, funciona milagrosamente, mostrando -nos que um bom linhador é tão útil. Mas no CSS não temos tanta sorte, nossas escolhas são muito limitadas: SCSS-Lint, à base de rubi, com pré-processadores especiais e fiapos de CSS anteriores.
Mas tudo isso foi antes do PostCSS aparecer. Além disso, o PostCSS fornece alguns métodos para criar mais ferramentas CSS interativas. Ele pode analisar qualquer sintaxe da classe CSS em um plug -in abstrato da árvore de sintaxe (AST) para análise e operação. E com um analisador personalizado, o PostCSS pode até lidar com padrões inválidos irregulares (como // comentários)
As condições de maturidade já podem produzir um linhador com recursos mais poderosos-alimentados pelo PostCSS e inspirados pelas melhores características do SCSS-Lint e Eslint.
Trabalhei com alguns amigos neste projeto e agora começarei a apresentar as ferramentas que desenvolvemos: Stylelint.
Coisas que você pode fazer com Stylelint
A seguir, é apresentado um resumo das funções julgadas no Stylelint, com mais de 100 regras e escalabilidade.
Neste ponto, se você se sentir um pouco impaciente ("Ok, ok: acredito que o Stylelint terá efeitos de trabalho milagrosos. Não há necessidade de muito resumo."). Apenas pule para a próxima seção, aqui estou apenas explicando alguns problemas e dando algumas dicas.
Captura de erros
Algumas regras do Stylelint são projetadas para identificar erros óbvios, como erros de ortografia ou omissões criadas por seus olhos chateados ou escuros. Por exemplo, você pode desativar blocos em branco, valores hexadecimais inválidos, seletores duplicados, nomes de animação sem nome e sintaxe de gradiente linear errado.
As outras regras são tentar o seu melhor para pegar erros mais sutis. Aqui está uma regra: quando você usa propriedades abreviadas (como margin ) que podem substituir suas propriedades (como margin-top ), um aviso será emitido porque isso pode ser causado por sua negligência. Além disso, há outra regra que o avisa: quando ocorre um caos, se a regra A aparecer antes da regra B, mas na verdade cobre a regra B, porque o seletor da regra A tem uma prioridade mais alta (por exemplo, a regra A é .foo.bar{・・・} e a regra B é .foo{・・・} ). Esta é uma situação muito difícil.
Há também uma regra que usa o plug -in PostCSS DoIuse para verificar se o seu navegador suporta esse estilo. Outro usa o plug-in CSS-Colorguard para solicitar a similaridade de cores para evitar confundir seu uso. (Observe: esta é uma das principais vantagens do Stylelint com base em PostCSS: comparado a outros plug-ins de postcss, o Stylelint pode solicitar com pouco esforço.)
Aplicar as melhores práticas
Se você usar os métodos do sistema em suas folhas de estilo ou tiver um guia de estilo para o seu código, deve proibir esses padrões. O Stylelint já fornece esses recursos.
Primeiro, você precisa controlar seu seletor com força. Com o Stylelint, você pode desativar os seletores que excedem uma determinada especificidade ou definem limites para a profundidade do ninho. Você pode desativar os seletores de categorias (como seletores sem IDs) e usar expressões regulares para nomear convenções para o restante deles.
Você pode proibir o uso de hackers !important ou navegadores que seu navegador não suporta. Se você usar o Autoprefixer (ou você deve), poderá desativar o uso de prefixos de fornecedores na folha de estilo de origem.
Se você quiser ser mais rigoroso - pode gastar algum tempo em configuração para garantir consistência absoluta - pode fazer cumprir a ordem das propriedades da folha de estilo e fornecer propriedades, valores, funções e unidades para listas negras e brancos.
Executar convenções de estilo de código
A Stylelint possui convenções para executar automaticamente os estilos de código, para que você e seus colegas de equipe não precisem configurá -lo ativamente. Estamos comprometidos em tornar essas regras mais abrangentes e flexíveis.
Essas regras são direcionadas principalmente a espaços, mas também para outros detalhes, como aspas, cartas superiores e minúsculas, escrevendo zeros antes de decimais, usando palavras -chave, spelling values, etc.
Sonhando que você e seus colegas de equipe possam estabelecer uma convenção de formato (por exemplo, sempre deixamos um espaço depois de declarar um cólon) e modificá -lo na sua configuração de Stylelint, e você não discutirá isso novamente depois disso. Que seja executado no reino da máquina.
Desenvolver e expandir tudo
Nicholas Zakas, o criador de Eslint (e CSS Lint), escreveu sobre o sucesso de Eslint está em sua escalabilidade. A Stylelint tenta seguir a liderança de Eslint e fornece aos autores do CSS um linhador, o que também é extensível.
Você pode escrever e publicar seu próprio plug -in de regras. Agora temos muitas coisas para usar; E estamos ansiosos para ver os excelentes plugins de outras pessoas.
A configuração é extensível e, portanto, pode ser compartilhada. Quanto aos plugins, aprendemos sobre o valor desse recurso com o ESLint. Verifique que inclui configurações do WordPress e APITSS e foram publicados.
Se você não gosta das dicas embutidas do Stylelint, pode criar seu próprio estilo manualmente ou até criá-lo para sua organização. Você também pode personalizar as regras usadas para fornecer mensagens de aviso.
Usando a API do Stylelint, você pode criar plugins para compiladores de texto e executar testes para fazer com que o Stylelint incorpore em todos os aspectos do seu fluxo de trabalho.
Se você tiver idéias sobre extensões de Stylelint, informe -nos!
Respostas às perguntas esperadas
Pode haver várias perguntas em sua mente. Aqui estão algumas das explicações mais comuns:
É possível usar o Stylelint em SCSS ou menos?
A resposta é sim, você pode usar o Stylelint no SCSS e é suportado em menos também! Como o PostCSS permite analisadores personalizados, o Stylelint pode suportar facilmente uma ampla variedade de sintaxes não padrão - você pode personalizar um analisador PostCSS para análise.
Por causa do analisador PostCSS-o Stylelint suporta SCSS, menos e o novo Sugarss. Se você deseja implementar outro suporte de sintaxe personalizado, pode fazê -lo com pós -sem
Obviamente, existem certas regras vinculadas à sua sintaxe não padrão (como #{$interpolation} no seletor de ID do SASS). Como o Stylelint tenta encobrir o estilo de nossas folhas de estilo - algumas pessoas usam CSS padrão, algumas pessoas usam idiomas estendidos, como SCSS, algumas pessoas usam propriedades personalizadas estranhas etc. - elas inevitavelmente criarão algumas vulnerabilidades que precisam ser preenchidas. No entanto, estamos lidando com esses erros que encontramos; Quaisquer regras durante esse período podem ser completamente fechadas ou desabilitadas em uma folha de estilos de fila por fila ou em estilo de linha a fila.
O Stylelint é capaz de usar a sintaxe CSS futura?
Sim! Semelhante à resposta mencionada acima: o Stylelint pode entender qualquer coisa que o PostCSS entenda, incluindo a ativação de qualquer sintaxe CSS futura (provavelmente através do plug -in PostCSS). De fato, algumas regras do Stylelint lidam especificamente com a sintaxe CSS futura e algumas propriedades personalizadas.
A configuração do Stylelint é enorme, por onde devo começar?
Recomendamos três métodos de configuração:
Estender uma configuração publicada. Mantemos os padrões de configuração do Stylelint para facilitar o usuário para fornecer uma referência inerente. E muitas configurações foram anunciadas. Comece do zero e adicione uma regra de cada vez. Por padrão, nenhuma regra está ativada; portanto, adicionando as regras manualmente, você saberá qual será aplicado e poderá entender cada regra que adicionará. Inicie a configuração de cola de cópia, decida quais opções usar e excluir seletivamente.
Felizmente, você não precisa escrever uma enorme configuração do Stylelint repetidamente. Você pode escolher um estilo que você gosta e pode usá -lo em qualquer lugar.
A maneira mais fácil de correr Stylelint?
Para a maioria das pessoas, a maneira mais fácil é através de sua linha de comando.
Se você preferir o plug-in Gulp, pode usar o Gulp-Stylelint. Para Webpack, existem muitas possibilidades de escolha. Esperamos que esses plugins o inspirem a criar outros plugins Stylelint, como os do Grunt. (Você pode pesquisar em projetos de código aberto!)
Você também pode executar o Stylelint usando o plug -in PostCSS, incluindo o que estiver incluído no plug -in. Isso significa que você pode usar o Stylelint em qualquer lugar que possa usar PostCSS (que abrange quase todas as ferramentas de compilação)!
Além disso, há também um plug -in de compilação de texto do Stylelint para Atom, texto sublime, código vs para fornecer o feedback mais rápido. Para obter mais informações, consulte a lista de ferramentas complementares no site da Stylelint.
Como mostrado abaixo, na linha de comando, os resultados que você espera ver:
Mostrar o seguinte em átomo;
O Stylelint pode corrigir meu erro?
Não, mas outro chamado StyleFmt foi projetado para fazer isso. Requer uma configuração de Stylelint - muito semelhante ao que você usa no linhagem - e pode corrigir quaisquer erros. Esperamos que, à medida que a equipe da comunidade contribua, o Stylelint possa evoluir para corrigir automaticamente erros que violam as regras do Stylelint. Por favor, ajude -os a alcançar esse objetivo!
Você também pode usar outras ferramentas, como CSSCOMB ou PerfectList, usadas em conjunto com o Stylelint para corrigir e forçar automaticamente automaticamente o REST.
Use o linhagem para suplementação de restrições
Existem enormes quantidades de restrições em bons CSs. É por isso que gastamos muito tempo discutindo métodos como SMACSS, ACSS, BEM, APORSS, ITCSS, etc. Todos sabemos que escrever CSS ruim é muito fácil; portanto, se não temos mais medo da escrita no estilo CSS, precisamos estabelecer uma estratégia inteligente no trabalho e bravamente o cumprir.
O objetivo do Stylelint é automatizar a execução - fornecendo um conjunto de regras básicas e uma estrutura travável que os autores do CSS podem usar para executar suas próprias estratégias.
Vamos tentar e nos informe como atendê -lo. Se você relacionou melhores idéias de melhoria, como regras de contribuição, aprimoramentos, testes, corrigir bugs, arquivos, novas idéias ou apenas feedback, dê -nos uma mensagem! Dessa forma, todos os nossos desenvolvedores em todos os níveis têm trabalho a fazer.