Get best of the week

CSS-Entwickler - warum braucht die Welt sie?

Die Audioversion in Russisch (Yandex.Music) / iTunes

In den letzten zehn Jahren ist CSS exponentiell gewachsen, indem immer mehr Funktionen hinzugefügt wurden, wodurch es allmählich ziemlich kompliziert und verwirrend wurde. Das CSS unserer Zeit unterscheidet sich stark vom CSS des Jahrzehnts 2001-2010.

Bevor ich erkläre, warum die Welt CSS-Entwickler braucht, müssen wir uns noch einmal die CSS-Geschichte ansehen.

Gelbe Entenpfostenabdeckung

Disclaimer:
.
 .
 , , .


CSS


In den zehn Jahren 2001-2010, als das Internet die Welt eroberte, stand CSS still. Internet Explorer 6-7-8 war der führende Browser. Microsoft hat zu diesem Zeitpunkt den CSS-Spezifikationen nicht viel Aufmerksamkeit geschenkt und kein Interesse daran gezeigt, neue Funktionen hinzuzufügen. CSS ist seit all den Jahren auf Version 2.1 geblieben.

Seit 2007 erscheinen moderne Browser wie Firefox und Chrome. Selbst zu diesem Zeitpunkt mussten wir noch Internet Explorer unterstützen. Dies hat unsere Entwicklung gebremst. Als Hauptbrowser zu dieser Zeit installierte der IE eine nahezu nicht vorhandene CSS-Entwicklungsgeschwindigkeit nahe Null. Es war das "dunkle Zeitalter" des Internets.

Dark Times CSS-Illustration

Grundlegende Ereignisse der neuen Ära von CSS


Ich war zu dieser Zeit Entwickler und sah daher zwei wichtige Ereignisse, die die Welt von CSS und das Web insgesamt veränderten:

  1. Der Beginn der Ära der Smartphones (29. Juni 2007) - alles begann mit der Veröffentlichung des ersten iPhone. Diese Version erforderte die Unterstützung neuer CSS-Funktionen, die in die neue Kategorie von Webgeräten passen würden.
  2. Chrome Browser Release (2. September 2008) - Chrome war ein neuer Browser, der als Desktop-Anwendung gestartet wurde. Bis dahin war Internet Explorer der Hauptherrscher des Internets und diktierte dessen Entwicklung.

Chrome Browser und Steve Jobs mit iPhone auf der Konferenz 2007, Collage

Warum Frontend-Entwickler sowohl mit CSS als auch mit JavaScript umgehen


Zu dieser Zeit war die Idee, dass Frontend-Entwickler alle Funktionen des Clients verwalten sollten, weit verbreitet. Dann gab es nur noch wenige CSS-Regeln. CSS wurde jetzt erweitert, und eine solche Vision ist nicht mehr relevant.

CSS 3, HTML 5 und JavaScript: Eine neue Ära


Es ist schwer genau zu sagen, wann CSS 3 entstanden ist, da es seit 1999 entwickelt wurde. Die echte Unterstützung im Internet begann 2011. Chrome & Firefox erhöhten zu dieser Zeit ihren Marktanteil. Smartphones sind sehr beliebt geworden. Mit ihren eigenen Browsern unterstützten alle die ersten neuen CSS 3-Funktionen.

Diese Änderungen verringerten die Popularität von Internet Explorer. Zu dieser Zeit war es noch ein bedeutender Browser, Microsoft erkannte jedoch, dass es beginnen sollte, auf Spezifikationen und CSS-Entwicklung zu achten. Sie haben Internet Explorer 9 veröffentlicht.

Neues CSS


CSS 3 ist jetzt 10 Jahre alt, warum nicht CSS 4? CSS 3 ist im Gegensatz zu CSS 2.1 ein offener Standard. Dank dessen wird es ständig aktualisiert. Die neue Version muss nicht "CSS 4" genannt werden, da CSS 3 eine kontinuierliche Weiterentwicklung ist, eine Version für alle Zeiten.
Bild

