Freecodecamp: Création du guide de style CSS de freeCodeCamp

@raisedadead Que pensez-vous?

Merci, savez-vous qu'il est possible de les pelucher? Vous utilisez des linters?

@raisedadead @tomasvn Selon moi, le processus de création d'un guide de style CSS et de s'y tenir ne donnera pas à long terme des résultats utiles. React, Yarn, Babel et beaucoup d'autres projets open source utilisent Prettier et d'autres extensions similaires pour leur formatage de style CSS.

Au lieu de créer un guide de style. Nous devrions dire à nos contributeurs d'installer Prettier Dans leur éditeur IDE / Code et nous serons prêts à partir.
@raisedadead Pensées à ce sujet?

Merci, savez-vous qu'il est possible de les pelucher? Vous utilisez des linters?

Prettier fonctionne bien;). Il vous avertit lorsque vous enfreignez une règle de style CSS.

Au lieu de créer un guide de style. Nous devrions dire à nos contributeurs d'installer Prettier dans leur éditeur IDE / Code et nous serons prêts à partir.

Se cacher des problèmes n'a jamais aidé personne ... 😅!

Je suis fortement en faveur d'éviter les formateurs et d'utiliser des linters à la place. Automatiser les choses semble cool et facile, mais cela enlève le point clé de l'écriture de code standard.

À mon humble avis, nous sommes la communauté autour de l'apprentissage ne devrait pas hésiter à résoudre les problèmes dans le style de code pointé par des linters, plutôt.

Veuillez également noter que Prettier est un formateur de code _Opinionated_

Selon moi, le processus de création d'un guide de style CSS et de s'y tenir ne donnera pas à long terme des résultats utiles.

Je pense que c'est un argument incorrect (n'hésitez pas à me prouver le contraire si vous avez des statistiques).

Si vous consultez le guide de style Airbnb JS, JS Standard, etc., ils ont un assistant pour écrire du code standard et sont utilisés par des milliers d'entreprises et de développeurs tous les jours.

@raisedadead Nous ne nous

Je pense que c'est un argument incorrect (n'hésitez pas à me prouver le contraire si vous avez des statistiques).
Si vous consultez le guide de style Airbnb JS, JS Standard, etc., ils ont un assistant d'écriture de code standard et sont utilisés par des milliers d'entreprises et de développeurs chaque jour.

Je suis tout à fait d'accord avec vous là-dessus! Leurs guides de style JS sont vraiment très utiles.

Nous ne nous cachons pas des problèmes ...! Nous pouvons utiliser des linters, mais la même tâche peut être effectuée avec une seule liaison de clé avec Prettier, alors pourquoi essayons-nous de faire un long parcours?

Parce que nous voulons écrire du code standard? Les contributeurs sont libres d'utiliser tous les outils qu'ils aiment, mais cela ne nous oblige pas à ne pas avoir besoin d'un guide.

Quoi qu'il en soit, gardons ce fil pour des commentaires constructifs sur le guide, nous pouvons toujours avoir des discussions dans le chat à la place.

@tomasvn RFC semble intéressant, et puisque vous êtes intéressé par les commentaires, pensez-vous qu'il vous sera possible de rechercher des guides de style et des outils établis dont nous pouvons nous inspirer.

Parce que nous voulons écrire du code standard? Les contributeurs sont libres d'utiliser tous les outils qu'ils aiment, mais cela ne nous oblige pas à ne pas avoir besoin d'un guide.

Je suis avec toi aussi. D'accord, allons-y avec un guide de style et nous pouvons utiliser stylelint comme linter.

@raisedadead stylelint semble bien 👍 Comme cela avertirait le contributeur des incosistances dans son document

@tomasvn Nous venons de lancer notre nouveau programme et plateforme d'apprentissage. Êtes-vous toujours intéressé à aider avec cela?

Tous nos CSS ont besoin d'un bon refactor, et ce serait une bonne opportunité non seulement de créer un guide de style, mais de faire demi-tour et de l'appliquer immédiatement au projet, et de s'assurer que tous nos dépôts sont conformes à celui-ci.

@QuincyLarson Bien sûr, je peux prendre un peu de mon temps et vous aider à refactoriser le CSS, car le freecodecamp est une base de code assez volumineuse, indiquez-moi simplement par où commencer

@tomasvn Ce serait incroyable!

freeCodeCamp n'a pas beaucoup de CSS. Le CSS de freeCodeCamp est principalement situé dans "main.less". Et nous utilisons Bootstrap 3.0.

Nous pouvons éventuellement passer à Bootstrap 4.0 ou simplement réécrire notre CSS pour utiliser Flexbox. Mais pour le moment, nous utilisons React Bootstrap sur plusieurs de nos applications, et qui est actuellement verrouillé sur Bootstrap 3.0. Je recommande donc de simplement nettoyer le CSS personnalisé existant dans main.less et de le rendre moins redondant et plus logiquement organisé.

@QuincyLarson l'a compris, et le main.less se trouve dans client / less / main.less, est-ce le bon fichier?

@tomasvn Merci pour votre patience - je viens de voir ceci. Oui - client / less / main.less devrait être le bon fichier.

@tomasvn Besoin d'aide avec ça? Je serai heureux de contribuer

@tomasvn avez-vous déjà eu la chance de commencer à travailler là-dessus? Sinon, @borisyordanov Oui - nous serions

