Come capire le architetture CSS di altre persone?

Question

Sono ragionevolmente buono con i CSS. Tuttavia, quando lavoro con il CSS di qualcun altro, è difficile per me vedere la "immagine più grande" nella loro architettura (ma non ho alcun problema quando lavoro con un foglio CSS che ho scritto io stesso). Ad esempio, non ho problemi a utilizzare Firebug per isolare e risolvere problemi di compatibilità tra browser, o per risolvere un problema fluttuante o modificare l'altezza su un particolare elemento. Ma se mi viene chiesto di fare qualcosa di drastico come "Voglio le barre laterali di destra delle pagine A, B, C e D per avere un bordo rosso .Voglio le barre di destra delle pagine E, F e G per avere un bordo blu se e solo se il mouse dell'utente supera ", quindi mi ci vuole molto tempo per mappare tutte le regole di ereditarietà CSS per vedere il" quadro più grande ".

Per qualche motivo, non ho riscontrato la stessa difficoltà con il codice back-end. Dopo un rapido debriefing su come funziona una funzione e una rapida ispezione del controller e del codice del modello, mi sentirò a mio agio con l'architettura. Penserò, "è ragionevole supporre che ci sarà una classe Employee che eredita dalla classe Person utilizzata da un controller del Dipartimento". Se scopro dettagli scomodi che non sono coerenti con lo stile architettonico generale, sono fiducioso di poter rimettere in moto le cose.

Con il lavoro CSS di qualcun altro, è molto più difficile per me vedere le "relazioni" tra classi diverse, e quando e come vengono utilizzate le classi. Quando ci sono molte regole di ereditarietà, mi sento sopraffatto.

Ho difficoltà ad articolare la mia domanda e problemi ... Tutto quello che voglio sapere è, perché è molto più difficile per me vedere l'immagine più grande nell'architettura CSS di qualcun altro rispetto al livello di business logic di qualcun altro ?

** Ha qualcosa a che fare con i CSS essendo una tecnologia relativamente nuova, e non ci sono molti modelli di design popolari?

Answer 1

Direi che in generale, non c'è "architettura" nel modo in cui la maggior parte degli sviluppatori scrive CSS (almeno nella mia esperienza). La maggior parte delle persone costruisce il CSS in modo incrementale in base alle regole necessarie - di solito non è pianificato in anticipo come l'architettura del codice. Spesso le persone raggruppano le regole relative con blocchi di commenti, o magari in fogli di stile separati, ma in realtà non ci sono molti modelli stabiliti da seguire.

La soluzione migliore è utilizzare un buon editor CSS che consente di visualizzare visivamente la gerarchia delle regole definite nei fogli.

Answer 2

Prima di tutto, è harder to read code that it is to write code.

In secondo luogo vorrei dire dal CSS permette di struttura flessibile, allora la gente configurarlo in modo complicato, quindi direi che è la natura della bestia.

Answer 3

Penso che molte volte le persone hanno semplicemente hackerato il css insieme senza un concetto del quadro generale. Molte volte aggiungono le cose mentre escogitano le cose con un minimo riguardo per le "convenzioni" che hanno stabilito e che non sono direttamente nuove nella loro mente e portano a tutti i tipi di ridondanze e discrepanze di denominazione.

Non credo che sia così tanto che il CSS è nuovo in quanto è che il CSS è spesso il regno dei progettisti e spesso non pensano architettonicamente quando progettano qualcosa - tutto è in qualche modo ad hoc.

So che quando io sono un vantaggio stabilisco un insieme formale di convenzioni per la classe di denominazione e l'organizzazione come una delle prime cose che faccio e poi martellare in ai subalterni front-end :-)

Answer 4

Possibilmente perché il CSS non è architettura ma presentazione. L'architettura è costruita con HTML. È l'HTML che ti porta all'elemento.

Answer 5

Gli sviluppatori subiscono enormi pressioni per garantire che i progetti siano coerenti su tutti i browser, e quindi iniziano l'hacking, il che rende più difficile mantenere e comprendere i CSS. Ci sono sempre buone pratiche da seguire come ad esempio:

• Utilizzare Ripristina.
• Commento CSS.
• Utilizzare i framework CSS esistenti senza inventare la ruota .
• Utilizzare la progettazione orientata agli oggetti ove possibile.

Se segui queste pratiche, chiunque sarebbe in grado di seguire CSS utilizzando firebug.

Answer 6

sì .. Il problema più grande è che i CSS non hanno schemi di progettazione comuni. Questo è il mio modo per rompere css altrui

• ispezionare ogni elemento attraverso Firebug
• cercare di trovare gli involucri
• dal CSS è sempre prova sequenziale scoprire quale elemento eredita quello attributo da chi

quando ho finito con questa routine, di solito capisco il loro approccio alla progettazione completa.

Modifica:
e, soprattutto, non è un problema correggere il CSS già scritto se si individuano difetti. Ti farà risparmiare un sacco di mal di testa. Basta andare avanti e trovare soluzioni alternative se il problema è troppo brutto.

Answer 7

ho lotta con lo stesso problema, e scoprire che è utile quando si lavora la mia strada attraverso i CSS di qualcun altro di dividere il problema in su, concentrandosi su tre preoccupazioni:

• layout per grandi cose struttura come display: , position: e float:, o qualsiasi altro CSS che riguarda il modo in cui la pagina è strutturata a livello di corso.
• Colore riguarda la decorazione. Immagini di sfondo e colori e così via.
• La tipografia riguarda il testo.

Con un po 'di pratica, non è troppo difficile da prendere un pezzo di CSS e prendere in giro queste categorie fuori uno alla volta. Potresti scoprire che è utile rilasciare il CSS in un editor di testo e riordinare le regole in ordine di layout/colore/tipografia (o layout/tipografia/colore). Una volta che hai fatto questo, potresti scoprire che è più facile ragionare su cosa sta succedendo nel design.

Ci può essere un po 'di sovrapposizione tra il layout e la tipografia in come vengono usati i margini e il padding (e talvolta i bordi). Dovrai risolverlo caso per caso.

È interessante notare che la maggior parte degli "hack" (di solito soluzioni per IE) sembrano rientrare nella categoria di layout, anche se è possibile imbattersi in un errore di tipografia coinvolto nell'ottenere una dimensione costante del carattere di base.