Haben Sie sich jemals Sorgen gemacht, dass Sie CSS falsch angehen? Dass Sie einen neuen Ansatz verpassen, der alles einfacher und besser macht? Dass Sie sich mehr Sicherheit über den Zustand Ihres CSS wünschen?
Ich bin sicher, wir können alle Annas Gefühl hier nachvollziehen
Mein CSS ist voller Selbstzweifel. Welches Klassennamensystem ist heute Best Practice und ist der Kaskadengewinn oder -verlust diese Woche?
— Anna Debenham (@anna_debenham) 13. November 2014
Ich mache mir Sorgen um Sie, wenn Sie viel mit CSS arbeiten und das nie gefühlt haben. Entweder sind Sie beängstigend schlau oder, wissen Sie schon.
Hier ist, wie ich heutzutage versuche, CSS anzugehen: versuchen Sie einfach, gute Arbeit zu leisten. Ich abonniere keine spezifischen Methodologien oder strenge Regeln. Eher eine Reihe von lockeren Richtlinien, die versuchen, die Dinge unter Kontrolle zu halten, zusammengehalten von der Idee, dass ich aktiv versuche, gute Arbeit zu leisten.
Vorbehalt: Das ist nur meine Meinung. Ich arbeite hauptsächlich an Projekten, bei denen hauptsächlich ich das CSS anfasse. Das trifft laut der letzten Umfrage hier auch auf 55 % von Ihnen zu. Ich würde spekulieren, dass je mehr Leute Sie zusammenarbeiten, desto mehr profitieren Sie von strengeren Regeln, als ich sie einhalte.
Hier ist eine kleine Erläuterung zu „versuchen Sie einfach, gute Arbeit zu leisten“
Seien Sie nicht faul. *Sie* wissen, wann *Sie* bei etwas faul sind. Damit meine ich, dass Sie eine schnelle Lösung für etwas anwenden, anstatt zu versuchen, das Problem zu verstehen. Oder Sie packen etwas CSS in die Datei, die gerade bequem erscheint, anstatt darüber nachzudenken, wohin es am besten gehört. Oder Sie vermeiden es, ein neues Muster zu erstellen, obwohl es klar ist, dass die Situation danach verlangt. Oder Sie verwenden weiterhin ein Muster, das Sie behindert. Schlafen Sie darüber. Überstürzen Sie nichts. Machen Sie es richtig.
Machen Sie die Dinge so, wie *Sie* sie machen würden. Wissen Sie was? Ich mag die leichte Verwendung von Kindselektoren in Modulen. .module > h2 spricht mich oft an. Bestimmte strenge Methodologien würden dem widersprechen. Das ist mir egal. Ich werde es weiterhin tun, bis es tatsächlich negative Folgen hat, was bisher nicht der Fall war. Wenn doch, werde ich es ändern, weil siehe oben.
Nennen Sie die Dinge, wie Sie sie nennen würden. Wenn ich einer Methodologie erlaube, mir zu sagen, wie ich Dinge benennen soll, kenne ich mich: Mein Verstand beginnt, einen Putsch zu inszenieren. Ich spiele vielleicht ein oder zwei Tage mit, bis ich die Methodologie abbreche und wieder die volle Kontrolle übernehme. Bei Projekten, die vollständig nach meiner WWINTT (What Would I Name This Thing? / Wie würde ich das nennen?) Strategie aufgebaut sind, fühle ich mich am wohlsten und bin am effizientesten.
Verwenden Sie Werkzeuge, die für Sie eindeutig nützlich sind. Ich werde keine Werkzeuge nennen, da es hier nicht darum geht. Wenn ich ein Werkzeug identifizieren kann, das klare Vorteile für mich hat, werde ich es verwenden. Es kann Zeit sparen, bessere Ergebnisse liefern, eine bessere Organisation ermöglichen, ein Leistungsproblem lösen, eine Best Practice automatisieren, was auch immer. Ich bin dabei.
Das einzige „regelähnliche“, an das ich wirklich glaube: Halten Sie Ihre Selektorspezifitäten in Ihrem gesamten Projekt ziemlich niedrig und flach. Harrys Spezifitätsdiagramm ist eine gute Möglichkeit, darüber nachzudenken. Die Spezifität wird nach oben tendieren, also fangen Sie nie hoch an, da die Decke leicht problematisch werden kann. Hauptsächlich: .class {}.
Überarbeiten Sie gezielt Bereiche Ihrer Website. Wahrscheinlich nicht *nur*, weil Sie das CSS dort aufräumen möchten, sondern weil Sie diesen Bereich Ihrer Website für alle *besser* machen möchten. Ich stelle fest, dass jedes Mal, wenn ich einen Bereich überarbeite, dies eine Gelegenheit ist, den gesamten Code aufzuräumen, der ihn betrifft. Das hilft mir, mich mit altem Code verbunden zu fühlen und weniger Angst davor zu haben.
Ich denke, es ist einfach, so über alle Arten von Webtechnologien zu denken, nicht nur über CSS. Ich führe auch ständig diese Debatten mit mir selbst, wenn es um HTML, PHP, jQuery usw. geht. In gewisser Weise ist es eine gesunde Denkweise, weil es bedeutet, dass Sie akzeptieren, dass Sie nicht perfekt sind und immer besser werden können. Sie können sich auch in dem Wissen freuen, dass es mit ziemlicher Sicherheit jemanden da draußen gibt, der einen schlechteren Job macht als Sie!
Andererseits kann es einen verrückt machen, oft weil man versucht, eine Technologie zu perfektionieren, die an sich schon unvollkommen ist.
Ich denke, das Wichtigste ist, dass Sie konsequent bleiben. Wenn Sie die Dinge auf eine bestimmte Weise tun, versuchen Sie, diese Konvention durchgängig beizubehalten und nicht ständig zu wechseln.
Das ist der vernünftigste Artikel, den ich je gelesen habe.
Chris, großartiger Artikel. Es ist diese Art von bodenständigem, vernünftigem, anwendbarem Rat, die mich jeden Tag auf Ihre Website zurückkehren lässt. Dieser hier ist besonders hilfreich für mich, weil ich mich oft darin verliere, wie ich etwas tun „sollte“, und vergesse, mich zu fragen, ob es für mich sinnvoll ist, es zu tun.
Das brauchte ich gerade, und nicht nur für CSS. Ich versuche, eine Website für die Produktion zu verpacken, und für jede Entscheidung, die ich getroffen habe, habe ich online gesucht, um herauszufinden, ob ich es „auf die empfohlene Weise“ gemacht habe, wie andere es getan haben, wie Leute was benannt haben, mich gnadenlos selbst bezweifelt und mich wahnsinnig gemacht, Dinge immer wieder zu ändern, obwohl sie schon in Ordnung waren. Es ist ein schrecklicher Kreislauf. Ich versuche, mehr auf mein Bauchgefühl zu hören.
Tolle Punkte rundherum. Ich möchte jedoch sagen, dass der Ansatz „Nennen Sie die Dinge, wie Sie sie nennen möchten“ nur unter den idealsten Bedingungen funktioniert, wenn eine Person hauptsächlich für die Erstellung neuer Module und Elemente verantwortlich ist.
Sobald ich die Namensgebung mit mehreren Personen koordinieren musste, war es sofort klar, dass ich eine Art System einführen musste, sei es BEM oder etwas anderes. Ich bin vielleicht der Einzige, der mein CSS anfasst, aber ich bin nicht der Designer – der letztendlich dafür verantwortlich ist, was jedes Teil tut, und oft, wie es genannt wird.
Bei einem großen Projekt, das mehrere Phasen von Designüberarbeitungen durchläuft, wurde dies zu einem so großen Problem, dass ich glaube, ich würde kein neues Projekt mehr angehen, ohne zuerst zumindest lose Richtlinien festzulegen.
Das ist besonders interessant, da man denken könnte, dass Sie als CSS-Guru ein Verfechter von Konventionen wären. Ich hoffe, es hilft den Leuten, sich bei diesen neuen Ansätzen zu entspannen und ihren Geist zu öffnen.
Nun, er arbeitet meistens allein an den CSS-Teilen, also kann er sich das leisten. Die meisten von uns arbeiten in Teams, wo strenge Regeln ein Muss sind. Wir können uns nicht erlauben, so entspannt zu sein.
Ich stimme Ihnen zu. Allerdings glaube ich nicht, dass es darum geht, Konventionen zu vermeiden, sondern darum, aufgeschlossen zu bleiben. Sie sollten sich nicht verbieten, Kindselektoren zu verwenden, nur weil Sie gelesen haben, dass es eine schlechte Praxis ist oder nicht BEM-ähnlich ist.
Toller Beitrag. Das beginne ich selbst zu glauben... Nach jedem Projekt schaue ich mir den Code an und trete mir selbst in den Hintern, weil ich diese neue Technik nicht implementiert oder diese neue „Regel“ nicht befolgt habe.
Ich denke, wenn wir alle über Trends auf dem Laufenden bleiben und unser Bestes tun, um unseren Code sauber und modular zu halten, kämpfen wir bereits den Kampf bergauf.
Hallo Chris, im Abschnitt „Machen Sie die Dinge so, wie Sie sie machen würden.“ gibt es hier einen Tippfehler: „I’m don’t really care“. Toller Artikel und ich teile dieselben Gefühle beim Schreiben meines CSS.
Danke! Habe diesen Tippfehler gerade behoben. Freut mich, dass Ihnen der Artikel von Chris gefallen hat =)
Ist das eine gute Praxis für freiberufliche Entwickler? Für geschlossene Projekte? Wenn man nicht möchte, dass jemand einfach seine harte Arbeit kopiert/einfügt?
Verstehen Sie mich nicht falsch, ich bin nicht gegen Annas Standpunkt, ich kann mich nur nicht entscheiden, was wichtiger ist... Wenn ich zu meinem Code zurückkehre, ist es nicht so schnell zu erinnern, wofür eine Klasse war, am Ende finde ich sie – aber ich fange an zu denken, dass es eine große Zeitverschwendung ist. Irgendwelche Vor- oder Nachteile meiner Sichtweise Ihrer Meinung nach? Ich weiß, dass viele Entwickler ähnlich denken.
Toller Artikel, vielen Dank für das Schreiben. Ich bin mehr als schuldig, Methodologien stundenlang in einer Ein-Mann-Situation zu diskutieren.
Danke, Chris. Artikel wie diese sind wie ein Atemzug frischer Luft. Manchmal müssen wir gesagt bekommen, wir sollen uns einfach entspannen. Ich vergesse oft, dass es keine „Code-Polizei“ gibt, die mich verhaftet, wenn ich etwas falsch mache oder etwas anders mache als jemand anderes.
Danke für diesen wunderbaren Artikel, er bringt mich wieder auf Kurs :)
Guter Artikel. Das ergibt Sinn, wenn man alleine arbeitet…
Vielen Dank für die Veröffentlichung dieses Artikels. Es gibt jeden Tag so viele neue Techniken, dass es schwer ist zu wissen, was „das Beste“ ist… das ist ein großartiger Rat.
Danke Chris für diesen interessanten Artikel.
Genauso wie meine. Meine Regeln drehen sich alle um Wartbarkeit. Nichts stört mich mehr als alter Code, der in einem angesagten Stil geschrieben wurde, den ich vergessen habe. KISS
Für mich hat das Erlernen von SASS mir sehr geholfen, die meisten der im Tweet erwähnten Probleme zu mildern. Sobald Sie sich mit CSS wohlfühlen, ist der nächste natürliche Schritt, einen Präprozessor in den Workflow zu integrieren. Bisher hat es für mich funktioniert.
Nun, Chris, irgendwie haben Sie Recht in diesem Sinne. Aber warum machen wir CSS, wenn wir gute Arbeit leisten müssen ;) Ich hoffe, Sie verstehen.
Ein guter Artikel. Die Verwendung einer Methodologie hilft bei der Erstellung größerer und skalierbarer Systeme, aber manchmal steht sie einfach der Lösung eines Problems im Wege. Wenn ich etwas Komplexeres produziere, verwende ich immer das etwas lockere BEM und nutze Sass für die Verwaltung des CSS. Beim Erstellen einer einfachen 404-Seite oder einer einfachen One-Pager verwende ich normales Nisting, Elementselektoren und ähnliches, kein Bedarf, einfache Dinge zu strukturieren, wenn sie jederzeit in ihrem Lebenszyklus leicht umgeschrieben werden können. Bei der Arbeit in Teams sollten bestimmte Regeln und gute Praktiken gelten.
Dann lesen Sie um Himmels willen nicht Adaptive Web Design – ich bin erst auf Kapitel 2 und wir haben HTML noch nicht verlassen. Ich lerne so viele Markup-Elemente kennen, die ich vorher nie verstanden habe. Es ist wie eine riesige, komprimierte Dosis „Sie machen es falsch“. Ich denke, das ist gesund, und ich werde nicht *alles* aus diesem Buch übernehmen, aber es ist demütigend zu wissen, wie viel ich in der Vergangenheit einfach übersprungen habe.
Kapitel 3 ist CSS und ich bin nervös…
Nichts ist schlimmer, als zu einer Website zurückzukehren, die man vor 2 oder 3 Jahren gemacht hat, und zu sagen: „Was zur Hölle habe ich mir dabei gedacht?“
Ich halte mich einfach daran: „Validiert es?“ und lebe so.
Kindselektoren machen Sinn, wenn sie Sinn machen (das geht zurück auf die allgegenwärtige Regel „es kommt darauf an“). Möchten Sie die H2s auswählen, die sich in den Elementen mit der Klasse „module“ befinden, *weil* sie sich in den Elementen mit der Klasse „module“ befinden? Dann verwenden Sie
.module > h2. Diese Taktik macht tatsächlich Sinn. Die Regeln von CSS machen Sinn, aber das bedeutet nicht, dass sie alle immer verwendet werden müssen, aber *das* bedeutet nicht, dass einige Regeln niemals verwendet werden sollten, nur weil eine bestimmte Person keinen guten Grund dafür sieht.CSS ist eine Sache, in der ich nicht gut bin. Ich bin gerade dabei zu lernen und werde Ihre Tipps auf jeden Fall berücksichtigen. Ich bin froh, dass ich sie gefunden habe, bevor ich ein Projekt beginne. Danke fürs Teilen.