Seit 2011 enthält jedes Browser-Update neue CSS-Funktionen. In den letzten Jahren wurden die meisten Browser - Chrome, Firefox, Opera, Edge - fast jeden Monat aktualisiert (Safari wird hauptsächlich einmal im Jahr aktualisiert). Diese Häufigkeit bedeutet, dass wir fast sofort nach dem Erscheinen neue CSS-Funktionen erhalten.

Was ist neu in CSS in den letzten 10 Jahren?


In den letzten zehn Jahren sind viele neue Spezifikationen für verschiedene Arten
von CSS-Modulen erschienen, zum Beispiel:

  1. Layout — , Flexbox, CSS-, , writing mode ;
  2. Typography — , font-variant, line-breaking;
  3. Shapes & Graphics — , , blend-mode, clip-path, shapes ..
  4. Animations & Transforms — CSS/SVG , transitions, transforms, will-change.
  5. Units — viewport vw/vh/vmin/vmax, rem, calc(), contain, fit-content, min-content, max-content;
  6. CSS preprocessor — sass, less, stylus, postCSS
  7. — SVG, @support, CSS .

Möglicherweise stellen Sie fest, dass viele neue Funktionen in die Verantwortung des Frontend-Entwicklers fallen. Dies bedeutet, dass er in allen Erfahrungen sammeln muss. Dies ist jedoch nicht einmal eine vollständige Liste.

Im wirklichen Leben ist es für einen Webentwickler fast unmöglich, auch nur ein grundlegendes Verständnis für all diese neuen Funktionen zu haben. Darüber hinaus wurde parallel JavaScript entwickelt. Und er entwickelte sich vielleicht sogar mehr als CSS. Dies macht es für eine Person noch schwieriger, mit allen Entwicklungen Schritt zu halten.

Großer Fehler Webindustrie


Diese Situation, in der Frontend-Entwickler die neue Komplexität von CSS nicht bewältigen konnten, führte zu einer neuen Bewegung namens "Wie man CSS nicht lernt".
Eine neue Bewegung namens "Don't Learn CSS"

Die ersten CSS-Frameworks


Dieser Fehler begann mit Frameworks wie Bootstrap und Foundation. Die erste Veröffentlichung von jedem von ihnen fand im Jahr 2011 statt. Dieses spezielle Datum ist kein Zufall - dies waren die ersten Jahre von CSS3, Responsive Design, mobilen Websites und browserübergreifendem Satz.

Ich habe nie versucht, tief in Bootstrap einzutauchen, da mir die nicht-semantische CSS-Namenskonvention nie gefallen hat. Als ich anderen Webentwicklern in der Community half, wurde mir schnell klar, dass Bootstrap nur für diese Fälle geeignet ist, wenn Sie es so verwenden, wie es ist, ohne zu versuchen, es für sich selbst anzupassen.

Screenshot des Bootstrap-Markups
Bootstrap-HTML - Die meisten Klassen sind nicht semantisch.

Angular 2: Das erste JavaScript-kompatible Framework


Der neue Angular war der erste, der gekapselte Stile einführte. Dies war eine Möglichkeit, den unerfahrenen Webentwickler von der Notwendigkeit zu befreien, die CSS-Kaskadierung zu verstehen. Mit dieser Methode können Sie globale Stile erstellen und dennoch lokale Stile für jede Komponente haben.

Von all den verschiedenen Entwicklungsideen ist die Idee von gekapselten Stilen meiner Meinung nach gut, da Sie immer noch sowohl globale Stile als auch gekapselte Stile für Komponenten erstellen können. Darüber hinaus haben wir immer noch eine Trennung der Bedenken hinsichtlich CSS / SASS, HTML und JavaScript. Wir können auf einfache Weise nur die erforderlichen Stile herunterladen.

Screenshot der Dateistruktur in einem Projekt mit Angular

Reagieren - der Tod der Semantik!


