Η δημιουργία καθαρότερου κώδικα σημαίνει να ξεπεράσουμε το πλαίσιο και να σκεφτούμε τι αντιπροσωπεύει πραγματικά.

Τα πλαίσια CSS παρέχουν μια λύση ροής εργασιών, δηλαδή την ταχεία ανάπτυξη των γραμμών web-based layouts. Ένα από τα πιο δημοφιλή πλαίσια σήμερα είναι το 960 Grid System ( 960.gs ), το όνομά του από το προκαθορισμένο πλάτος. Με την πρακτική, το 960.gs μπορεί να είναι ένα εξαιρετικό εργαλείο για οποιονδήποτε σχεδιαστή ιστοσελίδων. Αλλά επίσης επανεξετάζει μερικά παλιά προβλήματα.

Πριν δει την ευρεία χρήση, οι πίνακες παρείχαν όλη τη διάταξη που χρειάστηκε ένας σχεδιαστής ιστού. Πιο περίπλοκα σχέδια είχαν τραπέζια ένθετα μέσα σε πίνακες, αλλά σε υπερβολική χρήση δημιουργούσαν ένα μπερδεμένο χάος HTML. Οι σχεδιαζόμενες από το CSS σχεδιαγράμματα παρασύρουν τους σχεδιαστές με την υπόσχεση για λιγότερο HTML. απευθύνονται επίσης σε λάτρεις της σημασιολογίας. Με απλά λόγια, το CSS ενθάρρυνε τη χρήση της HTML που περιέγραφε το περιεχόμενό της και όχι το πώς θα έπρεπε να μοιάζει.

Καθώς οι σχεδιαστές μάθαιναν να χρησιμοποιούν το CSS, τα στοιχεία div αντικατέστησαν πίνακες. Αλλά τα divs μπορεί να είναι - και συχνά είναι - ένθετα, ακριβώς όπως τα τραπέζια.

Η διάδοση της τάξης-itis και Div-itis

Ο σαφής, λιτός κώδικας προσφέρει πολλά πλεονεκτήματα. Είναι εύκολο να επιδιορθώσετε, να κατεβάσετε γρήγορα και να προκαλέσετε λιγότερα προβλήματα σε διάφορους τύπους προγραμμάτων περιήγησης. Οι σχετικές ετικέτες βοηθούν τους αναγνώστες οθόνης, τις μηχανές αναζήτησης και τις κινητές συσκευές να ερμηνεύουν το νόημα εκτός από τη διάταξη.

Εκτός από τη σημασιολογία, το μεγάλο πλεονέκτημα της χρήσης

