È così che struttureresti il ??tuo foglio di stile CSS?

StackOverflow https://stackoverflow.com/questions/182528

  •  06-07-2019
  •  | 
  •  

Domanda

Lasciando da parte la domanda se dovresti servire fogli di stile singoli o multipli, supponendo che tu ne stia inviando solo uno, cosa pensi di questo come una struttura di base?

/ * Struttura * /

Qualsiasi elemento del layout del modello deve essere inserito qui, quindi intestazione, piè di pagina, corpo ecc.

/ * Fine struttura * /

/ * Componenti comuni * /

Elementi ripetuti, come moduli di iscrizione, elenchi, ecc.

/ * Fine componenti comuni * /

/ * Pagina specifica 1 * /

Alcune pagine potrebbero avere stili specifici, che andrebbero qui.

/ * Pagina specifica 1 Fine * /

/ * Pagina specifica 2 * /

Come sopra

/ * Fine specifica della pagina 2 * /

/ * Pagina specifica ecc * /

E così via.

/ * Pagina specifica ecc. Fine * /

È stato utile?

Soluzione

È simile al modo in cui strutturo il mio, tuttavia, trovo che l'uso dei sottotitoli sia il modo migliore per farlo, quindi uso questa struttura:

/ *************************  * GLOBALE *  ************************* /

/ * Tutte le cose comuni vanno qui sotto i sottotitoli appropriati * /

/ * Formattazione intestazione * /

/ * Formattazione del testo * /

/ * Formattazione modulo * /

/ * Formattazione tabella * /

/ * etc * /

/ *************************  * DISPOSIZIONE *  ************************* /

/ * Tutte le cose di layout vanno qui sotto i sottotitoli * /

/ * Header * /

/ * Barra laterale sinistra * /

/ * Barra laterale destra * /

/ * Footer * /

/ *************************  * NAVIGAZIONE *  ************************* /

/ * Metto la navigazione separata dal layout in quanto possono esserci un numero di punti di navigazione sotto i loro sottotitoli * /

/ * Navigazione principale (orizzontale) * /

/ * Navigazione a sinistra * /

/ * Navigazione a destra * /

/ * Navigazione breadcrumb * /

/ *************************  * LE FORME *  ************************* /

/ * Qualsiasi formattazione del modulo che varia dalla formattazione comune, se sono presenti più moduli con formattazione diversa, quindi utilizzare i sottotitoli * /

/ *************************  * TAVOLI *  ************************* /

/ * Stesso affare dei moduli * /

/ *************************  * ELENCHI *  ************************* /

/ * Stesso affare di moduli e tabelle * /

/ *************************  * CONTENUTO *  ************************* /

/ * Qualsiasi formattazione specifica per pagine particolari, raggruppate per sottotitoli per la pagina allo stesso modo di moduli, tabelle ed elenchi * /

/ *************************  * SUPPORTO CSS *  ************************* /

/ * Questo vale per qualsiasi formattazione speciale che può essere applicata a qualsiasi elemento in qualsiasi pagina e che abbia la precedenza sulla formattazione normale per quell'elemento. Ad esempio, questo potrebbe avere cose come: * / 

.float-right { float: right; }
.float-left { float: left; }
.float-center { margin-left: auto; margin-right: auto; }
.clear { clear: both }
.clear-block { display: block }
.text-left { text-align: left }
.text-right { text-align: right }
.text-center { text-align: center }
.text-justify { text-align: justify }
.bold { font-weight: bold }
.italic { font-style: italic }
.underline { border-bottom: 1px solid }
.nopadding { padding: 0 }
.nobullet { list-style: none; list-style-image: none }

/ * etc * /

Spero che sia d'aiuto.

In genere non consiglio di scrivere su una sola riga come quella, o come suggerito nel link che Adam ha pubblicato, diventano molto difficili da sfogliare se durano a lungo. Per gli esempi sopra, è stato solo più veloce digitarli in quel modo, quindi non ho dovuto rientrare in tutte le righe.

Per la formattazione raccomanderei questa struttura: 

.class {
    width: 200px;
    height: 200px;
    border: 1px solid #000000;
}

E così via, ho messo la struttura della classe o dell'ID in alto, quindi qualsiasi altra formattazione, come il carattere ecc. sotto quella. Rende molto veloce e chiaro scavare.

Altri suggerimenti

Qualunque cosa abbia senso per te è abbastanza buona. Francamente, quando qualcun altro viene a cercare qualcosa nel tuo foglio di stile - o quando vieni alla ricerca di qualcosa, del resto - non proveranno a capire quale fosse la tua struttura organizzativa. Stanno solo cercando qualunque classe o elemento abbiano bisogno di vedere. Quindi, fintanto che in genere mantieni le cose che sono collegate insieme e sezionate le cose con commenti come suggerisce @Matt, stai bene.

Il fatto è che anche con una struttura organizzativa molto ben ponderata - proprio come con un sistema di archiviazione ben ponderato - non è sempre ovvio ciò che va dove; quindi è meglio essere solo un po 'sensibili, non dedicare molto tempo a mantenere le cose organizzate e fare affidamento sugli strumenti di ricerca per trovare ciò di cui si ha bisogno.

Organizzo il mio CSS in modo simile al tuo ma inizio con una sezione di reset. L'idea principale è di passare dal generale allo specifico. Quindi ecco qui:

  • ripristina
  • struttura
  • tag html
  • navigazione
  • sezioni specifiche
  • Messaggi di errore: questa è la mia ultima sezione

La struttura che hai presentato è esattamente ciò che uso. Tuttavia, mi sembra che sia diventato ancora troppo complesso con nuove regole che si presentano e si annullano a vicenda ... Forse dovrei cercare di attenermi alla soluzione suggerita nell'argomento collegato da Adam invece.

Sembra che ogni volta che creo un nuovo file CSS, trovo un nuovo modo di organizzarlo. E sono TUTTI migliori dei precedenti.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top