Come utilizzare sass per evitare correttamente l'incorporamento dei nomi delle classi bootstrap di twitter su HTML

Question

Sto lavorando a un progetto Rails che sta appena iniziando. Vogliamo usare Twitter bootstrap come base per i nostri stili, all'inizio avremmo semplicemente utilizzare i nomi delle classi di bootstrap direttamente sul codice HTML, proprio come è indicato nella documentazione del bootstrap, ma dopo aver letto i seguenti posti:

Lessons learned in maintainable css

Please stop embedding Bootstrap classes in your HTML

è diventato chiaro il motivo per cui questo non è il giusto perché utilizzare bootstrap, così dopo alcuni più letture:

Decouple Your CSS From HTML

smacss

tra l'altro, sembrava che usando @extend Sass era il modo corretto per evitare di usare i nomi delle classi di bootstrap, così invece di fare questo:

<button type="submit" class="btn">Search</button> 

ci farebbe questo:

<button type="submit" class="button">Search</button> 

e il nostro codice sass sarebbe simile a questa:

.button { 
    @extend ".btn"; 
} 

Il problema con questo approccio, oltre al gruppo di selettori aggiuntivi che verranno aggiunti ogni volta che estendiamo una classe di bootstrap solo per utilizzare un nome diverso, è che nei casi in cui bootstrap utilizza selettori in questo modo:

.form-search .input-append .btn, .form-search .form-input-append .btn { 
    border-radius: 0 14px 14px 0; 
} 

la tasto non sarà possibile ottenere lo stile giusto, perché sass non si applicherà la stessa regola a nostro nome classe personalizzata, voglio dire, sass è non fare questo:

.form-search .input-append .btn, .form-search .input-append .button, 
.form-search .form-input-append .btn, .form-search .form-input-append .button { 
    border-radius: 0 14px 14px 0; 
} 

Allora mi chiedo, è questo il modo giusto di evitare di incorporare i nomi delle classi di bootstrap in HTML, in tal caso, come dovrei gestire questo problema (succede frequente? y)? in caso contrario, quale sarebbe un modo migliore per utilizzare nomi di classi personalizzati, ma ottenere comunque gli stili dal bootstrap.

Apprezzo molto i vostri pensieri su questo. Si prega di tenere presente che sto solo imparando sul web design generale (css, sass, less, html, js, ecc.).

Answer 1

Quando si rinomina .btn in .button, si dovrebbe anche rinominare .form-search in .form-searchnew ecc.? In questo caso il codice sass nell'esempio di cui sopra dovrebbe essere qualcosa di simile:

.form-searchnew .input-appendnew .button { 
    extend(.form-search .input-append .btn); 
} 

Quale senso (non so sass) e risultati nel css che ci si aspetta.

Penso che il bootstrap non riguardi solo i CSS. Bootstrap riguarda css, html (struttura) e javascript. Anche quando si separa il css da html non sarebbe facile migrare ad un altro framework. Oltre al css dovrai modificare anche la struttura html e la chiamata javascript.

Esempio di migrazione da Bootstrap di Twitter 2 a 3 (vedere: Updating Bootstrap to version 3 - what do I have to do?). Mi chiedevo anche se potessi migrare estendendo le vecchie classi al nuovo css (vedi: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/). Dopo aver letto il numero migration guide, penso che non sia possibile.

Altre soluzioni. Angular JS disaccoppia il Bootstrap di Twitter da javascript. Anche in questo caso le migrazioni non sembrano essere indolori vedi: Angular Dialog directives with Bootstrap 3

Forse anche leggere questo post: http://www.jasonwong.org/post/45849350459/migrating-from-zurb-foundation-twitter-bootstrap-to. Si riferisce a Bourdon e Neat.

Esempio dal loro sito:

<!-- HTML markup for the section right below this code block --> 
<section> 
    <aside>What is it about?</aside> 
    <article>Neat is an open source semantic grid framework built on top of Sass and Bourbon…</article> 
</section> 

// Enter Neat 
section { 
    @include outer-container; 
    aside { @include span-columns(3); } 
    article { @include span-columns(9); } 
} 
// And the result is... 

Come si suol dire: "si basa interamente su mixin Sass e non inquina il codice HTML", che sembra il modo in cui si sta cercando.

Answer 2

Usa @extend, ma non citare selettori:

.button { @extend .btn; }

poi vedrete che si estende Sass selettori connessi anche, come si vuole (.form-search .input-append .btn etc.).

... oltre al gruppo di selettori aggiuntivi che verranno aggiunti ogni volta che estendiamo una classe di bootstrap solo per utilizzare un nome diverso ...

@extend opere copiando selettori. Se non lo vuoi, puoi "estenderlo" in HTML, ad esempio aggiungi i nomi delle classi di Bootstrap. :)

Answer 3