Τα πλαίσια CSS όπως το 960.gs αναδημιουργούν το υποκείμενο πρόβλημα με τους πίνακες; Εάν ο στόχος τους είναι αποτελεσματικός κώδικας HTML, μπορούν οι σχεδιαστές και οι προγραμματιστές να χρησιμοποιήσουν το 960.gs χωρίς να διαδίδουν "class-itis" (δηλαδή υπερβολική χρήση των τάξεων) και "div-itis" (π.χ. Ναι μπορούν.

Για να καταλάβουμε πώς, πρέπει να δούμε το ίδιο το πλαίσιο.

Μια καταγραφή των 960.gs

Το 960.gs παρέχει μια σειρά από στήλες, γραμμένες σε CSS, που διευκολύνουν την τοποθέτηση ιστοσελίδων. Κατεβάστε τα αρχεία, προσθέστε τα στον ιστότοπό σας και είναι έτοιμο να το μεταφέρετε. Δεν χρειάζονται ειδικά πρόσθετα ή νέα τεχνολογία και μπορείτε να τα χρησιμοποιήσετε σε συνδυασμό με άλλα αρχεία CSS.

Οι στήλες περιέχονται σε μπλοκ που ονομάζονται (φυσικά) "δοχεία". Οι προεπιλογές είναι container_12 και container_16 , οι οποίες χωρίζονται σε 12 και 16 στήλες, αντίστοιχα. Τα προσαρμοσμένα μεγέθη είναι διαθέσιμα.

Το παραπάνω διάγραμμα δείχνει τα δύο προεπιλεγμένα δοχεία με 12 και 16 στήλες. Το γκρι δεν θα είναι ορατό στον τελικό ιστότοπό σας, φυσικά. Οι στήλες απλώς δείχνουν πού μπορούν να τοποθετηθούν μπλοκ, που ονομάζονται "πλέγματα".

Ένα πλέγμα είναι ένα μπλοκ περιεχομένου που μπορεί να διασχίσει περισσότερες από μία στήλες σε ένα δοχείο. Τα πλέγματα πλέουν αριστερά λόγω της κατοχής τους .container_x , καθιστώντας τα ιδανικά για αρθρωτές διατάξεις. Το πλάτος κάθε μπλοκ καθορίζεται από το πλέγμα που εφαρμόζετε σε αυτό: grid_1 είναι πλάτος μιας στήλης, grid_5 είναι πλάτος πέντε στηλών κλπ.

Πάνω από, .container_12 διαθέτει τρία πλέγματα. Κάθε πλέγμα, με τη σειρά του, θα περιέχει διαφορετικά στοιχεία του περιεχομένου της σελίδας.

Πάνω από, .container_16 περιέχει δύο τετράγωνα από 12 και 4 στήλες, αντίστοιχα. Αρέσει .container_12 , αυτή η διάταξη σε 16 στήλες έχει πλάτος 960 pixel, αλλά οι στήλες της είναι στενότερες.

Η αλλαγή μεγέθους των πλεγμάτων στα οποία προσαρμόζονται τα στοιχεία του περιεχομένου είναι απλή: αλλάξτε το grid_x σε κάθε διαίρεση.

Η επίσημη ιστοσελίδα 960.gs προβάλλει ιστότοπους που χτίστηκαν στο πλαίσιο και παρέχει επίσης πρότυπα σελίδων, συνδέσμους σε μια γεννήτρια γενικού δικτύου και το ίδιο το πλαίσιο. Περιλαμβάνονται επίσης λεπτομερείς οδηγίες, επειδή υπάρχουν περισσότερα για μάθηση. Τα περιθώρια πλέγματος και η δυνατότητα να μπαίνουν σε υδρορροές μεταξύ των πλεγμάτων κάνουν το σύστημα ακόμα πιο ευέλικτο.

Παρά τα οφέλη αυτά, ενσωμάτωση

Λύσεις

Η συζήτηση με τα τραπέζια για τη διάταξη είναι αρκετά εύκολη. Αλλά χρησιμοποιώντας τρία ή περισσότερα επίπεδα ένθετων divs δεν λύνει το πρόβλημα - αντικαθιστά απλά ένα σύνολο ετικετών με ένα άλλο. Τα πλαίσια βοηθούν αλλά δεν επιλύουν πάντα το δίλημμα. Με λίγη προοπτική, πολλά από αυτά τα προβλήματα μπορούν να αποφευχθούν.

Χρησιμοποιείτε μόνο τις κλάσεις που χρειάζεστε πραγματικά

Η απλούστερη λύση για τον υπερβολικό κώδικα CSS είναι να αποκοπεί αυτό που δεν είναι απαραίτητο. Το 960.gs σχεδιάστηκε ως εργαλείο συρματοκάλυψης, το οποίο προοριζόταν να αντικατασταθεί όταν ο ιστότοπος ζωντανεύει. Περιλαμβάνει περισσότερους από 180 ορισμούς κλάσης.

Εάν το σχέδιό σας είναι δομημένο, ας πούμε, .container_12 και ποτέ δεν χρησιμοποιεί περισσότερο από .grid_5 και .grid_7 , στη συνέχεια, αφαιρέστε τα υπόλοιπα από το CSS.

Εφαρμόστε το class = "grid_x" στα κατάλληλα στοιχεία: Headings, Images, Links, Paragraphs

ο .container_x και .grid_x Οι κλάσεις δεν περιορίζονται σε στοιχεία div. ο class attribute μπορεί να εφαρμοστεί σε οποιοδήποτε στοιχείο εκτός html , head , meta , param , script , title και style - επίσης, σχεδόν οτιδήποτε στο body . Αν ένα ζεύγος ετικετών div συνοδεύει μόνο ένα στοιχείο, τότε μπορεί να μην είναι απαραίτητο.

Εφαρμογή του κώδικα δικτύου σε Non-Divs

Χρησιμοποιώντας divs	Χρησιμοποιώντας σημασιολογικό κώδικα
…	…
… … … …	… … … …
#"> ... ... ...	#" class=grid_3> … … … #" class="grid_3">… … … … #" class="grid_3">… … … … #" class="grid_3">… … … … #" class="grid_3">… … … …

Δώστε ιδιότητες πλέγματος σε ορισμένα στοιχεία

Είναι απλό CSS, .grid_x έχει ιδιότητες που θα λειτουργούσαν με οποιοδήποτε άλλο όνομα κλάσης ή οποιοδήποτε στοιχείο. Αντιγράφοντας τις ιδιότητες σε ορισμένα στοιχεία, οι επιπλέον κλάσεις καθίστανται περιττές.

.examples li { (properties of .grid_4) }

…
…
…

Παρακάτω, η εφαρμογή του πλέγματος στα στοιχεία λίστας δημιουργεί ακόμη και στήλες, με ελάχιστες αλλαγές στο HTML.

Το CSS μετατρέπει την παραπάνω λίστα σε ομάδα πολλαπλών στηλών. Αν χρειάζεστε μια κανονική λίστα με σημεία με κουκκίδες, απλά απορρίψτε το class="examples" Χαρακτηριστικό. Είναι αυτό σημασιολογικό; Βεβαίως -όσο το περιεχόμενο αξίζει μια λίστα. Το CSS απλώς αλλάζει τον τρόπο με τον οποίο παρουσιάζεται κάθε σφαίρα.

Ενα άλλο παράδειγμα:

.photos p { (properties of .grid_10) }.photos img { (properties of .grid_6) }

First caption
Another caption

Αυτό τοποθετεί αυτόματα λεζάντες, που περικλείονται στις ετικέτες των παραγράφων, δίπλα στις φωτογραφίες.

Όταν οι πίνακες δεν είναι κατάλληλοι, το εικονικό αποτέλεσμα είναι εύκολο να δημιουργηθεί με μη-πίνακες HTML.

.datelist { (properties of .container_12) }.datelist h3 { (properties of .grid_3) }.datelist p { (properties of .grid_7) }.datelist strong { (properties of .grid_1) }

subhead
…
3 p.m.Jan 1, 2010
subhead
…
3 p.m.Jan 1, 2010

Το παραπάνω παράδειγμα είναι ένα πρόγραμμα γεγονότων στα οποία κάθε "κελί" στον πίνακα έχει μια διαφορετική ετικέτα για να αντικατοπτρίζει το μοναδικό του περιεχόμενο, παρά να έχει το catch-all ετικέτα. (Το ιδανικό; Ίσως όχι. Το HTML δεν κάνει διάκριση μεταξύ ομάδων περιεχομένου.)

Εφαρμογή .grid_x ιδιότητες σε άλλα στοιχεία απαιτεί κάποιο προγραμματισμό, αλλά οδηγεί σε λιγότερο γεμάτο HTML και δεν παρεμβαίνει στο ίδιο το 960.gs.

Χρησιμοποιήστε τις κλάσεις σε γονικά αντικείμενα, όχι σε παιδικά αντικείμενα

Το Div-itis και η class-itis δεν περιορίζονται στα πλαίσια CSS.

Όλα τα παραδείγματα στην τελευταία ενότητα μοιράζονται ένα ενδιαφέρον χαρακτηριστικό: μόνο μία δήλωση κλάσης σε κάθε μία. Όπου χρησιμοποιείται το ίδιο χαρακτηριστικό κλάσης αρκετές φορές στη σειρά στο HTML, αλλάξτε τον γονέα αντί για τα παιδιά.

Περιττός:

.item { (various properties) }

…
…
…
…
…
…

Πάνω, και τα έξι στοιχεία έχουν τάξη. Είναι περιττές επειδή τα μαθήματα είναι πανομοιότυπα. Εδώ είναι ένας καλύτερος τρόπος:

.group-of-items li { (various properties) }

…
…
…
…
…
…

Η θεραπεία εδώ για το class-itis είναι να ορίσετε μια μοναδική κλάση στο γονικό στοιχείο. Οι επιλογείς CSS κάνουν την εργασία, εφαρμόζοντας το στυλ σε κάθε

…
…
…
…
…
…
…
…

.title { (various properties) }.subhead { (various properties) }.publication-date { (various properties) }.body-text { (various properties) }