CSS
Modelli di progettazione CSS

Angular 2 AngularJS ASP.NET HTML JavaScript jQuery PHP SVG twitter-bootstrap WordPress
Ricerca…


introduzione

Questi esempi servono per documentare modelli di progettazione specifici per CSS come BEM , OOCSS e SMACSS .

Questi esempi NON sono per documentare framework CSS come Bootstrap o Foundation .

Osservazioni

Questi esempi sono per la documentazione di metodologie / schemi di progettazione specifici per CSS.

Queste metodologie includono ma non sono esclusive di quanto segue:

Questi esempi NON sono per documentare framework CSS come Bootstrap o Foundation . Sebbene si possano includere esempi su come applicare uno o più pattern / pattern di progettazione CSS con un framework CSS, questi esempi devono focalizzarsi sulle metodologie / schemi di progettazione con quel particolare framework e sull'uso del framework stesso.

BEM

BEM sta per Blocks, Elements and Modifiers . È una metodologia inizialmente concepita dalla società tecnologica russa Yandex , ma che ha ottenuto un certo successo tra gli sviluppatori web americani e dell'Europa occidentale.

Come lo stesso implica, la metologia BEM si basa esclusivamente sulla componentizzazione del codice HTML e CSS in tre tipi di componenti:

  • Blocchi: entità indipendenti che sono significative per conto proprio

    Gli esempi sono header , container , menu , checkbox e textbox

  • Elementi: parte di blocchi che non hanno un significato autonomo e sono legati semanticamente ai loro blocchi.

    Esempi sono menu item , menu item list item , checkbox caption e header title

  • Modificatori: contrassegni su un blocco o un elemento, utilizzati per modificare l'aspetto o il comportamento

    Gli esempi sono disabled , highlighted , checked , fixed , size big e color yellow

L'obiettivo di BEM è quello di ottimizzare la leggibilità, la manutenibilità e la flessibilità del codice CSS. Il modo per raggiungere questo obiettivo è applicare le seguenti regole.

  • Gli stili di blocco non dipendono mai da altri elementi in una pagina
  • I blocchi dovrebbero avere un nome breve e semplice ed evitare caratteri _ o -
  • Quando si disegnano elementi, utilizzare i selettori di formato blockname__elementname
  • Quando blockname--modifiername stile, usa i selettori di formato blockname--modifiername e blockname__elementname--modifiername
  • Elementi o blocchi che hanno modificatori dovrebbero ereditare tutto dal blocco o elemento che sta modificando eccetto le proprietà che il modificatore dovrebbe modificare

Esempio di codice

Se applichi BEM ai tuoi elementi del modulo, i selettori CSS dovrebbero assomigliare a questo: 

.form { }                       // Block
.form--theme-xmas { }           // Block + modifier
.form--simple { }               // Block + modifier
.form__input { }                // Block > element
.form__submit { }               // Block > element
.form__submit--disabled { }     // Block > element + modifier

L'HTML corrispondente dovrebbe assomigliare a questo: 

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input class="form__submit form__submit--disabled" type="submit" />
</form>


Modified text is an extract of the original Stack Overflow Documentation
Autorizzato sotto CC BY-SA 3.0
Non affiliato con Stack Overflow