Πώς φροντίζουμε για την ποιότητα του κώδικα CSS;

Μπορούμε να βρούμε πολλές δημοσιεύσεις σχετικά με την ποιότητα ενός κωδικός γραμμένα σε γλώσσες προγραμματισμού όπως JavaScript, Java, Ruby και άλλα. Πολλά έχουν ήδη ειπωθεί όσον αφορά τα πρότυπα σχεδίασης, τις αυτοματοποιημένες δοκιμές και την αρχιτεκτονική λογισμικού. Σε όλες αυτές τις δημοσιεύσεις, η CSS φαίνεται να αντιμετωπίζεται ως υποστηρικτικό μέσο και όμως αποτελεί σημαντικό μέρος όλων των εφαρμογών του Διαδικτύου.

Σε αυτό το άρθρο θα περιγράψουμε τα εργαλεία και τις καλές πρακτικές που χρησιμοποιούμε στην Codest, έτσι ώστε τα έργα που παρέχουμε στους πελάτες μας να είναι πάντα υψηλής ποιότητας.

ΠΡΟΕΠΕΞΕΡΓΑΣΤΉΣ SCSS

Η συγγραφή κώδικα CSS είναι επαρκής για μικρές εφαρμογές. Όταν έχετε να κάνετε με μια μεγαλύτερη έργο, είναι σημαντικό ο κώδικας για παρόμοια αντικείμενα HTML να μην χρειάζεται να επαναλαμβάνεται πολλές φορές σε διαφορετικά σημεία. Ο προεπεξεργαστής SCSS μας βοηθά να χρησιμοποιούμε τις μεταβλητές, τις συναρτήσεις και τα λεγόμενα mixins, τα οποία κάνουν τον κώδικά μας πιο δομημένο και καθαρό.

Η ακόλουθη λίστα περιέχει ένα παράδειγμα ενός mixin που σας επιτρέπει να ικανοποιήσετε την αρχή "Μην επαναλαμβάνεστε":

@mixin flex-center {
  display: flex,
  align-items: center,
  justify-content: center,
}

Χρησιμοποιώντας αυτό το mixin μπορούμε να γράψουμε κώδικα:

.item-a {
  display: flex,
  align-items: center,
  justify-content: center,
  ...
}

.item-b {
  display: flex,
  align-items: center,
  justify-content: center,
  ...
}

Με πιο συνοπτικό και καθαρό τρόπο:

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

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

BEM ΜΕΘΟΔΟΛΟΓΙΑ

Η μεθοδολογία BEM είναι μια απλή σύμβαση ονοματοδοσίας που σας επιτρέπει να δημιουργήσετε έναν αρθρωτό, επαναχρησιμοποιήσιμο και επεκτάσιμο κώδικα CSS. Ως μέρος του Codest, τη χρησιμοποιούμε για να στυλιζάρουμε τα στοιχεία του VueJS. Προσπαθούμε να οργανώνουμε τον κώδικά μας με τέτοιο τρόπο ώστε ένα μόνο αρχείο .scss, που περιέχει ένα Block, να αντιστοιχίζεται σε ένα μόνο στοιχείο .vue. Το styling του συστατικού v-page-header.vue μπορεί να οριστεί ως παράδειγμα.

.page-header {
  &__title {
    font-size: 2.0rem,
    color: $color-μαύρο,
    φόντο: $color-white,
  }

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

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

ΚΛΆΣΕΙΣ ΧΡΗΣΙΜΌΤΗΤΑΣ

Ενώ δουλεύαμε με τη μεθοδολογία BEM, παρατηρήσαμε ότι για να εκτελέσουμε μια πολύ απλή λειτουργία - για παράδειγμα, την έντονη γραφή μέρους του κειμένου - πρέπει να επινοήσουμε τεχνητά ονόματα κλάσεων CSS:

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

Για να εξαλείψουμε αυτό το πρόβλημα, εμπνευστήκαμε από τις κλάσεις "utilities" που χρησιμοποιούνται στον πηγαίο κώδικα του πλαισίου Bootstrap. Χάρη σε αυτό, στον κώδικα των προτύπων Vue/HTML μπορούμε να χρησιμοποιήσουμε τον ακόλουθο τύπο:

<div>
  <span class="text-bold">Περιεχόμενο</span>
</div>

ΣΤΑΤΙΚΉ ΑΝΆΛΥΣΗ ΤΟΥ ΚΏΔΙΚΑ

Δεν χρειάζεται να πείσετε κανέναν ότι η εργασία με έναν κώδικα που είναι διαφανής και περιέχει επίσης συνεπείς δομές σας επιτρέπει να τροποποιείτε και να προσθέτετε εύκολα νέες λειτουργίες. Είναι σημαντικό ότι όποιος αρχίζει να εργάζεται πάνω σε ένα υπάρχον κομμάτι κώδικα μπορεί να το βρει αρκετά γρήγορα. Ωστόσο, αρκετά συχνά οι προγραμματιστές έχουν τις δικές τους συνήθειες που μπορεί να μην γίνονται κατανοητές από άλλους ομάδα μέλη. Γι' αυτό είναι τόσο σημαντικό να χρησιμοποιείτε εργαλεία που σας επιτρέπουν να αυτοματοποιείτε τον έλεγχο του κώδικα. Ως μέρος του Codest, χρησιμοποιούμε το εργαλείο SCSS-LINT για την αυτόματη ανάλυση ενός κώδικα SCSS, ο οποίος περιέχει ένα σύνολο προκαθορισμένων κανόνων. Ένας από τους πιο ενδιαφέροντες και πιο περιοριστικούς κανόνες που χρησιμοποιούμε στα έργα μας μπορεί να είναι ο κανόνας PropertySortOrder, ο οποίος εξασφαλίζει την κατάλληλη σειρά των χαρακτηριστικών μέσα σε μια ενιαία κλάση SCSS.

Φανταστείτε τα ακόλουθα δύο μέρη του κώδικα SCSS:

.item-a {
    font-size: 14px,
    color: #FF00FF,
    margin-top: 10px,
    font-weight: bold,
    χρώμα φόντου: #00FFFF,
    padding: 5px,
    margin-bottom: 10px,
}

.item-b {
    font-size: 18px,
    padding: 3px,
    background-color: #00FFFF,
    margin-bottom: 4px,
}

και:

.item-a {
  margin: 10px 0,
  padding: 5px,
  χρώμα φόντου: #00FFFF,
  color: #FF00FF,
    μέγεθος γραμματοσειράς: 14px,
    font-weight: bold,
}

.item-b {
  margin-bottom: 4px,
  padding: 3px,
  background-color: #00FFFF,
    μέγεθος γραμματοσειράς: 18px,
}

Και τα δύο αποσπάσματα είναι σωστά, αλλά το δεύτερο είναι πιο ευανάγνωστο. Συναφή χαρακτηριστικά, όπως τα περιθώρια και τα μαξιλάρια, ομαδοποιούνται μαζί.

Περίληψη

Είναι δύσκολο μέσα σε λίγες προτάσεις να δώσουμε όλες τις πληροφορίες σχετικά με την οργάνωση του κώδικα CSS στις εκτεταμένες διαδικτυακές εφαρμογές που δημιουργούμε με το πλαίσιο Codest. Ενθαρρύνουμε όλους τους αναγνώστες μας να αφήσουν σχόλια σχετικά με το ποια εργαλεία και ποιες καλές πρακτικές χρησιμοποιείτε στα δικά σας έργα.