Freecodecamp: Criação do guia de estilo CSS do freeCodeCamp

@raisedadead O que você acha?

Obrigado, você está ciente de alguma maneira que pode lint estes? Usando qualquer linters?

@raisedadead @tomasvn Na minha opinião, o processo de criar um guia de estilo CSS e segui-lo não produzirá resultados úteis a longo prazo. React, Yarn, Babel e muitos outros projetos de código aberto usam Prettier e outras extensões semelhantes para sua formatação de estilo CSS.

Em vez de criar um guia de estilo. Devemos dizer aos nossos contribuidores para instalar Prettier em seu editor de IDE / código e estaremos prontos para prosseguir.
@raisedadead O que você acha disso?

Obrigado, você está ciente de alguma maneira que pode lint estes? Usando qualquer linters?

Mais bonito funciona bem;). Ele avisa quando você viola qualquer regra de estilo CSS.

Em vez de criar um guia de estilo. Devemos dizer aos nossos contribuidores para Instalar o Prettier em seu editor de IDE / Código e estaremos prontos para prosseguir.

Esconder-se dos problemas nunca ajudou ninguém ... 😅!

Sou fortemente a favor de evitar formatadores e usar linters. Automatizar as coisas parece legal e fácil, mas elimina o ponto-chave de escrever código padrão.

IMHO, sendo a comunidade em torno do aprendizado, não devemos nos esquivar em corrigir problemas no estilo de código apontado por linters.

Além disso, observe que mais bonito é um formatador de código _Opinionated_

Na minha opinião, o processo de criar um guia de estilo CSS e segui-lo não produzirá resultados úteis a longo prazo.

Eu acho que este é um argumento incorreto (sinta-se à vontade para provar que estou errado se você tiver estatísticas).

Se você verificar o guia de estilo JS do Airbnb, JS Standard, etc., eles têm um ajudante para escrever código padrão e estão sendo usados ​​por milhares de empresas e desenvolvedores todos os dias.

@raisedadead Não estamos nos escondendo dos problemas ...! Podemos usar linters, mas a mesma tarefa pode ser feita com uma única ligação de chave com Prettier, então por que estamos tentando fazer isso?

Eu acho que este é um argumento incorreto (sinta-se à vontade para provar que estou errado se você tiver estatísticas).
Se você verificar o guia de estilo JS do Airbnb, JS Standard etc., eles têm um ajudante para escrever o código padrão e estão sendo usados ​​por milhares de empresas e desenvolvedores todos os dias.

Eu concordo totalmente com você nisso! Seus guias de estilo JS são realmente muito úteis.

Não estamos nos escondendo dos problemas ...! Podemos usar linters, mas a mesma tarefa pode ser feita com uma única ligação de chave com Prettier, então por que estamos tentando fazer isso?

Porque, queremos escrever código padrão? Os contribuidores são livres para usar qualquer ferramenta que desejem, mas isso não significa que não precisamos de um guia.

De qualquer forma, vamos manter este tópico para feedback construtivo sobre o guia, podemos sempre ter discussões no chat.

@tomasvn RFC parece interessante e, uma vez que você está interessado no feedback, você acha que será possível procurar alguns guias de estilo e ferramentas estabelecidos nos quais possamos nos inspirar.

Porque, queremos escrever código padrão? Os contribuidores são livres para usar qualquer ferramenta que desejem, mas isso não significa que não precisamos de um guia.

Eu estou com você nisso também. Ok, vamos com um guia de estilo e podemos usar stylelint como nosso linter.

@raisedadead stylelint parece bom 👍 Como alertaria o contribuidor sobre incosistências em seu documento

@tomasvn Acabamos de lançar nosso novo currículo e plataforma de aprendizagem. Você ainda está interessado em ajudar com isso?

Todo o nosso CSS precisa de um bom refatorador, e essa seria uma boa oportunidade não apenas para criar um guia de estilo, mas também para aplicá-lo imediatamente ao projeto e garantir que todos os nossos repositórios estejam de acordo com ele.

@QuincyLarson Claro, posso

@tomasvn Isso seria incrível!

freeCodeCamp não tem muito CSS. O CSS do freeCodeCamp está localizado principalmente em "main.less". E estamos usando o Bootstrap 3.0.

Podemos eventualmente mudar para o Bootstrap 4.0 ou apenas reescrever nosso CSS para usar o Flexbox. Mas, por enquanto, estamos usando o React Bootstrap em vários de nossos aplicativos, e ele está atualmente bloqueado para o Bootstrap 3.0. Portanto, eu recomendo apenas limpar o CSS customizado existente em main.less e torná-lo menos redundante e mais organizado de forma lógica.

@QuincyLarson entendeu, e o main.less está localizado em client / less / main.less, este é o arquivo correto?

@tomasvn Obrigado pela paciência - acabei de ver isso. Sim - client / less / main.less deve ser o arquivo correto.

@tomasvn Precisa de ajuda com isso? Ficarei feliz em contribuir

@tomasvn , você já teve a chance de começar a trabalhar nisso? Se não, @borisyordanov Sim - gostaríamos de receber suas contribuições com isso.

@borisyordanov desculpe pelo atraso, com certeza, vá em frente. Eu tenho alguns problemas ao executar o dev env no Windows, então você pode começar, quando eu consertar minhas coisas, eu posso ajudá-lo a refatorá-las