React führt diese Idee weiter und schreibt den gesamten HTML- und CSS-Code in JavaSscript. Das Ziel, wiederverwendbare Stile zu erstellen, ist mit React gestorben. Es werden automatisch CSS-Klassennamen generiert. Daher wird der Code sowohl aufgrund von CSS-Klassennamen als auch aufgrund von nicht-semantischem HTML unlesbar und nicht mehr verständlich. Aus meiner Sicht ähnelt dies der Art und Weise, wie CSS und HTML zu Beginn des Internets geschrieben wurden, als es keine Rolle spielte, wie CSS oder HTML während der Arbeit aussahen.

Screenshot des Code-Markups reagieren
Reagieren - unlesbare CSS-Klassennamen

Warum ist es so schlimm? Wenn Sie ein echtes CSS-Problem haben und ein normaler Frontend-Entwickler es nicht lösen kann und einen erfahrenen CSS-Entwickler benötigt, stört der verwirrende React-Code. Ja, beide Webentwickler können es gemeinsam lösen, aber zwei erfahrene Webentwickler brauchen Zeit.

Aufwachen!


Frontend-Entwickler ziehen kein CSS ein! Jemand muss es laut sagen! Ja, ich weiß, dass dies eine grobe Verallgemeinerung ist und daher nicht 100% korrekt ist, aber ich versuche nicht, 100% korrekt zu sein.
Bevor ich fortfahre, sollten Sie etwas mehr über mich wissen.

Hahn auf dem Hintergrund der aufgehenden Sonne, Foto
Wach auf - Frontend-Entwickler ziehen kein CSS ein!

Wer bin ich


Ich habe Anfang 2007 als Frontend-Entwickler angefangen.
Anfang 2012 hörte ich fast vollständig auf, JavaScript zu schreiben. Der Hauptgrund war, dass ich CSS sehr liebte und JavaScript viel weniger.

Von 2012 bis heute habe ich, da ich mich nur auf CSS konzentriert habe, einen Vorteil in diesem Bereich entwickelt. Im Laufe der Jahre schrieb ich viele Artikel über CSS , gründete die lokale CSS-Community mit 5.000 Mitgliedern und führte unzählige Gespräche bei Meetings, Seminaren und Konferenzen.

Ich bin mit einem Mikrofon auf einer Konferenz, Foto
Ich spreche auf der ConFrontJS 2019 in Warschau, Polen.

Warum erzähle ich Ihnen das alles?Weil ich in meinem Land und in der Webbranche immer noch eine Art Einhorn bin. Ja, ich bekomme viel Dank, aber es gibt einen großen aber! Obwohl dies für mich funktioniert, weil ich in der Webbranche meines Landes bekannt bin, ist es für andere schwierig, dasselbe zu werden, da die Webbranche immer noch versucht, den „alten Namen des Frontend-Entwicklers“ beizubehalten (was bedeutet, erstklassiges JavaScript und CSS zu schreiben). .

In meinem Land kenne ich die besten Frontend-Entwickler. Da ich daran interessiert bin, die Webbranche zu verstehen, frage ich diese Top-Frontend-Talente immer, ob sie denken, dass sie gut in CSS sind. Ihre Antwort überrascht mich immer wieder - die meisten von ihnen fühlen sich in Bezug auf CSS unsicher und sind immer wieder überrascht über Entwickler wie mich, die CSS lieben.

Die Webbranche muss sich ändern


Trotz der Tatsache, dass dies bis 2010 funktionierte, kann es 2020 nicht fortgesetzt werden. Die Webbranche hat sich verändert, und es ist an der Zeit, die frühen Berufsbezeichnungen in der Webbranche zu reifen und aufzugeben und eine neue Position einzunehmen.
Positionierung, die den Anforderungen unserer Zeit entspricht. Zunächst große Unternehmen. Dann an alle anderen.

Figuren 2020 schöne Schriftart, Illustration

Was ist das Interesse von Unternehmen?


