5 βήματα για τη βελτίωση της Γράψτε CSS Μέρος ΙΙ
Αυτό είναι το δεύτερο μέρος του 5 βήματα για τη βελτίωση Γράψτε CSS. Υπάρχουν πολλές CSS tutorials είναι διαθέσιμες στο διαδίκτυο, αλλά τα λίγα μαθήματα είναι χρήσιμα. Σε αυτό το σεμινάριο θα βρείτε 5 βήματα για να γράψουν καλύτερο κώδικα CSS για την επόμενη ιστοσελίδα του έργου σας. Ελπίζω ότι θα απολαύσετε αυτό το σεμινάριο.
1. Κρατήστε CSS δηλώσεις σε μία γραμμή
θα πρέπει να κρατούν πάντα CSS δηλώσεις σε μία γραμμή, βοηθά στη διατήρηση σας CSS αρχείο καθαρό και μικρότερων. Βοηθά επίσης να αφαιρέσετε τα ανεπιθύμητα διαστήματα και χαρακτήρες.
Καλή Κωδικός
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px? color: # 333333? background: # cccccc?)
Bad Κωδικός
; color : # 333333 ; background : #cccccc ; } h2 (font-size: 18px? color: # 333333? background: # cccccc?)
2. Συνδυάζουν στοιχεία
Ένας από τους καλύτερος τρόπος για να αποθηκεύσετε τις γραμμές του κώδικα είναι από την ομαδοποίηση επιλογείς. Υπάρχουν ορισμένα παραδείγματα κάτω από ό, τι αναφέρομαι.
Καλή Κωδικός
H1, H2, H3 ( ; color : # 333 ; font-οικογένεια: Arial, Helvetica, sans-serif? color: # 333? )
Bad Κωδικός
h1 ( ; color : # 333 ; font-οικογένεια: Arial, Helvetica, sans-serif? color: # 333? ) h2 ( ; color : # 333 ; font-οικογένεια: Arial, Helvetica, sans-serif? color: # 333? ) h3 ( ; color : # 333 ; font-οικογένεια: Arial, Helvetica, sans-serif? color: # 333? )
3. Χρήση "Περιθώριο" στο Κέντρο Διάταξη
Πολλοί αρχάριοι στο CSS δεν μπορεί να καταλάβω γιατί δεν μπορείτε να χρησιμοποιήσετε απλά επιπλέουν: Κέντρο για την επίτευξη αυτού του αποτελέσματος στο κέντρο μπλοκ-στοιχεία επίπεδο. Μακάρι να ήταν τόσο εύκολο! Δυστυχώς, θα πρέπει να χρησιμοποιήσετε.
Κωδικός
# Container ( ; /* top, bottom - and left, right*/ margin: 0 auto? / * πάνω, κάτω - και αριστερά, δεξιά * / πλάτος: xxxpx? )
4. Σχόλιο σας CSS
Είναι μια μεγάλη ιδέα να σχολιάσει τον κωδικό σας σε τμήματα. Για να προσθέσετε ένα σχόλιο, απλά προσθέστε / * πίσω από το σχόλιο, και * / για να το κλείσει, όπως:
Κωδικός
/******** ΚΩΔΙΚΟΣ ΑΡΧΗ ΕΔΩ ********/
5. Χρησιμοποιήστε CSS Συμπίεση Εργαλεία
εάν δεν θέλετε να χάνετε χρόνο σε τροποποίηση παλαιών φύλλων στυλ σας, μπορείτε απλά να χρησιμοποιήσετε απευθείας css συμπιεστεί εργαλεία, θα κάνει την εργασία σας σε δευτερόλεπτα.
ελέγξετε online css συμπίεση εργαλεία ...
Css Tidy
Καθαριότητα Css
Css Optimiser
Flumpcakes Css optimizer
cssdrive Css Comperasor
W3C CSS Validator
Συμπέρασμα
Αυτές είναι μερικές μόνο από τις συμβουλές που θα με βοηθήσει να γράψω καλύτερο κώδικα. Ελπίζω ότι το σεμινάριο θα σας βοηθήσει επίσης να γράψετε καλύτερα και καθαρό κώδικα. Εφαρμόστε αυτές τις άκρες για την τρέχουσα και την επόμενη έργα σας, και εσείς σίγουρα θα εκτιμήσουν τις προσπάθειες.
Αν νομίζετε ότι το σεμινάριο μπορεί να είναι πιο καλύτερα, παρακαλώ μοιραστείτε μαζί μας. Σχόλιο μας
εάν επιθυμείτε να λάβετε περισσότερα μαθήματα από εμάς, παρακαλώ σκεφτείτε να εγγραφείτε για να μας ζωοτροφές από RSS ή με ηλεκτρονικό ταχυδρομείο.
Προώθηση μας
Σχετικά άρθρα:
αν απολαύσατε την ανάγνωση αυτού του άρθρου, παρακαλώ ελέγξτε τα άλλα συναφή άρθρα παρακάτω:
Revell λέει: 27 Νοέμβρη 2009 at 9:05 am Said:
Γεια σου,
Πρώτα απ 'όλα, ωραίο άρθρο! Δεν υπάρχουν πολλά άρθρα που αφορούν το στυλ γραφής του CSS. Έχω κάποιες σκέψεις για το πρώτο σημείο όμως. Κατά τη γνώμη μου, είναι καλύτερο να χρησιμοποιήσετε το μεγάλο στυλ γραφής, ενώ την ανάπτυξη και να έχουν ένα σενάριο "minify" CSS σας όταν το χρησιμοποιείτε σε ένα ζωντανό περιβάλλον.
Dave λέει: 27 Νοεμβρίου, 2009 στις 10:06 π.μ. Είπε:
Διαφωνώ πλήρως με το σημείο 1. Όταν έχετε 3 δηλώσεις, 1 γραμμή κώδικα είναι μεγάλη, αλλά όταν υπάρχουν 6 ή 7, παίρνει πραγματικά δύσκολο να διαβάσετε.
Το μόνο που ίσως να σώσει 1KB; Δεν το παίρνει.
Εκτός από εκείνο το ένα, μερικές ιδέες αξιοπρεπή εδώ.
Τελευταία του blog του Dave .. 2 ακόμα-πρέπει να έχουν CMS επιτρέπει plugins για WordPress
Fasce Nicolo »λέει σχετικά: 27 Νοεμβρίου, 2009 at 10:34 am Said:
Συμφωνώ με Dave, το σημείο 1 είναι λάθος, απλά επειδή εάν εργάζεστε σε μια ομάδα είναι πολύ δύσκολο να διαβάσει μια γραμμή κώδικα.
Θα πρέπει επίσης να γράψετε τον κώδικα σε αλφαβητική σειρά για τον ίδιο σκοπό.
EJ Semeijn λέει στις: 27 Νοεμβρίου 2009 στις 10:57 am Said:
Γιατί απόσπαση σταματήσουμε αυτές τις άκρες; Internet είναι ήδη γεμάτη από αυτές τις συμβουλές βασικά. Και εγώ επίσης διαφωνώ με # 1. Δεν τον κωδικό σας κάνει πιο εύκολη την κατανόηση, το μόνο καθιστά πιο δύσκολη.
Συμβουλές μου θα ήταν να τεθεί η δομή σελίδα των CSS, κάνουν τμήματα για RESET, κλάσεις, ΜΟΡΦΕΣ, στοιχεία HTML, FONTS, κλπ. Με αυτόν τον τρόπο σας CSS θα είναι πιο κατανοητό.
safetycopy λέει στις: 27 Νοεμβρίου 2009 στις 9:38 μ.μ. Είπε:
Συμφωνώ με τις παρατηρήσεις πολλών άλλων ανθρώπων - παράδειγμα, το σημείο 1 της κακής κώδικας δεν είναι κακό κώδικα - είναι απλώς μια εναλλακτική στυλ. Αυτή η θέση θα είναι χρήσιμο μόνο για να ολοκληρωθεί newbies και δεν θέλουμε να αρχίσουν τη διδασκαλία τους κακό παραδοχές ήδη!
τελευταία του blog safetycopy του .. Photo
Josh λέει: 29 Νοέμβρη 2009 at 4:38 am Said:
Κάνω όλα αυτά, εκτός από το τελευταίο. Δεν θεωρώ χρήσιμο να συμπιέσει css μου, αλλά σε αντίθεση με όλα τα προηγούμενα αναγνώστες Συμφωνώ απόλυτα με το σημείο # 1. Μόλις άρχισε να γράφει CSS μου σε μία γραμμή και είναι ήδη τεράστια. Η κύλιση έχει μειωθεί πολύ. Υποθέτω ότι αυτό είναι μια προσωπική προτίμηση. Κάτι που βοηθάει είναι ότι ο επεξεργαστής χρησιμοποιώ τυλίγει τον κωδικό κάτω στην επόμενη γραμμή και έτσι δεν υπάρχει οριζόντιο scrolling.
Τελευταία του blog του Josh .. Addicted to Flickr
FAQPAL λέει στις: 29 Νοεμβρίου 2009 στις 4:06 μ.μ. Είπε:
Καλές συμβουλές αρχάριος, δεν minify CSS μου είτε, ίσως ενός ευρύτερου προγράμματος που θα επωφεληθούν από minifying, αλλά η μέση ιστοσελίδα δεν πρέπει πραγματικά να.
Όσον αφορά το # 1 πάει, νομίζω ότι η διατύπωση είναι αυτό που ρίχνει τους ανθρώπους, αντί να λέει, "Bad Κώδικα", ίσως θα έπρεπε να λέει ήθελα safetycopy πρότεινε, "Εναλλακτικές Code".
Τελευταία του blog FAQPAL του .. Bubble Effect με CSS
favSHARE λέει στις: 30 Νοεμβρίου 2009 στις 12:49 am Said:
Αυτό το άρθρο έχει από κοινού με favSHARE.net. Πάει και να ψηφίσει αυτό!
τελευταία του blog favSHARE του .. 25 Tutorials Διάταξη Web
Jean-Patrick Smith λέει: 11 Δεκεμβρίου 2009 στις 11:15 am Said:
Εγώ συνήθως δημιουργούν ένα αρχείο PHP που περιλαμβάνει όλα τα αρχεία css μου, minifies αυτό, και προσθέτει συμπίεση + λήγει κεφαλίδες.
Με αυτόν τον τρόπο δεν πρέπει να συμφωνήσω με το σημείο # 1 ...
Τι είναι πιο σημαντικό από ό, τι έχουν όλα CSS σας σε μια γραμμή είναι η μείωση του αριθμού των HTTP κλήσεις με CSS ξωτικά και συνδυάζει όλες σας CSS / JS σε ένα αρχείο.