@tomasvn Mandei um e-mail para você, vamos nos encontrar em um chat e planejar isso. Se você tiver problemas para executar o projeto, recomendo percorrer o guia, se ainda não o fez, ou pedir ajuda no Gitter

Se ainda houver necessidade, posso ajudar com isso

@ Jgriebel1990 Não consegui entrar em contato com tomasvn, então nenhum progresso foi feito até onde eu sei. Sinta-se à vontade para assumir

@ jgriebel1990 fique à vontade para assumir, não consegui fazer minha cópia funcionar na máquina Windows, tudo o que posso fazer é uma revisão do código quando terminar

@tomasvn parece que @ Jgriebel1990 e @borisyordanov não tiveram a chance de resolver isso - você ainda está interessado em ajudar com isso?

@QuincyLarson Vou tentar fazer funcionar no windows, ainda tenho problemas para executá-lo, se não conseguir configurar meu ambiente, é só fechar o thread.

@tomasvn Não se preocupe - teve sorte em executá-lo localmente?

Relacionado: https://github.com/freeCodeCamp/freeCodeCamp/issues/35081

@QuincyLarson Sem sorte, executando-o localmente

@tomasvn quais problemas você encontrou ao configurar localmente.

@tomasvn Leia isto - https://github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/how-to-setup-freecodecamp-locally.md

@raisedadead Com as atualizações para https://github.com/freeCodeCamp/design-style-guide , esse problema é necessário?

Está mais no roteiro. Eventualmente, será o recurso central para nossos componentes de IU.

CSS Border Style
A propriedade border-style especifica o tipo de borda a ser exibida.

Os seguintes valores são permitidos:

pontilhada - define uma borda pontilhada
tracejado - define uma borda tracejada
sólido - define uma borda sólida
double - define uma borda dupla
ranhura - define uma borda 3D ranhurada. O efeito depende do valor da cor da borda
cume - define uma borda com sulcos 3D. O efeito depende do valor da cor da borda
inserção - define uma borda de inserção 3D. O efeito depende do valor da cor da borda
início - define uma borda de início 3D. O efeito depende do valor da cor da borda
nenhum - não define nenhuma borda
oculto - define uma borda oculta
A propriedade border-style pode ter de um a quatro valores (para a borda superior, borda direita, borda inferior e borda esquerda).

EXEMPLO-
p.dotted {border-style: dotted;} p.dashed {border-style: dashed;} p.solid {border-style: solid;} p.double {border-style: double;} p.groove {border-style: groove;} p.ridge {border-style: ridge;} p.inset {border-style: inset;} p.outset {border-style: outset;} p.none {border-style: none;} p.hidden {border-style: hidden;} p.mix {border-style: dotted dashed solid double;}

Ei! Qual é o progresso nisso? Estou disponível para ajudar!

@ManasMahanand , obrigado pelo seu interesse.
Seria ótimo se você pudesse olhar para os linters css disponíveis, compará-los e ver se há algo melhor do que o stylelint.
Em seguida, adicione o linter ao nosso repo e altere os arquivos CSS para garantir que o repo esteja livre de erros de linting.

@madabdolsaheb serve !

@ahmadabdolsaheb Espere, o que você quer dizer com adicionar ao repo?

Você quer que eu instale o linter como uma dependência, como o eslint já está?

Ou existe uma maneira de instalar testes no próprio github, de forma que não permita a fusão a menos que o guia de estilo seja seguido?

Ok, parece que o stylelint é uma boa opção em si. Estou instalando isso.

Para experimentar, definirei regras conforme sugerido por OP. Em seguida, removerei todas as regras e abrirei um pr. Podemos então discutir e definir regras

https://stylelint.io/user-guide/rules/about

Você pode dar uma olhada neste link para ver os tipos de regras que podem ser definidas

atualmente já existe um comando lint: css que usa mais bonito. Podemos alterá-lo para usar stylelint.

De qualquer forma, eu o instalei e ele detecta erros com base no conjunto de regras. Devo abrir um PR?

Não há necessidade de remover mais bonito, mais bonito tem configuração para regras de stylelint que você pode usar para estender o arquivo de configuração mais bonito

Impressionante. Vou trabalhar nisso amanhã.

Não achei a configuração mais bonita para as regras do stylelint (ou como fazer isso), mas atualmente instalei outro pacote stylelint-config-mais bonito que verificará se há conflitos e desativará todas as regras que entrarem em conflito.

O que estou pensando está no comando lint: css , também podemos executar o comando stylelint junto com o mais bonito

(Opinião) Acho que podemos escrever todas as regras de stylelint personalizadas com base no que faz sentido para o fcc, e até mesmo remover completamente o mais bonito. Esta é apenas uma opinião, cabe a vocês decidir.

Obrigado @ManasMahanand pelo seu progresso. Estou marcando @ojeytonwilliams para uma segunda opinião.

Acho que o mais bonito faz um bom trabalho com a formatação, então prefiro mantê-lo. Se usarmos https://github.com/prettier/stylelint-prettier , mais bonito é usado como um plugin de stylelint e obteremos o melhor dos dois mundos.

Isso reflete a abordagem que já usamos para linting de JavaScript.