ονοματολογία css class

[Επισκέπτης]

Καλησπέρα, θα είμαι σύντομος.

Σήμερα είδα σε css το όνομα της

class="ena--dio_tria"

Νομίζω είναι λάθος. Ούτε σκέτο "ena-dio" επιτρέπετε από ότι ξέρω. Μόνο το _ επιτρέπετε.

Τι είναι σωστό ;

 

Ευχαριστώ

[XPHSTOS_]

Αναφέρεσε στην BEM μεθολογία η οποία δεν είναι απόλυτη ακριβώς στην ονοματοδοσία αλλά έχει κάποιους κανόνες.
BEM stands for  Βlock__Element--Modifier

Θα το δώσω με παράδειγμα για να γίνει πιο εύκολα κατανοητό:

<button class="btn btn--primary">
  <span class="btn__label">Click me</span>
</button>

Έχουμε ένα block (προσοχή, δεν έχει σχέση να κάνει με το display property του css) το οποίο έχει ένα child element με το όνομα label.
Άρα σύμφωνα με την μεθοδολογία παίρνει το όνομα label και με 2 underscores (__) ενώνεται με τo parent (block) που ονομάζεται .btn.
Παρατηρούμε επίσης ότι το btn block έχει και ένα modifier.
Με τους modifiers συνήθως δηλώνουμε παραλλαγές(primary/secondary) ή states (open/close) που αφορούν το block element μας.
Modifier μπορούμε να έχουμε και στα block και στα elements και μπορούμε να έχουμε όσους θέλουμε.
Όπως επίσης μπορούμε να έχουμε block μέσα σε block.

Γιατί λέω ότι η ονοματοδοσία κατα τη BEM δεν είναι απόλυτη.
Τα __ και τα -- είναι συμβάσεις που καλούμαστε να ακολουθήσουμε οι ίδιοι.
Θα μπορούσαμε να βάλουμε λίγο από SMACSS στην μεθοδολογία μας και να χρησιμοποιούμε μόνο τα __ για τα block__element και αντί για --modifier να έχουμε κλάσσεις όπως isPrimary.
Μπορούμε να κάνουμε ότι θέλουμε, αρκεί να το ξέρουμε εξ αρχής και να το τηρούμε.
Απλά η BEM μας προτρέπει να χρησιμοποιήσουμε αυτό.

Που χρειάζεται προσοχή?!
Αν για κάποιο λόγο δεις ότι πας να γράψεις block__element__element τότε αυτόματα ξέρεις ότι κάνεις κάτι λάθος.
Δεν μπορούμε να έχουμε element μέσα σε element.
Για παράδειγμα:

<article class="article">
  <header class="article__header">
      <h1 class="article__header__title">
          Title
      </h1>
  </header>
  ...
</article>

Εδω ο τίτλος του article είναι element μέσα στο header το οποίο με την σειρά του είναι element στο block article.
Αυτό του είδος το nesting δεν επιτρέπεται κατα το ΒΕΜ.
Εδώ έχουμε 2 επιλογές αλλά στην πραγματικότητα 1.
Τι εννοώ? 

1) Μπορούμε να σπάσουμε το header και να γίνει ένα δικό του block.
Οπότε έχουμε το εξής:

<article class="article">
  <header class="header article__header">
      <h1 class="header__title">
          Title
      </h1>
  </header>
  ...
</article>

H κλάσση article__header είναι optional και θα την χρησιμοποιούσαμε μόνο όταν θα θέλαμε να δώσουμε CSS στο header, αλλά το CSS αυτό θα αφορούσε το header μόνο όταν θα ήταν μέσα στο article.

2) Απλά αφαιρούμε το element από το title.
Δηλαδή:

<article class="article">
  <header class="article__header">
      <h1 class="article__title">
          Title
      </h1>
  </header>
  ...
</article>

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

Πότε όμως θα θέλαμε τον 1ο τρόπο?
Έστω το <header><h1>Title</h1></header> είναι ένα component το οποίο το χρησιμοποιούμε και αλλού και αυτό "κουβαλάει" ένα styling.
Έχει συγκεκριμένο color, font-size etc.
Στην ουσία είναι ένα block το οποίο το χρησιμοποιούμε και σε άλλα σημεία στον κώδικα μας...
Για να κρατήσουμε τον κώδικα μας καθαρό και χωρίς να χρειαστεί να επαναλάβουμε όλον αυτόν τον κώδικα θα χρησιμοποιούσαμε το block αυτό ως έχει και ΑΝ θέλαμε να μεταβάλλουμε κάτι στον κώδικα του πχ να του δώσουμε ένα margin-bottom όταν βρίσκεται μέσα στο άρθρο.
Για να μην "σπάσουμε" το αρχικό block, απλά θα δίναμε την κλάση article__header και σε αυτή την κλάση μέσα στο CSS για το article θα δίναμε το margin-bottom.


Τέλος να προτείνω αυτό το extension για το VSCode το οποίο θα σε βοηθήσει πολύ.
https://marketplace.visualstudio.com/items?itemName=Box-Of-Hats.bemhelper

Επεξ/σία 26 Ιανουαρίου 2021 από XPHSTOS_

[Predatorkill]

2 ώρες πριν, gekatsou είπε

Καλησπέρα, θα είμαι σύντομος.

Σήμερα είδα σε css το όνομα της

class="ena--dio_tria"

Νομίζω είναι λάθος. Ούτε σκέτο "ena-dio" επιτρέπετε από ότι ξέρω. Μόνο το _ επιτρέπετε.

Τι είναι σωστό ;

 

Ευχαριστώ

Δεν υπαρχει κανενα στανταρ και κανενας περιορισμος. Μπορεις καλλιστα να βαλεις ενα-δυο-τρια αντι για λατινικους χαρακτηρες. 
 

Υπαρχουν patterns ομως και naming conventions που καλο θα ηταν να τηρουνται για να βοηθουν τον προγραμματιστη και μονο, ο τελικος χρηστης δεν εμδιαφερεται τι γινεται απο πισω.

[papmel]

και οταν δεν εχεις πανω απο μια class δεν χρειαζονται τα "  πχ class=onoma_class-edo αρκει να μην εχεις κενο στο ονομα και invalid chars.