Approccio

Scopri i principi guida, le strategie e le tecniche utilizzate per creare e mantenere Bootstrap in modo da poterlo personalizzare ed estendere più facilmente.

Sebbene le pagine introduttivi forniscano un tour introduttivo del progetto e di ciò che offre, questo documento si concentra sul motivo per cui facciamo le cose che facciamo in Bootstrap. Spiega la nostra filosofia di costruire sul web in modo che gli altri possano imparare da noi, contribuire con noi e aiutarci a migliorare.

Vedi qualcosa che non suona bene, o forse potrebbe essere fatto meglio? Apri un problema : ci piacerebbe discuterne con te.

Riepilogo

Ci immergeremo maggiormente in ciascuno di questi, ma ad alto livello, ecco cosa guida il nostro approccio.

• I componenti dovrebbero essere reattivi e mobile-first
• I componenti dovrebbero essere costruiti con una classe base ed estesi tramite classi di modifica
• Gli stati dei componenti dovrebbero obbedire a una scala z-index comune
• Quando possibile, preferisci un'implementazione HTML e CSS rispetto a JavaScript
• Quando possibile, usa le utilità su stili personalizzati
• Quando possibile, evita di imporre rigidi requisiti HTML (selettori figli)

reattivo

Gli stili reattivi di Bootstrap sono progettati per essere reattivi, un approccio che viene spesso definito mobile-first . Usiamo questo termine nei nostri documenti e siamo ampiamente d'accordo con esso, ma a volte può essere troppo ampio. Sebbene non tutti i componenti debbano essere completamente reattivi in ​​Bootstrap, questo approccio reattivo mira a ridurre le sostituzioni CSS spingendoti ad aggiungere stili man mano che il viewport diventa più grande.

In Bootstrap, lo vedrai più chiaramente nelle nostre query sui media. Nella maggior parte dei casi, utilizziamo min-widthquery che iniziano ad essere applicate a un punto di interruzione specifico e continuano attraverso i punti di interruzione più alti. Ad esempio, a .d-nonesi applica min-width: 0dall'infinito. D'altra parte, a .d-md-nonesi applica dal punto di interruzione medio in su.

A volte lo useremo max-widthquando la complessità intrinseca di un componente lo richiede. A volte, queste sostituzioni sono funzionalmente e mentalmente più chiare da implementare e supportare rispetto alla riscrittura delle funzionalità principali dai nostri componenti. Ci sforziamo di limitare questo approccio, ma lo utilizzeremo di tanto in tanto.

Classi

A parte il nostro Reboot, un foglio di stile di normalizzazione cross-browser, tutti i nostri stili mirano a utilizzare le classi come selettori. Ciò significa evitare i selettori di tipo (ad esempio, input[type="text"]) e le classi padre estranee (ad esempio, .parent .child) che rendono gli stili troppo specifici per essere facilmente sovrascritti.

Pertanto, i componenti dovrebbero essere costruiti con una classe base che ospita coppie proprietà-valore comuni, da non sovrascrivere. Ad esempio, .btne .btn-primary. Usiamo .btnper tutti gli stili comuni come display, paddinge border-width. Usiamo quindi modificatori come .btn-primaryper aggiungere il colore, il colore di sfondo, il colore del bordo, ecc.

Le classi di modifica devono essere utilizzate solo quando sono presenti più proprietà o valori da modificare su più varianti. I modificatori non sono sempre necessari, quindi assicurati di salvare effettivamente righe di codice e di evitare sostituzioni non necessarie durante la creazione. Buoni esempi di modificatori sono le nostre classi di colori del tema e le varianti di taglia.

scale dell'indice z

Ci sono due z-indexscale in Bootstrap: elementi all'interno di un componente e componenti sovrapposti.

Elementi componenti

• Alcuni componenti in Bootstrap sono costruiti con elementi sovrapposti per evitare doppi bordi senza modificare la borderproprietà. Ad esempio, gruppi di pulsanti, gruppi di input e impaginazione.
• Questi componenti condividono una z-indexscala standard di 0through 3.
• 0è predefinito (iniziale), 1è :hover, 2è :active/ .activeed 3è :focus.
• Questo approccio soddisfa le nostre aspettative di massima priorità dell'utente. Se un elemento è focalizzato, è in vista e all'attenzione dell'utente. Gli elementi attivi sono i secondi più alti perché indicano lo stato. Il passaggio del mouse è il terzo più alto perché indica l'intento dell'utente, ma quasi tutto può essere posizionato al passaggio del mouse.

