Wie können wir uns um die Qualität von CSS-Code kümmern?

Es gibt eine Vielzahl von Veröffentlichungen über die Qualität eines Code geschrieben in Programmiersprachen wie JavaScript, Java, Ruby und andere. Es wurde bereits viel über Entwurfsmuster, automatisierte Tests und Softwarearchitekturen gesagt. In all diesen Veröffentlichungen scheint CSS nur als unterstützendes Medium behandelt zu werden, obwohl es einen bedeutenden Teil aller Internetanwendungen ausmacht.

In diesem Artikel werden wir beschreiben, welche Tools und bewährten Verfahren wir bei Codest verwenden, damit die Projekte, die wir unseren Kunden anbieten, immer von höchster Qualität sind.

SCSS-PRÄPROZESSOR

Das Schreiben von CSS-Code ist für kleine Anwendungen ausreichend. Wenn es um eine größere ProjektWichtig ist, dass der Code für ähnliche HTML-Objekte nicht mehrfach an verschiedenen Stellen wiederholt werden muss. Der SCSS-Präprozessor hilft uns bei der Verwendung von Variablen, Funktionen und sogenannten Mixins, die unseren Code strukturierter und sauberer machen.

Die folgende Auflistung enthält ein Beispiel für ein Mixin, mit dem Sie den Grundsatz "Do not Repeat Yourself" einhalten können:

@mixin flex-center {
  Anzeige: flex;
  align-items: center;
  justify-Inhalt: zentriert;
}

Mit diesem Mixin können wir Code schreiben:

.item-a {
  Anzeige: flex;
  align-items: center;
  justify-Inhalt: zentriert;
  ...
}

.item-b {
  Anzeige: flex;
  align-items: center;
  justify-Inhalt: zentriert;
  ...
}

Auf eine prägnantere und sauberere Weise:

.item-a {
  @include flex-center;
}

.item-b {
  @include flex-center;
}

BEM METODOLOGIE

Die BEM-Methode ist eine einfache Namenskonvention, mit der Sie einen modularen, wiederverwendbaren und skalierbaren CSS-Code erstellen können. Als Teil von Codest verwenden wir sie, um VueJS-Komponenten zu stilisieren. Wir versuchen, unseren Code so zu organisieren, dass eine einzige .scss-Datei, die einen Block enthält, einer einzigen .vue-Komponente zugeordnet wird. Das Styling der Komponente v-page-header.vue kann als Beispiel dienen.

.page-header {
  &__title {
    font-size: 2.0rem;
    Farbe: $color-schwarz;
    Hintergrund: $color-weiß;
  }

  &__logo {
    background: url('/images/background.png') no-repeat 0 0;

    &--vertikal {
      background: url('/images/background-2.png') no-repeat 0 0;
    }
  }
}

HILFSKLASSEN

Bei der Arbeit mit der BEM-Methode ist uns aufgefallen, dass wir für eine sehr einfache Operation - z. B. einen fettgedruckten Textteil - künstliche CSS-Klassennamen erfinden müssen:

.page-header {
  &__bolder-item {
    font-weight: bold;
  }
}

Um dieses Problem zu beseitigen, haben wir uns von den im Quellcode des Bootstrap-Frameworks verwendeten "Utilities"-Klassen inspirieren lassen. Dank dessen können wir im Code der Vue/HTML-Vorlagen den folgenden Typ verwenden:

<div>
  <span class="text-bold">Inhalt</span>
</div>

STATISCHE ANALYSE DES CODES

Sie müssen niemanden davon überzeugen, dass die Arbeit mit einem Code, der transparent ist und konsistente Strukturen enthält, es Ihnen ermöglicht, neue Funktionalitäten leicht zu ändern und hinzuzufügen. Es ist wichtig, dass jeder, der mit der Arbeit an einem bestehenden Codefragment beginnt, dieses schnell finden kann. Allerdings haben Programmierer oft ihre eigenen Gewohnheiten, die von anderen nicht immer verstanden werden. Team Mitglieder. Deshalb ist es so wichtig, Werkzeuge zu verwenden, mit denen man die Codeprüfung automatisieren kann. Als Teil von Codest verwenden wir das SCSS-LINT-Tool, um einen SCSS-Code automatisch zu analysieren, der eine Reihe vordefinierter Regeln enthält. Eine der interessantesten und restriktivsten Regeln, die wir in unseren Projekten verwenden, ist die PropertySortOrder-Regel, die die richtige Reihenfolge der Attribute innerhalb einer einzelnen SCSS-Klasse sicherstellt.

Stellen Sie sich die folgenden beiden Teile des SCSS-Codes vor:

.item-a {
    Schriftgröße: 14px;
    Farbe: #FF00FF;
    Rand-oben: 10px;
    font-weight: bold;
    Hintergrundfarbe: #00FFFF;
    padding: 5px;
    margin-bottom: 10px;
}

.item-b {
    Schriftgröße: 18px;
    padding: 3px;
    Hintergrund-Farbe: #00FFFF;
    margin-bottom: 4px;
}

und:

.item-a {
  Rand: 10px 0;
  padding: 5px;
  background-color: #00FFFF;
  Farbe: #FF00FF;
    Schriftgröße: 14px;
    Schriftart-Gewicht: fett;
}

.item-b {
  margin-bottom: 4px;
  padding: 3px;
  Hintergrund-Farbe: #00FFFF;
    font-size: 18px;
}

Beide Passagen sind korrekt, aber die zweite ist besser lesbar. Zusammenhängende Attribute wie Ränder und Abstände werden in Gruppen zusammengefasst.

Zusammenfassung

Es ist schwierig, in ein paar Sätzen alle Informationen über die CSS-Code-Organisation in den umfangreichen Webanwendungen zu geben, die wir mit dem Codest-Framework erstellen. Wir ermutigen alle unsere Leser, Kommentare darüber zu hinterlassen, welche Tools und bewährten Verfahren Sie in Ihren eigenen Projekten verwenden.