Freecodecamp: Erstellen des CSS-Styleguides von freeCodeCamp

@raisedadead Was denkst du?

Danke, wissen Sie, wie diese fusseln können? Verwenden Sie irgendwelche Linters?

@raisedadead @tomasvn Meiner Meinung nach wird der Prozess des Erstellens eines CSS- Prettier und andere ähnliche Erweiterungen für ihre CSS-Formatierung.

Anstatt einen Styleguide zu erstellen. Wir sollten unseren Mitwirkenden sagen, dass sie Prettier in ihrem IDE / Code-Editor installieren sollen, und wir können loslegen.
@raisedadead Gedanken dazu?

Danke, wissen Sie, wie diese fusseln können? Verwenden Sie irgendwelche Linters?

Schöner funktioniert gut;). Es warnt Sie, wenn Sie gegen eine CSS-Stilregel verstoßen.

Anstatt einen Styleguide zu erstellen. Wir sollten unseren Mitwirkenden sagen, dass sie Prettier in ihrem IDE / Code-Editor installieren sollen, und wir können loslegen.

Sich vor Problemen zu verstecken hat niemandem geholfen ... 😅!

Ich bin stark dafür, Formatierer zu vermeiden und stattdessen Linters zu verwenden. Die Automatisierung klingt cool und einfach, aber sie nimmt den entscheidenden Punkt beim Schreiben von Standardcode weg.

IMHO, wir als Community rund ums Lernen sollten nicht davor zurückschrecken, Probleme im Codestil zu beheben, auf die Linters hinweisen.

Bitte beachten Sie auch, dass Prettier ein _Opinionated_ Code Formatierer ist

Meiner Meinung nach wird der Prozess der Erstellung eines CSS-Styleguides und dessen Einhaltung langfristig keine nützlichen Ergebnisse bringen.

Ich denke, dies ist ein falsches Argument (zögern Sie nicht, mir das Gegenteil zu beweisen, wenn Sie Statistiken haben).

Wenn Sie den Airbnb JS-Styleguide, JS Standard usw. überprüfen, haben sie einen Helfer, der Standardcode schreibt, und werden täglich von Tausenden von Unternehmen und Entwicklern verwendet.

@raisedadead Wir verstecken uns nicht vor Problemen ...! Wir können Linters verwenden, aber die gleiche Aufgabe kann mit einer einzigen Schlüsselbindung mit Prettier erledigt werden. Warum versuchen wir also, einen langen Lauf darauf zu machen?

Ich denke, dies ist ein falsches Argument (zögern Sie nicht, mir das Gegenteil zu beweisen, wenn Sie Statistiken haben).
Wenn Sie den Airbnb JS-Styleguide, JS Standard usw. überprüfen, lassen Sie den Helfer Standardcode schreiben und werden täglich von Tausenden von Unternehmen und Entwicklern verwendet.

Da stimme ich Ihnen voll und ganz zu! Ihre JS Style Guides sind wirklich sehr hilfreich.

Wir verstecken uns nicht vor Problemen ...! Wir können Linters verwenden, aber die gleiche Aufgabe kann mit einer einzigen Schlüsselbindung mit Prettier erledigt werden. Warum versuchen wir also, einen langen Lauf darauf zu machen?

Weil wir Standardcode schreiben wollen? Es steht den Mitwirkenden frei, beliebige Tools zu verwenden, aber das bedeutet nicht, dass wir keinen Leitfaden benötigen.

Wie auch immer, lassen Sie uns diesen Thread für konstruktives Feedback zum Leitfaden behalten, wir können stattdessen immer Diskussionen im Chat führen.

@tomasvn RFC sieht interessant aus, und da Sie an dem Feedback interessiert sind, glauben Sie, dass Sie einige etablierte Styleguides und Tools nachschlagen können, von denen wir uns inspirieren lassen können.

Weil wir Standardcode schreiben wollen? Es steht den Mitwirkenden frei, beliebige Tools zu verwenden, aber das bedeutet nicht, dass wir keinen Leitfaden benötigen.

Ich bin auch bei dir. Okay, lass uns mit einem Styleguide gehen und wir können

