Sass Guidelines

Σύνταξη & μορφοποίηση

Αν με ρωτάς, το πρώτο πράγμα που πρέπει να κάνει ένα styleguide είναι να περιγράφει τον τρόπο που θέλουμε να φαίνεται ο κώδικάς μας.

Όταν διάφοροι developers συμμετέχουν στην συγγραφή CSS στο ίδιο project, είναι απλά θέμα χρόνου μέχρι ένας από αυτούς να ξεκινήσει να δρα με το δικό του τρόπο. Τα guidelines κώδικα που προωθούν την ομοιομορφία όχι μόνο προλαμβάνουν κάτι τέτοιο, αλλά επίσης βοηθούν στο διάβασμα και την ενημέρωση του κώδικα.

Γενικά, θέλουμε (εμπνευσμένα από τα CSS Guidelines):

• δύο (2) κενά για indentation, όχι tabs,
• ιδανικά, 80 χαρακτήρες ανά γραμμή,
• ορθά γραμμένη CSS πολλαπλών γραμμών,
• εποικοδομητική χρήση κενών,

// Yep
.foo {
  display: block;
  overflow: hidden;
  padding: 0 1em;
}

// Nope
.foo {
    display: block; overflow: hidden;

    padding: 0 1em;
}

// Εφόσον η εμφωλευμένη σύνταξη Sass επιβάλει αυτά τα πρότυπα κώδικα
// Δεν υπάρχει λάθος τρόπος για να προχωρήσεις
.foo
  display: block
  overflow: hidden
  padding: 0 1em

Strings

Είτε το πιστεύεις είτε όχι, τα strings παίζουν πολύ μεγάλο ρόλο και στο οικοσύστημα της CSS αλλά και της Sass. Οι περισσότερες τιμές CSS είναι είτε μήκη ή αναγνωριστικά, οπότε στην πραγματικότητα είναι πολύ σημαντικό να ακολουθούμε κάποια guidelines όταν έχουμε να κάνουμε με strings στη Sass.

Κωδικοποίηση

Για την αποφυγή πιθανού προβλήματος με την κωδικοποίηση χαρακτήρων, συνιστάται ιδιαίτερα να εφαρμοστεί κωδικοποίηση UTF-8 στο main stylesheet χρησιμοποιώντας το @charset directive. Βεβαιώσου ότι είναι το πρώτο πρώτο στοιχείο του stylesheet και ότι δεν υπάρχει κάποιος χαρακτήρας οποιουδήποτε είδους πριν από αυτό.

@charset 'utf-8';

@charset 'utf-8'

Εισαγωγικά

Η CSS δεν απαιτεί τα strings να έχουν εισαγωγικά, ακόμη και αυτά που περιέχουν κενά. Πάρε για παράδειγμα τα font-family names: δεν έχει σημασία αν περικλείεις εσύ τα strings με εισαγωγικά ή ο CSS parser.

Εξαιτίας αυτού, ούτε η Sass απαιτεί τα strings να έχουν εισαγωγικά. Ακόμη καλύτερα (και ευτυχώς πρέπει να παραδεχτούμε), ένα string με εισαγωγικά είναι αυστηρά ισοδύναμο με ένα χωρίς εισαγωγικά (π.χ. το 'abc' είναι αυστηρά ισοδύναμο με το abc).