Sovrapporre componenti

Bootstrap include diversi componenti che funzionano come un overlay di qualche tipo. Ciò include, in ordine di valore più alto z-index, menu a discesa, barre di navigazione fisse e permanenti, modali, descrizioni comandi e popover. Questi componenti hanno una propria z-indexscala che inizia a 1000. Questo numero iniziale è stato scelto arbitrariamente e funge da piccolo buffer tra i nostri stili e gli stili personalizzati del tuo progetto.

Ogni componente di overlay aumenta z-indexleggermente il proprio valore in modo tale che i principi comuni dell'interfaccia utente consentano agli elementi focalizzati sull'utente o al passaggio del mouse di rimanere sempre visibili. Ad esempio, un modal è il blocco dei documenti (ad esempio, non puoi eseguire nessun'altra azione tranne l'azione del modal), quindi lo mettiamo sopra le nostre barre di navigazione.

Scopri di più su questo nella nostra z-indexpagina di layout .

HTML e CSS su JS

Quando possibile, preferiamo scrivere HTML e CSS su JavaScript. In generale, HTML e CSS sono più prolifici e accessibili a più persone con tutti i diversi livelli di esperienza. HTML e CSS sono anche più veloci nel tuo browser di JavaScript e il tuo browser generalmente ti offre molte funzionalità.

Questo principio è la nostra API JavaScript di prima classe che utilizza gli dataattributi. Non è necessario scrivere quasi nessun JavaScript per utilizzare i nostri plugin JavaScript; invece, scrivi HTML. Maggiori informazioni su questo nella nostra pagina panoramica di JavaScript .

Infine, i nostri stili si basano sui comportamenti fondamentali degli elementi web comuni. Quando possibile, preferiamo utilizzare ciò che fornisce il browser. Ad esempio, puoi inserire una .btnclasse su quasi tutti gli elementi, ma la maggior parte degli elementi non fornisce alcun valore semantico o funzionalità del browser. Quindi, invece, usiamo <button>s e <a>s.

Lo stesso vale per i componenti più complessi. Sebbene potremmo scrivere il nostro plug-in di convalida del modulo per aggiungere classi a un elemento padre in base allo stato di un input, consentendoci così di definire lo stile del testo ad esempio rosso, preferiamo utilizzare gli pseudo-elementi :valid/ :invalidche ogni browser ci fornisce.

Utilità

Le classi di utilità, precedentemente aiutanti in Bootstrap 3, sono un potente alleato nella lotta contro il rigonfiamento dei CSS e le scarse prestazioni della pagina. Una classe di utilità è tipicamente un singolo accoppiamento proprietà-valore immutabile espresso come una classe (ad esempio, .d-blockrappresenta display: block;). Il loro fascino principale è la velocità d'uso durante la scrittura di HTML e la limitazione della quantità di CSS personalizzati che devi scrivere.

In particolare per quanto riguarda i CSS personalizzati, le utilità possono aiutare a combattere l'aumento delle dimensioni dei file riducendo le coppie proprietà-valore più comunemente ripetute in classi singole. Questo può avere un effetto drammatico su larga scala nei tuoi progetti.

HTML flessibile

Sebbene non sia sempre possibile, ci sforziamo di evitare di essere eccessivamente dogmatici nei nostri requisiti HTML per i componenti. Pertanto, ci concentriamo su classi singole nei nostri selettori CSS e cerchiamo di evitare i selettori figli immediati ( >). Questo ti dà maggiore flessibilità nella tua implementazione e aiuta a mantenere il nostro CSS più semplice e meno specifico.

Convenzioni di codice

Code Guide (dal co-creatore di Bootstrap, @mdo) documenta come scriviamo il nostro HTML e CSS su Bootstrap. Specifica le linee guida per la formattazione generale, le impostazioni predefinite di buon senso, gli ordini di proprietà e attributi e altro ancora.

Usiamo Stylelint per far rispettare questi standard e altro nel nostro Sass/CSS. La nostra configurazione personalizzata di Stylelint è open source e disponibile per l'uso e l'estensione da parte di altri.

Usiamo vnu-jar per applicare HTML standard e semantico, oltre a rilevare errori comuni.