Migliori file CSS Practices Magento

Question

Ho un paio di domande sui file CSS forniti con Magento e le migliori pratiche per fare le loro variazioni.

Prima di tutto non è stato in grado di trovare una descrizione di base per tutti i file CSS che vengono con Magento. Per esempio, quando viene utilizzato il file reset.css?

Ma la mia domanda più importante è: perché Magento sta facendo quasi tutto nella styles.css di default? Non sarebbe una migliore idea di dividere il css in diversi file più piccoli e caricare quelli nel file local.xml per i diversi punti di vista? Questo permette un maggiore controllo sul styling degli elementi.

Per esempio si potrebbe creare un file css per semplici prodotto è stato visto e caricare il file in local.xml e un altro per i prodotti raggruppati.

Un'altra domanda che ho è, circa gli stili -moz- *. Perché sono in styles.css e non in un file specifico css firefox? Se io uso Opera (o qualsiasi altro browser) mostrano questo stili come errori perché non sanno su di loro.

Answer 1

Ma la mia domanda più importante è, perché Magento sta facendo quasi tutto in la styles.css di default? Non sarebbe una migliore idea di dividere il css in diversi file più piccoli e caricare quelli nel file local.xml per i diversi punti di vista? Questo permette un maggiore controllo sul styling degli elementi.

No, non sarebbe meglio. file CSS separati si tradurrebbe in più le richieste HTTP che rallentare il vostro sito web. Credo che tu abbia 2 opzioni qui:

1) Soggiorno con 1 grande file CSS ma minify si

2) dividerli in diversi file più piccoli per aumentare la leggibilità per se stessi e li hanno combinati automaticamente utilizzando il Fooman Speedster Magento estensione .

Un'altra domanda che ho è, circa gli stili -moz- *. Perché sono in lo styles.css e non in un file specifico css firefox? Se io uso Opera (O qualsiasi altro browser) mostrano questo stili come errori perché non si sa su di loro.

Per quanto ne sappia è considerata pratica generale per farlo in questo modo. Ci sono più svantaggi sulla scrittura ogni stile specifico del browser in un file separato.

Per esempio basta inserirlo come questo per gli angoli arrotondati:

.rounded-corners {
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
}

A seconda del browser che il visitatore sta usando lo stile corrispondente verrà applicato. I browser che non supportano queste proprietà sarà solo vi mostrerà gli angoli quadrati.

Answer 2

Hai avuto modo di dare un'occhiata a questo da entrambi i lati.

• Il browser, il download e il rendering del contenuto
• Lo sviluppatore, la scrittura / modifica / gestione dei CSS

Un browser vuole minor numero di file necessari, combinati e minified. Così come idealmente avere il meno e il più semplice possibile CSS (es. Non avendo 1+ livelli di dipendenza gerarchica).

Ma uno sviluppatore può lottare per gestire il tutto in un unico documento, o trovarlo meno produttivi al lavoro del genere.

Questo è davvero il motivo per cui esiste l'elaborazione CSS (ad es. SASS / MENO). In modo che si può avere semplice, pulito e commentato CSS, strutturato come più vi piace, ma ciò che il browser ottiene è un file combinato e file ottimizzato. Quindi, questo ti dà il meglio di entrambi i mondi.

Realisticamente, è necessario solo 2 fogli di stile (stampa e TV a schermo) - anche se i browser più recenti è possibile solo fare questo tramite le media query.

Per quanto riguarda ingresso CSS è interessato, fare tutto ciò che rende lo sviluppo più comodo per voi. Ma per quanto riguarda l'uscita è interessato, cercare di assicurarsi di avere il minor numero di file, ottimizzato e de-ingannati possibile.