Παρόλα αυτά, οι γλώσσες που δεν απαιτούν τα strings να έχουν εισαγωγικά είναι σαφώς μειοψηφία οπότε, τα strings πρέπει πάντοτε να περικλείονται από μονά εισαγωγικά (') στη Sass (μονά επειδή είναι πιο εύκολο από τα διπλά να πληκτρολογηθούν στα qwerty πληκτρολόγια). Εκτός της ομοιομορφίας με άλλες γλώσσες, συμπεριλαμβανομένης της συγγενούς με τη CSS Javascript, υπάρχουν διάφοροι λόγοι γι’ αυτή την επιλογή:

• τα ονόματα των χρωμάτων αντιμετωπίζονται σαν χρώματα όταν είναι χωρίς εισαγωγικά, πράγμα που μπορεί να οδηγήσει σε σοβαρά προβλήματα·
• οι περισσότεροι syntax highlighters κολλάνε στα strings χωρίς εισαγωγικά·
• βοηθάει στην γενικότερη αναγνωσιμότητα·
• δεν υπάρχει κάποιος βάσιμος λόγος για να μην χρησιμοποιούμε εισαγωγικά.

// Yep
$direction: 'left';

// Nope
$direction: left;

// Yep
$direction: 'left'

// Nope
$direction: left

Strings σαν τιμές CSS

Ορισμένες τιμές (αναγνωριστικά) CSS όπως το initial ή το sans-serif απαιτούν να μην έχουν εισαγωγικά. Πράγματι, η δήλωση font-family: 'sans-serif' θα αποτύχει χωρίς προειδοποίηση επειδή η CSS περιμένει ένα identifier, όχι ένα string σε εισαγωγικά. Εξαιτίας αυτού, δεν βάζουμε εισαγωγικά σε αυτές τις τιμές.

// Yep
$font-type: sans-serif;

// Nope
$font-type: 'sans-serif';

// Okay I guess
$font-type: unquote('sans-serif');

// Yep
$font-type: sans-serif

// Nope
$font-type: 'sans-serif'

// Okay I guess
$font-type: unquote('sans-serif')

Συνεπώς, μπορούμε να κάνουμε μια διάκριση μεταξύ strings που προορίζονται για χρήση ως τιμές CSS (CSS identifiers) όπως στο προηγούμενο παράδειγμα, και strings όταν παραμένουμε σε τύπο αρχείου Sass, για παράδειγμα map keys.

Δεν βάζουμε εισαγωγικά στα πρώτα, όμως στα δεύτερα βάζουμε μονά εισαγωγικά.

Strings που περιέχουν εισαγωγικά

Αν ένα string περιέχει ένα ή περισσότερα μονά εισαγωγικά, μπορεί κανείς να περικλείσει το string με διπλά εισαγωγικά ("), για να αποφύγει να κάνει escape σε χαρακτήρες μέσα στο string.

// Okay
@warn 'You can\'t do that.';

// Okay
@warn "You can't do that.";

// Okay
@warn 'You can\'t do that.'

// Okay
@warn "You can't do that."

URLs

Τα URL θα πρέπει επίσης να έχουν εισαγωγικά, για τους ίδιους λόγους με παραπάνω:

// Yep
.foo {
  background-image: url('/images/kittens.jpg');
}

// Nope
.foo {
  background-image: url(/images/kittens.jpg);
}

// Yep
.foo
  background-image: url('/images/kittens.jpg')

// Nope
.foo
  background-image: url(/images/kittens.jpg)

Αριθμοί

Στη Sass, ο αριθμός (number) είναι ένας τύπος δεδομένων που περιλαμβάνει τα πάντα, από αριθμούς χωρίς μονάδες μέχρι μήκη, διάρκειες, συχνότητες, γωνίες κτλ. Αυτό επιτρέπει να γίνονται υπολογισμοί σε αυτά τα μέτρα.

Μηδενικά

Οι αριθμοί θα πρέπει να εμφανίζονται με μηδενικά πριν από μια δεκαδική τιμή μικρότερη της μονάδας. Ποτέ μην εμφανίζεις μηδενικά στο τέλος ενός δεκαδικού.

// Yep
.foo {
  padding: 2em;
  opacity: 0.5;
}

// Nope
.foo {
  padding: 2.0em;
  opacity: .5;
}

// Yep
.foo
  padding: 2em
  opacity: 0.5

// Nope
.foo
  padding: 2.0em
  opacity: .5

Μονάδες

Όταν έχουμε να κάνουμε με μήκη, μια τιμή 0 δεν πρέπει ποτέ μα ποτέ να έχει μονάδα.

// Yep
$length: 0;

// Nope
$length: 0em;

// Yep
$length: 0

// Nope
$length: 0em

Το πιο συνηθισμένο λάθος που μου έρχεται στο μυαλό όσον αφορά τους αριθμούς στη Sass, είναι το να πιστεύουμε ότι οι μονάδες είναι απλά κάποια strings που μπορούμε να προσαρτήσουμε με ασφάλεια σε έναν αριθμό. Ενώ ακούγεται σωστό, σίγουρα οι μονάδες δεν λειτουργούν κατ’ αυτόν τον τρόπο. Σκέψου τις μονάδες σαν αλγεβρικά σύμβολα. Για παράδειγμα, στον πραγματικό κόσμο, ο πολλαπλασιασμός 5 ίντσες επί 5 ίντσες μας δίνει 25 τετραγωνικές ίντσες. Η ίδια λογική εφαρμόζεται και στη Sass.

Για να προσθέσεις μια μονάδα σε έναν αριθμό, πρέπει να πολλαπλασιάσεις αυτόν τον αριθμό επί 1 μονάδα.

$value: 42;

// Yep
$length: $value * 1px;

// Nope
$length: $value + px;

$value: 42

// Yep
$length: $value * 1px

// Nope
$length: $value + px

Σημειώστε ότι το να προσθέσουμε 0 μέλη αυτής της μονάδας επίσης λειτουργεί, αλλά θα προτιμούσα να προτείνω την προαναφερθείσα μέθοδο επειδή η πρόσθεση 0 μονάδων μπορεί να μας μπερδέψει. Πράγματι, όταν προσπαθούμε να μετατρέψουμε έναν αριθμό σε μία άλλη συμβατή μονάδα, το να προσθέσουμε το 0 δεν έχει το αναμενόμενο αποτέλεσμα. Μπορείτε να διαβάσετε περισσότερα για αυτό το θέμα σε αυτό το άρθρο.

$value: 42 + 0px;
// -> 42px

$value: 1in + 0px;
// -> 1in

$value: 0px + 1in;
// -> 96px

$value: 42 + 0px
// -> 42px

$value: 1in + 0px
// -> 1in

$value: 0px + 1in
// -> 96px

Τελικά, στην πραγματικότητα εξαρτάται από το τι προσπαθείς να πετύχεις. Θυμήσου ότι το να προσθέσουμε τη μονάδα σαν string δεν είναι καλός τρόπος για να προχωρήσουμε.

Για να αφαιρέσεις τη μονάδα από μια τιμή, πρέπει να τη διαιρέσεις με μια μονάδα του είδους της.

$length: 42px;

// Yep
$value: $length / 1px;

// Nope
$value: str-slice($length + unquote(''), 1, 2);

$length: 42px

// Yep
$value: $length / 1px

// Nope
$value: str-slice($length + unquote(''), 1, 2)

Η προσάρτηση μιας μονάδας σαν string σε έναν αριθμό έχει σαν αποτέλεσμα string, που εμποδίζει περαιτέρω πράξεις σε αυτήν την τιμή. Ο διαχωρισμός του αριθμητικού μέρους ενός αριθμού με μια μονάδα επίσης έχει σαν αποτέλεσμα string. Αυτό είναι κάτι που δεν θέλεις. Use lengths, not strings.

Υπολογισμοί

Οι αριθμητικοί υπολογισμοί υψηλότερου επιπέδου πρέπει πάντα να βρίσκονται μέσα σε παρενθέσεις. Αυτή η απαίτηση όχι μόνο βελτιώνει δραματικά την αναγνωσιμότητα, αλλά προλαμβάνει και κάποιες ακραίες περιπτώσεις υποχρεώνοντας την Sass να χρησιμοποιήσει τις τιμές των περιεχομένων των παρενθέσεων.

// Yep
.foo {
  width: (100% / 3);
}

// Nope
.foo {
  width: 100% / 3;
}

// Yep
.foo
  width: (100% / 3)

// Nope
.foo
  width: 100% / 3

Μαγικοί αριθμοί

Ο “Μαγικός αριθμός” είναι ένας όρος της παλιάς σχολής προγραμματισμού για την unnamed αριθμητική σταθερά. Βασικά, είναι απλά ένας τυχαίος αριθμός ο οποίος συμβαίνει απλά να δουλεύει (just work™) ενώ δεν συνδέεται με καμία λογική εξήγηση.

Περιττό να πω ότι οι μαγικοί αριθμοί είναι κατάρα και πρέπει να αποφεύγονται πάση θυσία. Όταν δεν καταφέρνεις να βρεις μια λογική εξήγηση γιατί ένας αριθμός λειτουργεί, πρόσθεσε ένα εκτενές σχόλιο που να εξηγεί πώς έφτασες εκεί και γιατί πιστεύεις ότι λειτουργεί. Το να παραδεχτείς ότι δεν ξέρεις για ποιο λόγο λειτουργεί κάτι, είναι πιο βοηθητικό για τον επόμενο developer από το να τον αφήσεις να καταλάβει μόνος του από το μηδέν τι συμβαίνει.

/**
 * 1. Μαγικός αριθμός. Αυτή η τιμή είναι η μικρότερη που μπορούσα να βρω
 * για να ευθυγραμμίσω την κορυφή του `.foo` με τον γονέα του.
 * Ιδανικά, πρέπει να το διορθώσουμε κατάλληλα.
 */
.foo {
  top: 0.327em; /* 1 */
}

/**
 * 1. Μαγικός αριθμός. Αυτή η τιμή είναι η μικρότερη που μπορούσα να βρω
 * για να ευθυγραμμίσω την κορυφή του `.foo` με τον γονέα του.
 * Ιδανικά, πρέπει να το διορθώσουμε κατάλληλα.
 */
.foo
  top: 0.327em /* 1 */

Πάνω στο θέμα, το CSS-Tricks έχει ένα καταπληκτικό άρθρο σχετικά με τα magic numbers στη CSS το οποίο σας ενθαρρύνω να διαβάσετε.

Χρώματα

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

Η Sass είναι τόσο χρήσιμη σε ό,τι έχει να κάνει με την διαχείριση χρωμάτων που έχουν εμφανιστεί διάφορα άρθρα στο internet σχετικά με αυτό ακριβώς το θέμα. Επιτρέψτε μου να σας συστήσω μερικά:

• How to Programmatically Go From One Color to Another
• Using Sass to Build Color Palettes
• Dealing with Color Schemes in Sass

Τύποι χρωμάτων

Για να κάνεις τα χρώματα όσο πιο απλά γίνεται, η συμβουλή μου είναι να τηρήσεις την ακόλουθη σειρά προτίμησης για τους τύπους χρωμάτων:

1. Συμβολισμός HSL;
2. Συμβολισμός RGB;
3. Δεκαεξαδικός συμβολισμός (με μικρά γράμματα και συντομευμένος).

Δεν πρέπει να χρησιμοποιούνται οι λέξεις κλειδιά CSS χρωμάτων, εκτός αν πρόκεται για γρήγορα πρωτότυπα. Πράγματι, είναι αγγλικές λέξεις και μερικές από αυτές δεν περιγράφουν πολύ καλά το χρώμα που αντιπροσωπεύουν, ειδικά για κάποιους που η μητρική τους γλώσσα δεν είναι τα αγγλικά. Εκτός αυτού, οι λέξεις κλειδιά δεν είναι απόλυτα σωστές εννοιολογικά· για παράδειγμα το grey (γκρι) είναι στην πραγματικότητα πιο σκούρο από το darkgrey (σκούρο γκρι), και η σύγχυση μεταξύ του grey και του gray μπορεί να οδηγήσει σε αντιφατικές χρήσεις του χρώματος.

Ο συμβολισμός HSL είναι όχι μόνο ο πιο ευκατανόητος για το ανθρώπινο μυαλό, αλλά επίσης διευκολύνει τους συγγραφείς των stylesheet να αλλάξουν το χρώμα, επεμβαίνοντας στα hue (απόχρωση), saturation (κορεσμός), και lightness (φωτεινότητα) ξεχωριστά.

Το RGB έχει το πλεονέκτημα του να δείχνει αμέσως αν το χρώμα αποτελείται από περισσότερο μπλε, πράσινο ή κόκκινο. Συνεπώς μπορεί να είναι καλύτερο από το HSL σε ορισμένες περιπτώσεις, ειδικά όταν περιγράφουμε ένα καθαρό κόκκινο, πράσινο ή μπλε. Ωστόσο δεν είναι εύκολο να “χτίσουμε” ένα χρώμα από τα τρία μέρη.

Τέλος, το δεκαεξαδικό είναι σχεδόν ακατανόητο για το ανθρώπινο μυαλό. Χρησιμοποίησέ το μόνο σαν τελευταία λύση αν πρέπει.

// Yep
.foo {
  color: hsl(0, 100%, 50%);
}

// Also yep
.foo {
  color: rgb(255, 0, 0);
}

// Meh
.foo {
  color: #f00;
}

// Nope
.foo {
  color: #FF0000;
}

// Nope
.foo {
  color: red;
}

.foo
  color: hsl(0, 100%, 50%)

// Also yep
.foo
  color: rgb(255, 0, 0)

// Nope
.foo
  color: #f00

// Nope
.foo
  color: #FF0000

// Nope
.foo
  color: red

Όταν χρησιμοποιείς συμβολισμό HSL ή RGB, πάντα να προσθέτεις ένα κενό μετά το κόμμα (,) και καθόλου κενά μεταξύ των παρενθέσεων ((, )) και του περιεχομένου.

// Yep
.foo {
  color: rgba(0, 0, 0, 0.1);
  background: hsl(300, 100%, 100%);
}

// Nope
.foo {
  color: rgba(0,0,0,0.1);
  background: hsl( 300, 100%, 100% );
}

// Yep
.foo
  color: rgba(0, 0, 0, 0.1)
  background: hsl(300, 100%, 100%)

// Nope
.foo
  color: rgba(0,0,0,0.1)
  background: hsl( 300, 100%, 100% )

Χρώματα και μεταβλητές

Όταν χρησιμοποιείς ένα χρώμα πάνω από μια φορά, αποθήκευσέ το σε μια μεταβλητή με όνομα που να έχει νόημα και να αντιπροσωπεύει το χρώμα.

$sass-pink: hsl(330, 50%, 60%);

$sass-pink: hsl(330, 50%, 60%)

Τώρα είσαι ελεύθερος να χρησιμοποιήσεις τη μεταβλητή όποτε θέλεις. Παρόλα αυτά, αν η χρήση είναι στενά συνδεδεμένη με ένα θέμα, θα πρότεινα να μην χρησιμοποιείται η μεταβλητή όπως είναι. Αντ’ αυτού, αποθήκευσέ το σε μια άλλη μεταβλητή με όνομα που να εξηγεί πώς θα έπρεπε να χρησιμοποιείται.

$main-theme-color: $sass-pink;

$main-theme-color: $sass-pink

Με αυτό τον τρόπο προλαμβάνουμε μια αλλαγή θέματος που να οδηγεί σε κάτι σαν το $sass-pink: blue. Αυτό το άρθρο κάνει πολύ καλή δουλειά στο να εξηγήσει το πόσο σημαντικό είναι να δώσετε προσοχή στις μεταβλητές χρωμάτων.

Κάνοντας τα χρώματα πιο φωτεινά και πιο σκόυρα

Τόσο η συνάρτηση lighten όσο και η darken τροποποιούν την φωτεινότητα ενός χρώματος στο διάστημα HSL προσθέτοντας ή αφαιρώντας από τη φωτεινότητα σε αυτό το διάστημα. Βασικά, δεν είναι τίποτα παραπάνω από ψευδώνυμα για την παράμετρο $lightness της συνάρτησης adjust-color.

Το θέμα είναι ότι αυτές οι συναρτήσεις συχνά δεν παρέχουν το αναμενόμενο αποτέλεσμα. Από την άλλη η συνάρτηση mix είναι ένας ωραίος τρόπος για να κάνεις πιο φωτεινό ή πιο σκούρο ένα χρώμα αναμιγνύοντάς το είτε με το white (άσπρο) ή με το black (μαύρο).

Το πλεονέκτημα του να χρησιμοποιείς το mix αντί για κάποια από τις δύο προαναφερθείσες συναρτήσεις είναι ότι πηγαίνει προοδευτικά στο μαύρο (ή το άσπρο) καθώς μειώνεις το ποσοστό του χρώματος, ενώ το darken και το lighten υπερκαλύπτουν γρήγορα όλο το χρώμα με μαύρο ή άσπρο.

Αν δεν θέλεις να γράφεις τη συνάρτηση mix κάθε φορά, μπορείς να δημιουργήσεις δύο εύχρηστες συναρτήσεις, την tint και την shade (οι οποίες είναι επίσης μέρος του Compass) για να κάνεις το ίδιο πράγμα:

/// Φώτισε ελαφρά ένα χρώμα
/// @access public
/// @param {Color} $color - χρώμα το οποίο θα επεξεργαστούμε
/// @param {Number} $percentage - το ποσοστό του `$color` το οποίο θα περιέχεται μέσα στο χρώμα που θα επιστραφεί
/// @return {Color}
@function tint($color, $percentage) {
  @return mix(white, $color, $percentage);
}

/// Σκούρυνε ελαφρά ένα χρώμα
/// @access public
/// @param {Color} $color - χρώμα το οποίο θα σκουρύνει
/// @param {Number} $percentage - το ποσοστό του `$color` το οποίο θα περιέχεται μέσα στο χρώμα που θα επιστραφεί
/// @return {Color}
@function shade($color, $percentage) {
  @return mix(black, $color, $percentage);
}

/// Φώτισε ελαφρά ένα χρώμα
/// @access public
/// @param {Color} $color - χρώμα το οποίο θα επεξεργαστούμε
/// @param {Number} $percentage - το ποσοστό του `$color` το οποίο θα περιέχεται μέσα στο χρώμα που θα επιστραφεί
/// @return {Color}
@function tint($color, $percentage)
  @return mix($color, white, $percentage)

/// Σκούρυνε ελαφρά ένα χρώμα
/// @access public
/// @param {Color} $color - χρώμα το οποίο θα σκουρύνει
/// @param {Number} $percentage - το ποσοστό του `$color` το οποίο θα περιέχεται μέσα στο χρώμα που θα επιστραφεί
/// @return {Color}
@function shade($color, $percentage)
  @return mix($color, black, $percentage)

Λίστες

Οι λίστες είναι οι πίνακες της Sass. Μια λίστα είναι μια επίπεδη δομή δεδομένων (σε αντίθεση με τα maps) που έχει σαν σκοπό να αποθηκεύει τιμές οποιουδήποτε τύπου (ακόμη και λίστες, που μας οδηγεί σε εμφωλευμένες λίστες).

Οι λίστες πρέπει να ακολουθούν τα εξής guidelines:

• είτε σε μία σειρά, ή σε πολλές·
• αναγκαστικά σε πολλές σειρές αν δεν χωράνε σε γραμμή 80 χαρακτήρων·
• αν δεν χρησιμοποιούνται αυτούσιες για σκοπούς CSS, πάντα να διαχωρίζονται με κόμμα·
• πάντα να περικλείονται από παρενθέσεις·
• να έχουν κόμμα στο τέλος της γραμμής αν επεκτείνονται σε πολλές σειρές, να μην έχουν αν είναι στην ίδια σειρά.

// Yep
$font-stack: ('Helvetica', 'Arial', sans-serif);

// Yep
$font-stack: (
  'Helvetica',
  'Arial',
  sans-serif,
);

// Nope
$font-stack: 'Helvetica' 'Arial' sans-serif;

// Nope
$font-stack: 'Helvetica', 'Arial', sans-serif;

// Nope
$font-stack: ('Helvetica', 'Arial', sans-serif,);

// Yep
$font-stack: ('Helvetica', 'Arial', sans-serif)

// Nope (not supported)
$font-stack: (
  'Helvetica',
  'Arial',
  sans-serif,
)

// Nope
$font-stack: 'Helvetica' 'Arial' sans-serif

// Nope
$font-stack: 'Helvetica', 'Arial', sans-serif

// Nope
$font-stack: ('Helvetica', 'Arial', sans-serif,)

Όταν προσθέτεις νέα αντικείμενα σε μια λίστα, να χρησιμοποιείς πάντα το παρεχόμενο API. Μην δοκιμάζεις να προσθέσεις νέα αντικείμενα χειροκίνητα.

$shadows: (0 42px 13.37px hotpink);

// Yep
$shadows: append($shadows, $shadow, comma);

// Nope
$shadows: $shadows, $shadow;

$shadows: (0 42px 13.37px hotpink)

// Yep
$shadows: append($shadows, $shadow, comma)

// Nope
$shadows: $shadows, $shadow

Σε αυτό το άρθρο, σας προσφέρω αρκετές συμβουλές και κόλπα για το πώς να διαχειριστείτε σωστά lists στη Sass.

Maps

Με την Sass 3.3, οι συγγραφείς των stylesheet μπορούν να ορίσουν maps — τον όρο στη Sass για τους #fixme σχετιστικούς πίνακες, τα hash ή ακόμη και τα αντικείμενα Javascript. Το map είναι μια δομή δεδομένων που αντιστοιχίζει κλειδιά με τιμές. Και τα κλειδιά αλλά και οι τιμές μπορούν να είναι οποιουδήποτε τύπου δεδομένων, ακόμη και maps, αν και δεν θα συνιστούσα τη χρήση σύνθετων τύπων δεδομένων σαν κλειδιά ενός map, ας είμαστε λίγο λογικοί.

Τα maps πρέπει να είναι γραμμένα ως εξής:

• κενό μετά την άνω και κάτω τελεία (:)·
• άνοιγμα παρένθεσης (() στην ίδια γραμμή με την άνω και κάτω τελεία·
• κλειδιά σε εισαγωγικά αν είναι strings (που αναπαριστά το 99% των περιπτώσεων)·
• κάθε ζευγάρι κλειδιού/τιμής μόνο του σε νέα σειρά·
• κόμμα (,) στο τέλος κάθε κλειδιού/τιμής·
• κόμμα στο τέλος της σειράς (,) του τελευταίου αντικειμένου για να να είναι πιο εύκολο να προσθέσεις, να αφαιρέσεις ή να ανακατατάξεις τα αντικείμενα·
• κλείσιμο παρένθεσης (,) σε νέα, δική της γραμμή·
• όχι κενό ή νέα γραμμή μεταξύ της τελευταίας παρένθεσης ()) και του semi-colon (;).

Παράδειγμα:

// Yep
$breakpoints: (
  'small': 767px,
  'medium': 992px,
  'large': 1200px,
);

// Nope
$breakpoints: ( small: 767px, medium: 992px, large: 1200px );

// Yep
$breakpoints: ('small': 767px, 'medium': 992px, 'large': 1200px,)

// Nope
$breakpoints: ( 'small': 767px, 'medium': 992px, 'large': 1200px )

// Nope
$breakpoints: (small: 767px, medium: 992px, large: 1200px,)

// Nope (since it is not supported)
$breakpoints: (
  'small': 767px,
  'medium': 992px,
  'large': 1200px,
)

Τα αρθρα σχετικά με τα Sass maps είναι πολλά και προδίδουν πόσο πολυπόθητο ήταν αυτό το χαρακτηριστικό. Εδώ είναι 3 άρθρα που σας συστήνω να διαβάσετε: Using Sass Maps, Extra Map functions in Sass, Real Sass, Real Maps.

Σετ κανόνων CSS

Σε αυτό το σημείο, αυτό είναι πάνω κάτω μια επανάληψη όσων γνωρίζουν όλοι, αλλά ορίστε πώς πρέπει να γράφεται ένα σετ κανόνων CSS (τουλάχιστον σύμφωνα με τα περισσότερα guidelines, συμπεριλαμβανομένων και των CSS Guidelines):

• σχετικοί selectors στην ίδια γραμμή· άσχετοι selectors σε νέες γραμμές·
• η αγκύλη που ανοίγει τις δηλώσεις ({) να χωρίζεται από τον τελευταίο selector με ένα κενό·
• κάθε δήλωση να είναι σε νέα, δική της γραμμή·
• ένα κενό μετά την άνω και κάτω τελεία (:)·
• ένα semi-colon (;) στο τέλος όλων των δηλώσεων·
• η αγκύλη που κλείνει τις δηλώσεις (}) να είναι σε νέα, δική της γραμμή·
• μία νέα γραμμή μετά την τελευταία αγκύλη }.

Παράδειγμα:

// Yep
.foo, .foo-bar,
.baz {
  display: block;
  overflow: hidden;
  margin: 0 auto;
}

// Nope
.foo,
.foo-bar, .baz {
    display: block;
    overflow: hidden;
    margin: 0 auto }

// Yep
.foo, .foo-bar,
.baz
  display: block
  overflow: hidden
  margin: 0 auto

// Nope
.foo,
.foo-bar, .baz
    display: block
    overflow: hidden
    margin: 0 auto

Επιπρόσθετα με αυτά τα guidelines που είναι σχετικά με CSS, θέλουμε να δώσουμε προσοχή και στα παρακάτω:

• τοπικές μεταβλητές που δηλώνονται πριν από όλες τις δηλώσεις, και χωρίζονται από τις δηλώσεις με μια νέα γραμμή·
• κλήσεις σε mixin που δεν έχουν @content και εμφανίζονται πριν από όλες τις δηλώσεις·
• στους εμφωλευμένους selectors που εμφανίζονται πάντα μετά από νέα γραμμή·
• κλήσεις σε mixin που έχουν @content και εμφανίζονται μετά από εμφωλευμένο selector·
• όχι νέα γραμμή πριν την τελευταία αγκύλη (}).