@borisyordanov désolé pour le retard, bien sûr, allez-y J'ai des problèmes pour exécuter dev env sur Windows, donc vous pouvez commencer, quand je corrige mes affaires, je peux vous aider à le refactoriser

@tomasvn Je vous ai envoyé un e-mail, rencontrons-nous dans une discussion et planifions cela. Si vous rencontrez des difficultés pour exécuter le projet, je vous recommande de parcourir le guide si vous ne l'avez pas déjà fait ou de demander de l'aide sur Gitter

S'il y a encore besoin, je peux vous aider

@ Jgriebel1990 Je

@ jgriebel1990, n'hésitez pas à prendre le relais, je n'ai pas pu faire fonctionner ma copie sur une machine Windows, tout ce que je peux faire est une révision du code une fois que vous avez terminé

@tomasvn on dirait que @ Jgriebel1990 et @borisyordanov n'ont pas eu l'occasion de s'attaquer à cela - êtes-vous toujours intéressé à aider avec cela?

@QuincyLarson J'essaierai de le faire fonctionner sur Windows, j'ai encore des problèmes pour l'exécuter.Si je ne parviens pas à configurer mon environnement, fermez simplement le fil.

@tomasvn Pas de soucis - une chance de le faire fonctionner localement?

En relation: https://github.com/freeCodeCamp/freeCodeCamp/issues/35081

@QuincyLarson Pas de chance, exécutez-le localement

@tomasvn quels problèmes avez-vous rencontrés lors de la configuration locale.

@tomasvn Veuillez lire ceci - https://github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/how-to-setup-freecodecamp-locally.md

@raisedadead Avec les mises à jour de https://github.com/freeCodeCamp/design-style-guide , ce problème est-il nécessaire?

C'est plus sur la feuille de route. À terme, ce sera la ressource centrale pour nos composants d'interface utilisateur.

Style de bordure CSS
La propriété border-style spécifie le type de bordure à afficher.

Les valeurs suivantes sont autorisées:

pointillé - Définit une bordure pointillée
dashed - Définit une bordure en pointillés
solide - Définit une bordure solide
double - Définit une double bordure
rainure - Définit une bordure rainurée 3D. L'effet dépend de la valeur de la couleur de la bordure
ridge - Définit une bordure striée 3D. L'effet dépend de la valeur de la couleur de la bordure
inset - Définit une bordure d'insertion 3D. L'effet dépend de la valeur de la couleur de la bordure
outset - Définit une bordure de départ 3D. L'effet dépend de la valeur de la couleur de la bordure
none - Ne définit aucune bordure
hidden - Définit une bordure cachée
La propriété de style de bordure peut avoir de une à quatre valeurs (pour la bordure supérieure, la bordure droite, la bordure inférieure et la bordure gauche).

EXEMPLE-
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;}

Hey! Quel est le progrès à ce sujet? Je suis disponible pour vous aider!

@ManasMahanand , merci de votre intérêt.
Ce serait formidable si vous pouviez examiner les linters css disponibles, les comparer et voir s'il y a quelque chose de mieux que stylelint.
Ensuite, ajoutez le linter à notre référentiel et modifiez les fichiers CSS pour vous assurer que le référentiel est sans erreur.

@madabdolsaheb fera l'affaire!

@ahmadabdolsaheb Attendez que voulez-vous dire ajouter au repo?

Voulez-vous que j'installe le linter en tant que dépendance, comme eslint l'est déjà?

Ou existe-t-il un moyen d'installer des tests sur github lui-même, de sorte qu'il n'autorisera pas la fusion à moins que le guide de style ne soit suivi?

Ok, on dirait que stylelint est une bonne option en soi. J'installe ça.

Pour expérimenter, je vais définir des règles comme suggéré par OP. Je supprimerai alors toutes les règles et ouvrirai un pr. Nous pouvons ensuite discuter et fixer des règles

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

Vous pouvez consulter ce lien pour voir les types de règles qui peuvent être définies

actuellement, il existe déjà une commande lint: css qui utilise plus joli. Nous pouvons le changer pour utiliser stylelint.

Quoi qu'il en soit, je l'ai installé et il détecte avec succès les erreurs en fonction des règles définies. Dois-je ouvrir un PR?

Pas besoin de supprimer plus joli, plus joli a une configuration pour les règles stylelint que vous pouvez utiliser pour étendre le fichier de configuration plus joli

Impressionnant. J'y travaillerai demain.

Je n'ai pas trouvé de configuration plus jolie pour les règles stylelint (ou comment faire cela), mais actuellement, j'ai installé un autre paquet stylelint-config-plus joli qui vérifiera les conflits et désactivera toutes les règles qui sont en conflit.

Ce que je pense, c'est dans la commande lint: css, nous pouvons également exécuter la commande stylelint avec plus jolie

(Opinion) Je pense que nous pouvons écrire toutes les règles de stylelint personnalisées en fonction de ce qui a du sens pour fcc, et même supprimer complètement les plus jolies. Ce n'est qu'une opinion, c'est à vous de décider.

Merci @ManasMahanand pour vos progrès. Je tague @ojeytonwilliams pour un deuxième avis.

Je pense que plus joli fait du bon travail avec le formatage, alors je préfère garder ça. Si nous utilisons https://github.com/prettier/stylelint-prettier, alors plus joli est utilisé comme plugin de stylelint et nous obtenons le meilleur des deux mondes.

Cela reflète l'approche que nous utilisons déjà pour le linting JavaScript.