Was CSS-Entwickler tun und warum Sie einen brauchen

CSS-Entwickler sind Webprofis, deren Hauptaufgabe darin besteht, dem Browser des Besuchers ein ausgefeiltes und gestyltes Produkt bereitzustellen. Praktisch jede Website verwendet CSS, aber CSS wird im modernen Webentwicklungs-Stack oft nicht als „gleichgestellt“ angesehen. Leider kann diese falsche Wahrnehmung dazu führen, dass CSS als selbstverständlich angesehen oder sogar bis zu einem gewissen Grad übersehen wird.

Nicht-CSS-Entwicklern zu erlauben, mit CSS umzugehen, führt oft zur Einführung von CSS-Hacks und Fehlern in Ihrem Code und kann Entwickler unnötig frustrieren. In diesem Artikel möchte ich jeden mit den Aufgaben vertraut machen, damit Sie besser verstehen, warum jede Website einen zuverlässigen, professionellen CSS-Entwickler benötigt.

Was machen CSS-Entwickler?

Beginnen wir mit den Grundlagen. Warum ist CSS so wichtig und was genau sollen CSS-Entwickler tun?

CSS ist eine spezifische Sprache und kann als solche nicht alleine existieren. Es erfordert HTML, um Sinn zu machen. Das erste, was CSS-Entwickler tun, ist also, HTML-Code zu schreiben.

Ordentliches HTML zu schreiben ist immer wichtig

Das Schreiben von einfachem, sauberem und angemessen organisiertem HTML ist eine große Verantwortung, da das bescheidene HTML-Dokument das erste ist, was Sie Ihren Endbenutzern liefern.

Wenn Sie ein produktionsreifes HTML-Dokument schreiben, sollten Sie versuchen, alle erforderlichen und optionalen Tags in den Kopf des Dokuments aufzunehmen, um Ihre Website optimal zu nutzen. Ich spreche von der Einstellung des richtigen Dokumenttyps, der Sprache, Meta-Tags, Favicons, Ladetechniken und SEO.

Alles, was dazu beitragen könnte, Ihre Website leistungsfähiger und zugänglicher zu machen und Ihrem Publikum und Ihren Suchmaschinen sowie anderen Diensten und Tools mehr Aufmerksamkeit zu verschaffen. Der Hauptteil des HTML-Dokuments sollte auch nicht aufgebläht werden. Zu wissen, wann man semantische HTML-Tags verwendet, wie man erforderliche HTML-Attribute hinzufügt und wie man Deep-Nesting oder Divitis vermeidet, sollte nicht ignoriert, sondern von Beginn des Projekts an implementiert werden. Kein professioneller Entwickler fängt mitten im Projekt an, Best Practices zu befolgen, aber selbst scheinbar grundlegende Dinge wie HTML werden oft falsch gemacht.

Das Gesamtdesign bestimmt oft, wie wir verschiedene HTML-Komponenten organisieren. CSS-Entwickler arbeiten eng mit Designern zusammen, und nicht jeder Designer verwendet dasselbe Tool, um das Design bereitzustellen. Mit Sketch, Photoshop, InVision oder Figma vertraut zu sein und in der Lage zu sein, das Design zu „slicen“, sind unverzichtbare Fähigkeiten für CSS-Entwickler. Man sollte immer im Hinterkopf behalten, wie man ein Bauteil strukturiert, um gleichzeitig das Design anwenden zu können. Die Verwendung einer guten Namenskonvention wie BEM oder OOCSS sollte verhindern, dass aufgeblähter HTML- oder nicht wartbarer CSS-Code geschrieben wird.

JavaScript ist überall

Einige Komponenten sollten interaktiv sein, wie Modale oder Tooltips. Das erfordert oft ein gutes Verständnis von JavaScript, nicht „tiefes“ JavaScript, sondern JavaScript-Events und DOM-Handhabung. Die DOM-Handhabung könnte eine Herausforderung darstellen, da Sie die Ressourcen Ihrer Benutzer nicht erschöpfen und Ihre Website träge machen oder, noch schlimmer, zum Absturz bringen und vollständig nicht mehr reagieren möchten.