Παράδειγμα:

.foo, .foo-bar,
.baz {
  $length: 42em;

  @include ellipsis;
  @include size($length);
  display: block;
  overflow: hidden;
  margin: 0 auto;

  &:hover {
    color: red;
  }

  @include respond-to('small') {
    overflow: visible;
  }
}

.foo, .foo-bar,
.baz
  $length: 42em

  +ellipsis
  +size($length)
  display: block
  overflow: hidden
  margin: 0 auto

  &:hover
    color: red

  +respond-to('small')
    overflow: visible

Ταξινόμηση των δηλώσεων

Δεν μπορώ να σκεφτώ πολλά θέματα όπου οι απόψεις διίστανται τόσο όσο αυτές που αφορούν την ταξινόμηση των δηλώσεων στη CSS. Συγκεκριμένα, υπάρχουν δύο παρατάξεις εδώ:

• παραμονή στην αλβαφητική ταξινόμηση·
• ταξινόμηση δηλώσεων κατά τύπο (position, display, colors, font, διάφορα…).

Υπάρχουν πλεονεκτήματα και μειονεκτήματα και στους δύο τρόπους. Από τη μία, η αλφαβητική ταξινόμηση είναι καθολική (τουλάχιστον για τις γλώσσες που χρησιμοποιούν το λατινικό αλφάβητο) και έτσι δεν υπάρχει επιχείρημα για την ταξινόμηση ενός property πριν από ένα άλλο. Παρόλα αυτά μου φαίνεται εξαιρετικά περίεργο να βλέπω properties όπως τα bottom και top να μην είναι ακριβώς δίπλα το ένα στο άλλο. Γιατί θα ‘πρεπε τα animations να εμφανίζονται πριν το display type; Υπάρχουν πολλές παραξενιές με την αλφαβητική ταξινόμηση.

