Cosa c'è di sbagliato in questo approccio ai CSS?

Question

Cosa c'è di sbagliato in questo approccio ai CSS?

#1 da (6 voti)
#2 da (2 voti)
#3 da (1 voti)

0

Ho un sito Jekyll statico.

Il sito web è costruito una volta , sul mio computer, e poi inviato al server sotto forma di semplici file HTML, immagine e CSS, per essere servito da un normale server HTTP.

Questo processo di costruzione coinvolge un motore di template che deve incollare vari componenti insieme.

Ad esempio, questo è il modello per i miei post e pagine (l'unico altro modello che ho è per la pagina principale, che condivide parecchio con questo):

<!DOCTYPE html>
<html>
    <head>
        {% include head.html %}
        <link rel="stylesheet" href="/css/main.css">
        {% if page.title == "Tautological Cascade" %}
            <title>Tautological Cascade</title>
        {% else %}
            <title>Tautological Cascade: {{ page.title }}</title>
        {% endif %}
    </head>

    <body>
        <div class="site" >
            {% include header.html %}
            {{ content }}
            {% include footer.html %}
        </div>
    </body>
</html>

La parte più importante da notare qui è la sezione body . Fondamentalmente racchiude un file markdown elaborato tra due file HTML.

Attualmente, ho solo un file CSS principale, che viene utilizzato da TUTTE le pagine.

Trovo che questo approccio sia un po 'poco pratico. Tutto è definito in là, e sta diventando disordinato. Accoppialo con la mia generale ignoranza su tutto tranne che sui CSS di base e ottieni qualcosa di simile a un incubo.

La mia idea è questa: CSS in linea per tutte queste parti che colla colla insieme.

Quindi header.html avrebbe il suo CSS nel suo file, footer.html avrebbe il suo CSS e il file che descrive il contenuto int proprio.

Questa è la soluzione corretta al mio problema? C'è qualcosa di sbagliato in questo approccio?

html maintainability css web-design

posta Aber Kled 14.10.2013 - 22:26

fonte

3 risposte

Leggi altre domande sui tag html maintainability css web-design

Qual è lo standard per descrivere funzioni e oggetti? La sicurezza sfrutta una fatalità? [chiuso]

score 6 · Answer 1

Hai identificato il problema giusto, ma c'è una soluzione migliore.

Puoi includere tutti i file CSS necessari nel tag <head> . Quindi tutto ciò che devi fare è aggiungere un po 'di logica in più per afferrare il CSS appropriato per una determinata pagina.

<head>
    {% include head.html %}
    <link rel="stylesheet" href="/css/main.css">
    {% if page.css != "" %}
        <link rel="stylesheet" href="/css/{%page.css%}">
    {% endif %}
    {% if page.title == "Tautological Cascade" %}
        <title>Tautological Cascade</title>
    {% else %}
        <title>Tautological Cascade: {{ page.title }}</title>
    {% endif %}
</head>

Quindi ogni pagina può definire qualsiasi CSS speciale di cui ha bisogno, separatamente da tutto il resto. Basta non andare troppo lontano in questa direzione, al punto che stai duplicando i tuoi stili tra i file .css specifici delle pagine.

score 2 · Answer 2

L'integrazione di CSS è un male necessario per le e-mail in formato HTML a causa del supporto client scadente per i fogli di stile, ma per le pagine Web è preferibile trovare un approccio che struttura il CSS ma lo mantiene separato dall'HTML. Ciò consente ai browser di memorizzarlo separatamente.

Ci sono tre approcci principali.

Collega a più fogli di stile dal tuo <head> , come menzionato da Bobson.
Dividi i tuoi fogli di stile in sezioni autonome e collegali insieme a @import .
Utilizza un preprocessore CSS. (Dato che stai usando uno strumento Ruby per costruire il tuo sito, probabilmente vorrai usare SASS . Ciò ti consente di lavorare con un file sorgente molto più semplice, perché tiene in gran conto la ridondanza che i CSS hanno.

Questi approcci possono anche essere combinati.

score 1 · Answer 3

Il problema con questo approccio è che si duplica la maggior parte degli stessi stili in footer.css e header.css o si dovrà includere un foglio di stile common.css sia nel footer che nell'intestazione, che molto probabilmente sarebbe contiene ancora la maggior parte degli stili.

L'approccio che uso spesso è di avere un foglio di stile chiamato cbc.css per garantire rigorosamente gli stessi stili su più browser. È un brutto stile che di solito comporta l'inserimento del pad a 0 e cose del genere. Contiene anche tutti gli stili specifici del browser per iniziare sulla stessa pagina.

Tutti gli stili relativi ai temi vanno in common.css. non dovrebbe fare riferimento a qualsiasi id in modo specifico, e, se posso aiutarlo, non dovrebbe fare riferimento alle classi neanche (se ti trovi a usare classi come id, non appartiene qui). L'idea è che con cbc.css, la maggior parte dei tuoi stili dovrebbe essere già impostata. Salva per struttura e cose specifiche per il layout della pagina, dovrebbe già assomigliare al prodotto finale.

Quindi, ogni pagina inclusa ha uno stile solo per quella pagina o qualsiasi pagina che include al suo interno, di solito riferita dall'ID o dalla classe se la si utilizza in più punti (ma non al di fuori di quella pagina, altrimenti appartiene a common.css).

Quando lo faccio in questo modo, common.css è abbastanza pulito. Non dirò che è piccolo, ma è sgombro e facile da mantenere, che è l'idea. Sai che se vuoi cambiare uno stile che avrebbe un impatto su tutto, cambierai common.css. Se vuoi cambiare la struttura di quella particolare pagina, cerchi <page name> .css.

Spero che questo aiuti.