@raisedadead stylelint scheint in Ordnung zu sein 👍 Wie es den Mitwirkenden vor Inkonsistenzen in seinem Dokument warnen würde

@tomasvn Wir haben gerade unsere neue Lehrplan- und Lernplattform gestartet. Sind Sie immer noch daran interessiert, dabei zu helfen?

Alle unsere CSS benötigen einen guten Refactor, und dies wäre eine gute Gelegenheit, nicht nur einen Styleguide zu erstellen, sondern ihn auch umzudrehen und sofort auf das Projekt anzuwenden und sicherzustellen, dass alle unsere Repos dem entsprechen.

@QuincyLarson Sicher, ich kann mir etwas Zeit nehmen und Ihnen bei der Überarbeitung des CSS helfen, da das Freecodecamp eine ziemlich große Codebasis ist. Zeigen Sie mir einfach, wo ich anfangen soll

@tomasvn Das wäre

freeCodeCamp hat nicht so viel CSS. Das CSS von freeCodeCamp befindet sich hauptsächlich in "main.less". Und wir verwenden Bootstrap 3.0.

Möglicherweise wechseln wir zu Bootstrap 4.0 oder schreiben unser CSS neu, um Flexbox zu verwenden. Derzeit verwenden wir React Bootstrap für einige unserer Anwendungen, und das ist derzeit an Bootstrap 3.0 gebunden. Ich empfehle daher, einfach das vorhandene benutzerdefinierte CSS in main.less zu bereinigen und es weniger redundant und logischer zu gestalten.

@QuincyLarson hat es verstanden und die Datei main.less befindet sich in client / less / main.less. Ist dies die richtige Datei?

@tomasvn Danke für deine Geduld - ich habe das gerade gesehen. Ja - client / less / main.less sollte die richtige Datei sein.

@tomasvn Benötigen Sie Hilfe dabei? Ich werde gerne dazu beitragen

@tomasvn hattest du schon die @borisyordanov Ja - wir würden uns über Ihre Beiträge

@borisyordanov Entschuldigung für die Verzögerung, sicher, ich habe einige Probleme beim Ausführen von dev env unter Windows, damit Sie beginnen können. Wenn ich meine Probleme

@tomasvn Ich habe dir eine E-Mail geschickt, den Leitfaden durchzugehen, falls Sie dies noch nicht getan haben, oder um Hilfe zu Gitter zu bitten

Wenn es noch nötig ist, kann ich Ihnen dabei helfen

@ Jgriebel1990 Ich konnte mich nicht mit Tomasvn in Verbindung setzen, daher wurden meines Wissens keine Fortschritte erzielt. Fühlen Sie sich frei zu übernehmen

@ jgriebel1990 zögern Sie nicht zu übernehmen, ich konnte meine Kopie nicht auf Windows-Maschine zum Laufen bringen, alles was ich tun kann, ist eine Codeüberprüfung, sobald Sie fertig sind

@tomasvn es hört sich so an, als hätten @ Jgriebel1990 und @borisyordanov keine Chance bekommen, dies in Angriff zu nehmen - sind Sie immer noch daran interessiert, dabei zu helfen?

@QuincyLarson Ich werde versuchen, es unter Windows zum Laufen zu bringen. Ich habe immer noch Probleme beim Ausführen. Wenn ich meine Umgebung nicht festlegen kann, schließen Sie einfach den Thread.

@tomasvn Keine Sorge - haben Sie Glück, dass es lokal ausgeführt wird?

Siehe auch: https://github.com/freeCodeCamp/freeCodeCamp/issues/35081

@QuincyLarson Kein Glück, es lokal laufen zu lassen

@tomasvn Auf welche Probleme sind Sie beim lokalen Einrichten

@tomasvn Bitte lesen Sie dies - https://github.com/freeCodeCamp/freeCodeCamp/blob/master/docs/how-to-setup-freecodecamp-locally.md

@raisedadead Wird dieses Problem bei den Updates für https://github.com/freeCodeCamp/design-style-guide benötigt?

Es ist mehr auf der Roadmap. Letztendlich wird es die zentrale Ressource für unsere UI-Komponenten sein.