.foo {
  background: black;
  bottom: 0;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  height: 100px;
  overflow: hidden;
  position: absolute;
  right: 0;
  width: 100px;
}

.foo
  background: black
  bottom: 0
  color: white
  font-weight: bold
  font-size: 1.5em
  height: 100px
  overflow: hidden
  position: absolute
  right: 0
  width: 100px

Από την άλλη, η ταξινόμηση των properties κατά τύπο βγάζει πολύ νόημα. Όλες οι δηλώσεις σχετικές με fonts είναι συγκεντρωμένες, τα top και bottom επανενώνονται και το διάβασμα ενός ruleset μοιάζει κάπως με το διάβασμα μιας μικρής ιστορίας. Αλλά εκτός αν παραμείνεις σε ορισμένες συμβάσεις όπως το Idiomatic CSS, υπάρχουν πολλά περιθώρια ερμηνείας σε αυτό τον τρόπο δράσης. Πού θα πήγαινε το white-space: στο font ή στο display; Πού ακριβώς ανήκει το overflow; Ποια είναι η σειρά των properties μέσα σε ένα γκρουπ (θα μπορούσε να είναι αλφαβητική, τι ειρωνία);

.foo {
  height: 100px;
  width: 100px;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  right: 0;
  background: black;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
}

.foo
  height: 100px
  width: 100px
  overflow: hidden
  position: absolute
  bottom: 0
  right: 0
  background: black
  color: white
  font-weight: bold
  font-size: 1.5em