Die JavaScript-Welt entwickelt sich schnell und manchmal scheint es, als würden täglich neue Frameworks und Tools erscheinen. Aufgrund der immensen Popularität von JavaScript ist es entscheidend, auf dem Laufenden zu bleiben, wenn Sie die neuesten Best Practices verwenden und Endbenutzern die angenehmste Erfahrung bieten möchten.

CSS

Das gilt auch für CSS, obwohl viele argumentieren würden, dass es sich nicht annähernd so schnell entwickelt wie JavaScript. Neue Funktionen wie CSS-Variablen, CSS-Raster oder sogar Flexbox erfordern jedoch einige Zeit, um sie zu beherrschen.

Dann gibt es die Browserunterstützung, die auch heute noch ein Problem darstellen kann. Ihre Website mag in einem modernen Browser wie eine Million Dollar aussehen, aber nicht so sehr in älteren Browsern. Flexbox wird möglicherweise in IE11 unterstützt, funktioniert aber möglicherweise nicht wie erwartet. Zu wissen, wie man diese Probleme vermeidet, gehört zum Job eines CSS-Entwicklers.

Zum Glück ist die Community sehr hilfreich und Seiten wie Flexbugs oder Gridbugs können viel Zeit sparen.

CSS-Tools, -Techniken und -Prinzipien

Manchmal konnten wir uns auf Tools wie Task Runner oder Bundler wie Grunt, Gulp und Webpack verlassen, um zuverlässigen Code bereitzustellen. Sie könnten Ihren Code mit Linters, Minifiern, Babel oder PostCSS aufladen, um den Code zu transpilieren.

Dann müssen wir verschiedene Schriftarten, Typografie, Bilder, Symbole, Symbolschriften, Animationen, Übergänge und andere abstrakte Aspekte berücksichtigen, die Teil der täglichen Aufgaben von CSS-Entwicklern sind. Jedes einzelne Feature hat seine Besonderheiten, Einschränkungen, Probleme und Lösungen. Je mehr Funktionen und Techniken Sie beherrschen, desto einfacher ist es, Komponenten in Ihrem Projekt zu gestalten und zu implementieren.

Es gibt eine beträchtliche Anzahl von CSS-Eigenschaften und -Werten, und man kann nicht alles wissen. Glücklicherweise helfen uns unsere Tools dabei, insbesondere Code-Editoren und Entwicklungstools. Allerdings können auch Tools nicht helfen, Kopfschmerzen zu lösen, wenn Sie ein Z-Index-Problem lösen müssen. Scheitern ist die beste Art zu lernen.

Ich würde sagen, dass dies besonders für die Arbeit mit CSS gilt, und das ist der Grund:

Wenn Sie nie versucht haben, das Z-Index-Problem zu lösen, würden Sie nie etwas über das Stapeln von Kontext lernen. Wenn Sie noch nie versucht haben, die Bootstrap-Klasse zu überschreiben, würden Sie nie etwas über Spezifität lernen. Wenn Sie nie versucht haben, das Float-Problem zu beheben, würden Sie nie etwas über das Box-Modell erfahren.

Manchmal ist die Lösung einfach, aber nur eine Frage zu stellen ist schwierig. Im Vergleich zu anderen Sprachen kann man nicht fragen, warum meine Schleife nicht funktioniert. Sie brauchen den vollständigen Kontext, um das Problem in CSS zu lösen, und das ist oft etwas, was viele nicht verstehen: die Kaskade .

