Convenzioni CSS / Modelli di layout del codice [chiuso]

Question

C'è stato qualche tentativo e la creazione di un metodo formalizzato per l'organizzazione del codice CSS? Prima di andare a inventare la mia strategia per mantenere le cose leggibili, mi chiedo cos'altro c'è là fuori. Google non è stato molto utile, in quanto non sono del tutto sicuro di quali termini cercare.

Sto pensando di più sulla falsariga di indentazione / spaziatura, quando usare nuove linee, convenzioni di denominazione, ecc.

Qualche idea?

Answer 1

Natalie Down di ClearLeft fame ha prodotto una fantastica presentazione di diapositive che copre questo argomento e altro http : //natbat.net/2008/Sep/28/css-systems/

Scarica il PDF in quanto include molte più informazioni rispetto alla presentazione. Lo consiglierei agli sviluppatori CSS di tutti i livelli di abilità.

Answer 2

Questo è tutto molto soggettivo secondo i soliti dibattiti sulla formattazione del codice e non conosco convenzioni formalizzate.

Il metodo che ho scelto è di usare tutte le classi minuscole e gli ID con caratteri di sottolineatura che separano le parole ( #page_container per esempio). Dichiaro prima tutti i miei stili tag ( html , body , ul , ecc.), Quindi tutte le classi e ID, ordinati alfabeticamente. Inoltre, anche tutti gli stili definiti in ogni classe, ID o tag sono definiti in ordine alfabetico. L'uso di questa convenzione rende più semplice rintracciare uno stile particolare.

Per la formattazione, lo comprimo sempre il più piccolo possibile, ma comunque leggibile. Ho messo tutto su una riga con uno spazio bianco appropriato. Se hai Visual Studio, puoi specificare questo formato e formattarlo automaticamente in questo modo (Imposta lo stile su Regole compatte in Strumenti, Opzioni, Editor di testo, CSS, Formato ).

Le convenzioni di denominazione sono estremamente soggettive qui, ma la cosa da tenere a mente è nominare i tuoi elementi come il loro scopo previsto, non il loro significato in stile. Ad esempio, se si dispone di uno slogan aziendale che si desidera dare uno stile con un nome di carattere rosso grande, l'id #slogan anziché #red_bold .

Ecco un esempio completo per darti un'idea:

body { background-color: #fff; color: #999; font-family: verdana, arial, helvetica, sans-serif; font-size: 76%; padding: 0; margin: 0; }
a { color: #2c5eb4; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: #f70; font-family: helvetica, verdana, arial, serif; font-weight: bold; margin: 1.2em 0; }
h1 { font-size: 2.4em; line-height: 1.2em;  margin-bottom: 0em; margin-top: 0em; }
h2 { font-size: 1.7em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; font-weight: bold; }
h5 { font-size: 1.0em; font-weight: bold; }
h6 { font-size: 0.8em; font-weight: bold; }
img { border: 0; }
li, ol, ul { font-size: 1.0em; line-height: 1.8em; list-style-position: inside; margin-bottom: 0.1em; margin-left: 0; margin-top: 0.2em; }
#content { clear: both; margin: 0; margin-top: -4em; }
#columns { height: 36em; }
#column1, #column2, #column3, #column4 { border-right: 1px solid #dbdbdb; float: left; width: 18%; margin: 0 0.5em; padding: 0 1em; height: 100%; }
#column1 { width: 28%; }
#column1 input { float: right; }
#column1 label { color: #999; float: left; }
#column2 a, #column3 a { font-weight: bold; }
#column4 { border-right: 0; }
#form { margin: 0 2em; }
.help_button { float: right; text-align: right; width: 30px; }

Answer 3

Ecco una bozza di come ordino le mie proprietà css. Segue approssimativamente le linee guida del posizionamento e del layout prima, quindi della tipografia, quindi degli sfondi e altre cose minori. Cerco di ordinare le mie proprietà in base al modo in cui incidono sul modello di scatola quanto è ragionevolmente possibile. Tuttavia, il mio ordine tende a spostarsi un po '. Gradirei qualsiasi commento su questo.

el {
    display:;
    float:;
    clear:;
    visibility:;
    position:;
    top:;
    right:;
    bottom:;
    left:;
    z-index:;
    width:;
    min-width:;
    height:;
    min-height:;
    overflow:;
    margin:;
    padding:;
    border:;
    border-top:;
    border-right:;
    border-bottom:;
    border-left:;
    border-width:;
    border-top-width:;
    border-right-width:;
    border-bottom-width:;
    border-left-width:;
    border-color:;
    border-top-color:;
    border-right-color:;
    border-bottom-color:;
    border-left-color:;
    border-style:;
    border-top-style:;
    border-right-style:;
    border-bottom-style:;
    border-left-style:;
    border-collapse:;
    border-spacing:;
    outline:;
    list-style:;
    font:;
    font-family:;
    font-size:;
    line-height:;
    font-weight:;
    text-align:;
    text-indent:;
    text-transform:;
    text-decoration:;
    white-space:;
    vertical-align:;
    color:;
    opacity:;
    background:;
    background-color:;
    background-image:;
    background-position:;
    background-repeat:;
    cursor:;
    }

Personalmente preferisco mantenere una proprietà per riga indentata una scheda, con la parentesi graffa di chiusura rientrata una scheda. Per me è più leggibile in questo modo, ma è sicuramente una questione di opinione / preferenza.

Prima usavo il tab per indentare le dichiarazioni css per abbinare il più possibile le mie relazioni genitore / figlio HTML, ma non lo faccio più. La funzionalità di raggruppamento di CSEdit aiuta a ridurre notevolmente la tentazione di farlo.

I CSS non hanno alcuna convenzione prescritta per la struttura del codice. Quindi si riduce a ciò che funziona meglio per te.

Answer 4

Beh, non conosco personalmente alcuna convenzione di per sé, ma so che ci sono molti consigli là fuori che sono davvero una buona idea da seguire, ma fondamentalmente dipende da come vuoi implementare il tuo CSS per te da scegliere quello più adatto a te.

Answer 5

I file devono essere modularizzati, quindi puoi usare @import . In genere ho un file base.css per le classi di base (come tipografia e colori). A seconda della struttura del tuo sito, può essere vantaggioso avere anche altri CSS "parziali" riutilizzare in tutti i fogli di stile rivolti all'utente. Questi fogli di stile discendenti possono estendere gli stili di base con più granularità secondo necessità (ad esempio, .warn {color: red;} potrebbe essere esteso di p.warn {font-style: italic;} o h1.warn {border: 5px solid red;} ), che è un ottimo modello di progettazione per l'implementazione del cosiddetto CSS orientato agli oggetti .

All'interno dei file stessi, mi piace alfabetizzare i miei selettori e gli elenchi delle proprietà. Ho provato a mantenere elenchi separati per diversi tipi di selettori (prima un elenco ID, quindi il mio elenco di classi e quindi il mio elenco di selettori di elementi), ma ho trovato questo inutilmente difficile, quindi ho tutti i selettori nello stesso ordine alfabetico elenco. In questo modo posso trovare rapidamente la radice di tutti i selettori complessi o tutti gli stili dati a un semplice selettore.

All'interno di selettori complessi, elenco ciascun selettore in ordine alfabetico.

Se non posso usare Sass per qualche motivo, potrei imitare il suo annidamento modello (non sono ancora sicuro che funzioni o meno), in questo modo:

@import url('/css/base.css');

a {
  color:#369;
  font-family: Helvetica, sans-serif;
  font-weight: bold;
  text-decoration: underscore; }
  a img {
    border: 0; }

blockquote, .nav, p {
  margin-bottom: 10px; }
blockquote {
  background: #eee;
  padding: 10px; }

h1, h2, h3, h4 {
  font-family: Georgia, serif; }
h1.warning {
  border: 5px solid red; }

.nav a {
  font-size: 150%;
  padding: 10px; }
.nav li {
  display: inline-block; }

p.warning {
  font-style: italic; }
  p.warning a {
    background: #fff;
    border-bottom: 2px solid #000;
    padding: 5px; }
  p.warning .keyword {
    text-decoration: underline; }

Sfortunatamente, potresti cercare il margine per p e non renderti conto che fa parte del blockquote, .nav, p . Anche questo non è molto "orientato agli oggetti" design, ma è probabilmente meglio che mettere stringhe di classi praticamente su ogni elemento che richiede uno stile.

Quindi, questo approccio non è perfetto e non ti libera completamente dal dover a volte trovare nel file, ma è l'approccio migliore che ho sviluppato quando non posso usare gli strumenti di template CSS per ragioni che sfuggono al mio controllo. Mi piacerebbe ricevere suggerimenti su come migliorare questo metodo :)