Υπάρχει επίσης ακόμη ένα ενδιαφέρον υποδένδρο ταξινόμησης κατά τύπο που λέγεται Ομόκεντρη (Concentric) CSS και φαίνεται να είναι επίσης αρκετά δημοφιλές. Βασικά, η Ομόκεντρη CSS βασίζεται στο box-model για να για να ορίσει μια σειρά: ξεκινάει από έξω και προχωράει προς τα μέσα.

.foo {
  width: 100px;
  height: 100px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: black;
  overflow: hidden;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
}

.foo
  width: 100px
  height: 100px
  position: absolute
  right: 0
  bottom: 0
  background: black
  overflow: hidden
  color: white
  font-weight: bold
  font-size: 1.5em

Πρέπει να πω ότι ούτε εγώ δεν μπορώ να αποφασίσω. Μία πρόσφατη δημοσκόπηση στο CSS-Tricks είχε ως αποτέλεσμα ότι πάνω από το 45% των developers ταξινομεί τις δηλώσεις κατά τύπο ενώ το 14% ταξινομεί αλφαβητικά. Ακόμη, υπάρχει κι ένα 39% που τις ταξινομεί τελείως τυχαία, συμπεριλαμβανομένου και εμού.

Εξαιτίας αυτού, δεν θα επιβάλω κάποια επιλογή σε αυτό το styleguide. Διάλεξε όποια προτιμάς, αρκεί να είσαι σταθερός σε όλα τα stylesheets σου (πχ. όχι την τυχαία επιλογή).

