CSS

So wurde Slack.com überarbeitet und optimiert

Die Website des Team-Messengers Slack hat ein Redesign verpasst bekommen und einhergehend damit eine komplette Überarbeitung des Codes. Dabei wurde die Seite ingesamt schlanker und schneller gemacht, ausschlaggebend dafür war auch das eigens entwickelte UI Framework :spacesuit:

Fertige Frameworks können praktisch sein und viel Arbeit abnehmen, oft sind sie aber überladen mit Elementen, die man gar nicht benötigt, ein eigenes Framework kann bei großen Projekten, die von vielen Mitarbeitern über mehrere Jahre verwaltet werden müssen, durchaus Sinn ergeben. Außerdem wurde der Code nach den ITCSS-Prinzipien von Harry Roberts  strukturiert (vereinfacht gesagt wird das CSS so strukturiert, dass zuerst die allgemein gültigen Regeln stehen und die Styles spezifischer werden, je weiter man nach unten geht. Mehr dazu hier ) und eine Abwandlung der BEM-Konvention zur Benennung der Selektoren verfolgt (Klassen haben Namen wie u-margin-top–small). Außerdem wurde auf ein natives CSS Grid mit einem Flexbox-Fallback für ältere Browser für das Layout gesetzt.

Den gesamten Artikel zum Redesign von Mina Markham, Senior Engineer bei Slack, könnt ihr hier auf Medium nachlesen.

(Image Credit Headerbild, via Web Development Reading List & Smashing Magazine)

 

Kommentar verfassen