Cascade ist das beste Feature in CSS, und es sollte für Sie arbeiten, nicht gegen Sie. Einige Entwickler umgehen dies, indem sie benutzerdefinierte Ansätze wie CSS-in-JS erfinden. Wenn Sie Ihr CSS in die gekapselte Umgebung wie React packen, können Sie es nicht anderswo verwenden. Ich bezweifle, dass dies der Ansatz ist, den Sie für Ihre skalierbare Plattform wünschen. Wenn Sie Probleme mit der Kaskade haben, lernen Sie, sie anzunehmen, und lernen Sie dann, wie Sie sie zähmen.

Während ich diesen Artikel vorbereitete, schrieb Max Bock über die CSS-Denkweise, und genau das müssen CSS-Entwickler tun. CSS-Entwickler denken über den Tellerrand hinaus, sagen Inhaltsänderungen voraus und vermeiden, wann immer möglich, feste Zahlen, während sie versuchen, so wenig Code wie möglich zu schreiben, ohne Standardwerte und Kontext zu überschreiben.

Warum brauchen Sie einen CSS-Entwickler?

Die meisten Frontend- oder sogar Full-Stack-Entwickler könnten den CSS-Code schreiben. Aber nicht jeder von ihnen könnte jeden CSS-Fehler beheben oder das Design implementieren, ohne HTML-Code zu verkomplizieren oder sich auf JavaScript zu verlassen, wo es nicht notwendig ist.

Ein professioneller CSS-Entwickler kümmert sich bis ins kleinste Detail um den Code, erstellt gerne Layouts und Komponenten, selbst die kompliziertesten, und weiß, wie man jedes Problem oder jeden Fehler löst.

CSS-Codierungsstandards

Bevor Sie Code schreiben, ist es im Allgemeinen eine gute Idee, einige Grundregeln zum Schreiben von Code zu haben. CSS-Entwickler sollten den Codierungsstandard respektieren – er ist für die Wartbarkeit und Skalierbarkeit des Projekts unerlässlich.

Wählen Sie aus, welche Namenskonvention im gesamten Projekt verwendet werden soll. Die frühzeitige Festlegung einer Namenskonvention kann Entwicklern dabei helfen, besseren und besser organisierten Code zu erstellen. Es kann auch allen am Projekt Beteiligten helfen, die Komponentenstruktur und die Beziehung zwischen Komponenten und Elementen zu verstehen, indem es allein den HTML-Code liest.

Entscheiden Sie, wie mit Einrückungen, Selektortypen, Kurzschrifteigenschaften und Einheiten in CSS umgegangen werden soll. Vermeiden Sie beispielsweise die Verwendung von Pixeleinheiten, wenn der Codierungsstandard die Verwendung von Rem-Einheiten vorschlägt. Jeder hat einen eigenen Schreib-/Codierstil, aber als Profi müssen Sie in der Lage sein, jedes Konzept zu übernehmen und vor allem zu verstehen.

CSS-Design-Implementierung

Bevor Sie das Design in Code umwandeln, sollten Sie sich die Zeit nehmen, jede Seite, jedes Layout und jede Komponente zu verstehen. Analysieren Sie nach Möglichkeit jede Seite, erstellen Sie eine Liste der Seiten und Komponenten und versuchen Sie, ein Muster zu finden.

Wenn Sie eine Komponente bemerken, die auf mehreren Seiten vorhanden ist, sollten Sie die Umgebung um sie herum erkennen und versuchen, sie als eigenständige Komponente zu betrachten. Wenn es ähnliche Komponenten wie Karten oder Listen gibt, könnten Sie eine Variation derselben Komponente haben. Auf diese Weise könnten Sie den HTML-Code wiederverwenden und nur ein bisschen CSS-Code schreiben, damit er modifiziert erscheint.

Es ist auch eine gute Idee, Muster in anderen Bereichen zu finden, wie Typografie und Abstände. Manchmal führt dies dazu, dass Hilfsklassen vorhanden sind, die für das gesamte Projekt verwendet werden können, anstatt für einzelne Seiten.

Organisieren Sie Ihren CSS-Code