Εμφώλευση Selectors

Ένα συγκεκριμένο χαρακτηριστικό που προσφέρει η Sass στο οποίο γίνεται υπερβολική κατάχρηση από τους developers είναι η εμφώλευση των selectors. Η εμφώλευση των selectors προσφέρει έναν τρόπο στους συγγραφείς stylesheet για να υπολογίσουν τους μεγάλους selectors εμφωλεύοντας μικρούς selectors μέσα σε άλλους.

Γενικός κανόνας

Για παράδειγμα, η ακόλουθη εμφώλευση Sass:

.foo {
  .bar {
    &:hover {
      color: red;
    }
  }
}

.foo
  .bar
    &:hover
      color: red

… παράγει αυτή τη CSS:

.foo .bar:hover {
  color: red;
}

Παρομοίως, από την Sass 3.3 και μετά είναι δυνατόν να χρησιμοποιήσεις την αναφορά στον τρέχοντα selector (&) για να παράγεις εξειδικευμένους selectors. Για παράδειγμα:

.foo {
  &-bar {
    color: red;
  }
}

.foo
  &-bar
    color: red

… παράγει αυτή τη CSS:

.foo-bar {
  color: red;
}

.foo-bar
  color: red

Αυτή η μέθοδος χρησιμοποιείται συχνά μαζί με τις Συνθήκες ονομασίας BEM για να παράγει selectors .block__element και .block--modifier βασισμένους στον αρχικό selector (πχ. .block σε αυτή την περίπτωση).