Im Jahr 2020 ist CSS eine wichtige Fähigkeit. Während Unternehmen versuchen, Geld zu sparen, geben sie möglicherweise mehr Geld aus. Im Laufe der Jahre als Webentwickler habe ich gesehen, wie Entwickler zu viel Zeit damit verbracht haben, was ein spezialisierter CSS-Entwickler in 10 Minuten und mit produktiverem Code lösen kann.
Im Jahr 2020 ist CSS eine wichtige Fähigkeit.

Was können neue Berufsbezeichnungen sein?


In den letzten acht Jahren habe ich mehrmals die Position gewechselt. Ich habe dies getan, um Leuten, die mein LinkedIn-Profil sehen, meine Fähigkeiten zu erklären .

Zuerst nannte ich mich CSS Master (mit dem Namen der Community, die ich gegründet habe - CSS Masters Israel ). Es hat Spaß gemacht, kurz nach dieser Ankündigung der Arbeit mit einer solchen Überschrift zu sehen. Mir wurde klar, dass es Unternehmen gibt, die einen CSS-Entwickler benötigen, aber nicht wissen, wie sie ihn angemessen benennen sollen.

Ein Foto eines Teils eines Bewerbungsformulars, ein bedeutungsloses Bild

Später habe ich den Namen meines Beitrags mehrmals geändert (UI / CSS - Entwickler / Schnittstellenentwickler / Ingenieur / Architekt / Experte) und versucht, meine Fähigkeiten in den Namen der Arbeit einzufügen.

Seien Sie nicht nur ein CSS-Entwickler


Heutzutage haben wir verschiedene Arten von Entwicklern, die sich auf den visuellen Teil spezialisiert haben, wie z. B. CSS und beispielsweise SVG. Ich werde versuchen , diese Typen hier zu definieren :

CSS Developer - Dieser Name ist für CSS-Profis auf mittlerer Ebene. Dies sind Entwickler, die das Design übernehmen und es einfach in CSS konvertieren können.

CSS-Architekt- Diese Kategorie richtet sich an Entwickler wie mich, die nicht nur CSS effizient erstellen, sondern auch Experten für die Planung der CSS-Trennung und den Einbau in eine komplexe Gebäudestruktur sind. Im Gegensatz zu CSS-Entwicklern sind CSS-Architekten erfahrener und wissen, wie große Projekte intelligent skaliert werden können. Weitere CSS-Entwickler arbeiten in ihrem Team. Darüber hinaus kommunizieren sie mit anderen Webentwicklern, Projektmanagern und Webdesignern.

Viele verschiedene gelbe Gummiente, die eine Vielzahl von Berufen zeigt, Illustration
Die Vielfalt ist wunderbar!

CSS Animations Developer - Heutzutage können wir die Benutzererfahrung mit CSS-Animationen oder SVG-Animationen fast mühelos verbessern und so ein gutes Projekt in ein fantastisches verwandeln. Diese Arbeit kann für große Unternehmen geeignet sein.

Dies sind die häufigsten Anforderungen für 2020, es gibt jedoch auch andere Arten von spezialisierten Entwicklern, z.


Es kann mehr geben - die Möglichkeiten sind endlos!

Abschließend


In diesem Artikel habe ich versucht, das Bewusstsein für ein Thema zu schärfen, das meines Erachtens noch nicht behandelt wurde. Mein Ziel ist es, die Webbranche auf Kurs zu bringen.

Neben meinem Artikel gibt es auch Artikel zu diesem Thema aus anderen Blickwinkeln:


Schlussendlich


Wenn Ihnen dieser Artikel gefallen hat, würde ich es begrüßen, wenn Sie ihn mit anderen teilen würden, damit diese Idee ein neues Bewusstsein in der Webbranche schaffen könnte.

Wer bin ich?


Mein Name ist Elad Shechter, ich bin ein Webentwickler, der sich auf CSS- und HTML-Architektur spezialisiert hat. Ich arbeite fürinvesting.com .

Mein Twitter und meine Website .

Ich bin im Hintergrund des Projektors und spreche über das Projekt, die Fotografie

More articles:


All Articles