CSS-Entwickler sollten ihren Code organisieren und eine sinnvolle Struktur für alle schaffen. Bei der Verwendung von Tools wie CSS-Prozessoren sollten CSS-Entwickler den Prozess der Generierung des kompilierten Codes dokumentieren.

Bei Bedarf können CSS-Entwickler Styleguides erstellen. Styleguides können eine Referenz sein, wenn Sie neue Seiten erstellen oder entscheiden, wie Sie mit bestehenden Seiten umgehen. Mein Rat ist, den Styleguide global für das gesamte Team verfügbar zu machen, da es oft viel einfacher ist, eine Entscheidung zu treffen, wenn man einen visuellen Kontext hat. Styleguides können Farbpaletten, Typografieregeln, Kodierungsstandards und sogar statische Seiten enthalten. Dabei sind Ihnen keine Grenzen gesetzt, außer dem Budget und Ihrer Fantasie.

CSS-Code in Produktion

Das Schreiben von CSS-Code impliziert die Behandlung von browserübergreifenden Problemen, Fehlern, Animationen, Übergängen, Reaktionsfähigkeit und Druckstilen. Viele dieser Funktionen sind für Allround-Entwickler nicht leicht zu handhaben. Ich würde so weit gehen und sagen, dass dies insgesamt die am wenigsten bevorzugten CSS-Aufgaben sind, und nicht jeder Entwickler weiß, wie man damit umgeht. Auf der anderen Seite wissen spezialisierte CSS-Entwickler (oder sollten es zumindest wissen), wie man Code unter Berücksichtigung aller Fehler, Browser und Umgebungen erstellt.

Die Verwendung moderner Ansätze ist ein möglicher Weg, aber auch die Unterstützung älterer Browser und die Berücksichtigung von Benutzereinstellungen wie reduzierte Bewegungen sollten nicht ignoriert werden.

CSS-Entwickler schreiben auch HTML- und JavaScript-Code. Das bedeutet, dass die Asset-Lieferung in der Verantwortung des CSS-Entwicklers liegt. CSS-Entwickler sollten dafür verantwortlich sein, Schriftarten zu laden, kritisches CSS zu extrahieren, verzögertes und asynchrones Laden von JavaScript zu verwenden und responsive Bilder bereitzustellen.

Keine dieser Techniken ist einfach zu implementieren, und es gibt keine Wunderwaffe.

Was CSS-Entwickler für Sie tun können

All dies erklärt, warum Sie einen engagierten CSS-Entwickler benötigen. Hier sind nur einige der entscheidenden Dinge, die sie handhaben:

• Stellen Sie sicher, dass sich alle Projektmitglieder an den Kodierungsstandard halten
• Gestaltung umsetzen
• Organisieren Sie den Code
• Schreiben Sie den Code
• Fehler beheben
• Lernen Sie neue Techniken kennen
• Verbessern Sie den Code

Einpacken

Viel zu lange hat die Frage nach der Existenz und Bedeutung der Rolle von CSS-Entwicklern zu nicht besonders konstruktiven und wohlmeinenden Diskussionen geführt. Lassen Sie uns versuchen, dem CSS-Entwickler ein für alle Mal zuzustimmen und ihn als angemessene Rolle anzuerkennen.

In seinem Artikel The Great Divide zitiert Chris Coyier einige der Technologieführer, und die meisten von ihnen stimmen darin überein, dass es eine Kluft geben sollte, es sollte eine CSS-basierte Rolle geben, die keine Kenntnisse moderner JavaScript-Frameworks erfordert. Es könnte hilfreich sein, wenn Sie mehr als „nur CSS“ wissen, aber die Rolle sollte existieren und als gleichwertig mit JavaScript-basierten Rollen akzeptiert werden.

Wollen Sie Ihr Produkt schließlich in die Hände eines spezialisierten Fachmanns geben, der es bis zur Perfektion polieren kann, oder geben Sie sich mit dem Guten zufrieden ?

Weiterführende Literatur im Toptal Engineering Blog:

• Annäherung an SVG-Animationen in CSS