Το πρόβλημα με την εμφώλευση των selectors είναι ότι τελικά κάνει τον κώδικα πιο δύσκολο στην ανάγνωση. Πρέπει κανείς να υπολογίσει νοητά τον selector που παράγεται από τα επίπεδα εμφώλευσης· δεν είναι πάντα αρκετά εμφανές τι θα καταλήξει να είναι η CSS.

Αυτή η δήλωση αληθεύει όλο και περισσότερο όσο οι selectors γίνονται μακρύτεροι και οι αναφορές στον τρέχοντα selector (&) όλο και συχνότερες. Σε ένα σημείο, ο κίνδυνος να μην μπορείς να παρακολουθήσεις και να μην καταλαβαίνεις πια τι συμβαίνει είναι τόσο υψηλός που δεν αξίζει τον κόπο.

Για να αποφύγουμε μια τέτοια κατάσταση, αποφεύγουμε την εμφώλευση των selectors όσο το δυνατόν περισσότερο. Παρόλα αυτά, προφανώς υπάρχουν μερικές εξαιρέσεις σε αυτόν τον κανόνα.

Για να αποφύγουμε μια τέτοια κατάσταση, συνηθίζαμε να μιλάμε για το Inception rule πριν απο μερικά χρόνια. Αυτό συμβούλευε κατά της εμφώλευσης πέραν των 3 επιπέδων, έχοντας ως σημείο αναφοράς την ταινία Inception του Christopher Nolan. Θα ήθελα να γίνω λίγο πιο δραστικός και να προτείνω την αποφυγή εμφωλευμένων selectors όσο το δυνατόν περισσότερο.