CSS-Rahmenstil
Die Eigenschaft border-style gibt an, welche Art von Rahmen angezeigt werden soll.

Folgende Werte sind zulässig:

gepunktet - Definiert einen gepunkteten Rand
gestrichelt - Definiert einen gestrichelten Rand
solid - Definiert einen festen Rand
double - Definiert einen doppelten Rand
Rille - Definiert einen 3D-Rillenrand. Der Effekt hängt vom Wert der Rahmenfarbe ab
Grat - Definiert einen 3D-Rand. Der Effekt hängt vom Randfarbwert ab
Einschub - Definiert einen 3D-Einschubrand. Der Effekt hängt vom Randfarbwert ab
Anfang - Definiert einen 3D-Anfangsrand. Der Effekt hängt vom Wert der Rahmenfarbe ab
none - Definiert keinen Rand
versteckt - Definiert einen versteckten Rand
Die Eigenschaft im Rahmenstil kann einen bis vier Werte haben (für den oberen Rand, den rechten Rand, den unteren Rand und den linken Rand).

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

Hallo! Wie ist der Fortschritt dabei? Ich stehe zur Verfügung, um zu helfen!

@ManasMahanand , danke für dein Interesse.
Es wäre großartig, wenn Sie sich die verfügbaren CSS-Linters ansehen, sie vergleichen und herausfinden könnten, ob es etwas Besseres als Stylelint gibt.
Fügen Sie dann den Linter zu unserem Repo hinzu und ändern Sie die CSS-Dateien, um sicherzustellen, dass das Repo fehlerfrei ist.

@ Madabdolsaheb wird tun!

@ahmadabdolsaheb Warten Sie, was meinen Sie zum Repo hinzufügen?

Soll ich den Linter als Abhängigkeit installieren, wie eslint bereits ist?

Oder gibt es eine Möglichkeit, Tests auf Github selbst zu installieren, sodass das Zusammenführen nur möglich ist, wenn der Styleguide befolgt wird?

Ok, es sieht so aus, als wäre Stylelint selbst eine gute Option. Ich installiere das.

Zum Experimentieren werde ich Regeln festlegen, wie von OP vorgeschlagen. Ich werde dann alle Regeln entfernen und einen PR öffnen. Wir können dann Regeln diskutieren und festlegen

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

Sie können sich diesen Link ansehen, um die Arten von Regeln zu sehen, die festgelegt werden können

Derzeit gibt es bereits einen Befehl lint: css , der hübscher verwendet. Wir können es ändern, um Stylelint zu verwenden.

Wie auch immer, ich habe es installiert und es erkennt erfolgreich Fehler basierend auf festgelegten Regeln. Soll ich eine PR eröffnen?

Prettier muss nicht entfernt werden. Prettier verfügt über eine Konfiguration für Stylelint-Regeln, mit denen Sie die Prettier-Konfigurationsdatei erweitern können

Genial. Werde morgen daran arbeiten.

Ich habe keine schönere Konfiguration für Stylelint-Regeln gefunden (oder wie das geht), aber derzeit habe ich ein anderes Paket stylelint-config-prettier installiert, das nach Konflikten sucht und alle Regeln deaktiviert, die Konflikte verursachen.

Was ich denke, ist in lint: css Befehl können wir den stylelint Befehl zusammen mit hübscher auch ausführen

(Meinung) Ich bin der Meinung, dass wir alle benutzerdefinierten Stylelint-Regeln basierend auf dem, was für fcc sinnvoll ist, schreiben und sogar hübscher entfernen können. Dies ist nur eine Meinung, es bleibt euch überlassen, zu entscheiden.

Vielen Dank an @ManasMahanand für Ihre Fortschritte. Ich tagge @ojeytonwilliams für eine zweite Meinung.

Ich denke, hübscher macht einen guten Job mit der Formatierung, also würde ich das lieber behalten. Wenn wir https://github.com/prettier/stylelint-prettier verwenden, wird prettier als Plugin für Stylelint verwendet und wir erhalten das Beste aus beiden Welten.

Dies spiegelt den Ansatz wider, den wir bereits für JavaScript-Flusen verwenden.