Vi consiglio di dare un'occhiata alle classi segnaposto sass http://sass-lang.com/documentation/file.SASS_REFERENCE.html#placeholders per non farcire il vostro css. Molto probabilmente non utilizzerai tutti i singoli elementi inclusi nel bootstrap e i segnaposto verranno scritti sul tuo foglio di stile solo se vengono effettivamente estesi nel tuo codice.

Inoltre, penso che le persone tendono a confondersi su come funzionano i framework css e come funziona il disaccoppiamento di css e html. Per i siti Web di grandi dimensioni (o quelli che ci si aspetta che diventino molto grandi), dove le dimensioni delle prestazioni e dei file css sono cruciali, un approccio OOCSS è la soluzione migliore. E questo significa inevitabilmente che hai codice di formattazione direttamente nel tuo HTML.

Se riesci a essere un po 'meno efficiente e vuoi che il tuo HTML sia pulito, assicurati di usare classi semantiche (esempi per i pulsanti: invito all'azione, call-to-action-secondary, submit, btn- primary, btn-corporate-colour, ecc ...)

Ricordati anche di scollegare il tuo JS dai CSS! utilizzare classi speciali per il collegamento di comportamento (ad esempio js-submit, js-call-to-action, ecc ....)

Ultimo ma non meno importante: non pianificare l'aggiornamento del framework css. Queste strutture sono pensate per darvi un vantaggio, non per essere la vostra soluzione progettuale globale. Estendali, adattali, personalizzali, investi nel design e crea il tuo look per rendere unica la tua app. Se ciò che ti fa pensare all'aggiornamento è una preoccupazione per tenere il passo con le modifiche standard, meglio usare i mixin di bussola.

Answer 4

Per essere nuovi nella maggior parte di questo, sei sulla buona strada; le risorse che hai letto sono eccellenti. Ma, penso che le preoccupazioni che hai potrebbero non essere giustificate:

... il pulsante non otterrà lo stile giusto perché sass non applicherà la stessa regola al nostro nome di classe personalizzato ...

In effetti, penso che tu debba sbagliarti. Secondo la documentazione Sass:

@extend funziona inserendo il selettore allungabile (ad esempio .seriousError) in qualsiasi parte del foglio di stile che appare il selettore estesa (.e.g .error).

Vedere http://sass-lang.com/documentation/file.SASS_REFERENCE.html#how_it_works per l'esempio di codice completo.

La soluzione originale era effettivamente corretta. Usa extends, ma senza le virgolette:

.button { 
    @extend .btn; //no quotes 
} 

Ho provato questo utilizzando il tuo esempio, e funziona correttamente. Sass copia tutti i selettori con ".btn" e su quei selettori appena creati, sostituisce ".btn" con ".button".

Inoltre, se Sass produce troppe duplicazioni a proprio piacimento, non preoccuparti (a patto che segui le best practice come indicato dai link che hai postato). Il codice duplicato è facilmente compresso se il server utilizza gzip o l'equivalente; il client non dovrebbe notare tempi di caricamento più lenti, anche se potrebbe essere necessario un po 'più di tempo per "decomprimere" il CSS. Per quanto riguarda la velocità del selettore CSS, non preoccuparti neanche di questo; l'unico caso in cui la velocità è importante per i selettori è sul lato JavaScript, in particolare con jQuery. Per il tuo codice Sass, segui semplicemente le best practice per la manutenibilità (in particolare, la modularizzazione come stai cercando di fare, ad esempio SMACSS) e sarai a posto.

Answer 5

Le risposte fornite da sam e tjklemz ti aiuteranno a risolvere la tua sfida tecnica immediata, ma è possibile separare ancora di più il tuo CSS e HTML. Darò un esempio qui sotto, ma tieni presente che questo è solo un breve esempio per dimostrare la potenza dei mix/estendere le classi CSS.

Inoltre, consigliamo vivamente di controllare lo ZURB Foundation framework, in quanto è nativamente SASS, e progettato tenendo conto di questo stile di sviluppo.

Ad esempio:

<body> 
    <div id="my-header"> 
     <h1><a href="#">My Company</a></h1> 
     <h2>My Tagline</h2> 
    </div> 
    <div id="my-main"> 
     <div class="my-widget"> 
      <h1>Widget Title</h1> 
      <a>Widget Option 1</a> 
      <a>Widget Option 2</a> 
     </div>  
    </div> 
</body> 

Con lo SCSS accompagnamento:

//these examples wouldn't really work 
//because bootstrap needs more markup 
#my-header { 
    @extend .navbar; 
} 
#my-header h1 { 
    @extend .branding; 
} 
#my-main { 
    @extend .container; 
} 

//good example 
.my-widget { 
    @extend .well; 
    @extend .hero-unit; 
} 
.my-widget a { 
    @extend .btn; 
}