Ενώ υπάρχουν πολλές προφανείς εξαιρέσεις στον κανόνα όπως θα δούμε στο επόμενο τμήμα, αυτή η άποψη φαίνεται να είναι αρκετά δημοφιλής. Μπορείτε να διαβάσετε γι’ αυτό με περισσότερες λεπτομέρειες στο Beware of Selector Nesting και στο Avoid nested selectors for more modular CSS.

Εξαιρέσεις

Για αρχή, επιτρέπεται και ακόμη προτείνεται να εμφωλεύετε τα pseudo-classes και pseudo-elements μέσα στον αρχικό selector.

.foo {
  color: red;

  &:hover {
    color: green;
  }

  &::before {
    content: 'pseudo-element';
  }
}

.foo
  color: red

  &:hover
    color: green

  &::before
    content: 'pseudo-element'

Η χρήση εμφώλευσης των selectors για pseudo-classes και pseudo-elements όχι μόνο βγάζει νόημα (επειδή έχει να κάνει με στενά συνδεδεμένους selectors), αλλά και επειδή βοηθάει στο να κρατήσετε τα πάντα σχετικά με ένα component στο ίδιο σημείο.

Ακόμη, όταν χρησιμοποιείς classes κατάστασης όπως το .is-active που δεν έχουν να κάνουν με ένα μόνο component, είναι απολύτως εντάξει να το εμφωλεύσετε κάτω από τον selector του component για να κρατήσετε τα πράγματα τακτοποιημένα.

.foo {
  // …

  &.is-active {
    font-weight: bold;
  }
}

.foo
  // …

  &.is-active
    font-weight: bold

Τελευταίο αλλά εξίσου σημαντικό, όταν γράφετε τα styles για ένα element επειδή τυχαίνει να εμπεριέχεται σε ένα άλλο συγκεκριμένο element, είναι επίσης εντάξει να χρησιμοποιήσετε εμφώλευση για να κρατήσετε τα πάντα σχετικά με αυτό το component στο ίδιο σημείο.

.foo {
  // …

  .no-opacity & {
    display: none;
  }
}

.foo
  // …

  .no-opacity &
    display: none

Όπως με όλα, οι λεπτομέρειες είναι κάπως άσχετες, η συνέπεια είναι το κλειδί. Αν αισθάνεστε εντελώς σίγουροι για την εμφώλευση των selectors, τότε χρησιμοποιήστέ την. Απλά σιγουρευτείτε ότι όλη σου η ομάδα είναι εντάξει με αυτό.