Τρόπος γραφής css

Ας μάθουμε πως να κάνουμε τις σελίδες μας με στιλ. Τα Cascading Style Sheets είναι ο τρόπος για να το επιτύχουμε.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Hik
Δημοσιεύσεις: 162
Εγγραφή: 23 Σεπ 2005 10:34

Τρόπος γραφής css

Δημοσίευση από Hik » 28 Μαρ 2008 13:52

Μέχρι πρόσφατα ο τρόπος γραφής στα css που έγραφα ήταν ο κλασικός.

Π.χ. ένα τυχαίο δείγμα από το http://www.cssbeauty.com/css/main.css

Κώδικας: Επιλογή όλων

.
.
.

leftcol #recommended ul li p {
	float: right;
	margin:0 5px 0 0;
	width: 60%;
}
#leftcol #recommended ul {
	margin: 0;
	font-size: 0.85em;
	padding:0;
	list-style: none;
}
#leftcol #recommended ul li {
	margin: 5px 0 5px 0;
	clear: both;
	border-bottom: 1px dotted #BBE0EB;
	padding: 0 0 10px 0;
}
#leftcol #recommended ul li img {
	border: 1px solid #BBE0EB;
	padding:3px;
	width: 40px;
	height: 50px;
	float: right;
	margin: 3px 5px 0 0;
}
#leftcol #categories ul, #leftcol #bydate ul {
	font-size: 1.0em;
	margin:0;
	padding:0 0 10px;
	list-style: none;
}

.
.
.
Το πρόβλημα που παρατήρησα είναι ότι γράφοντας έτσι το css, για να βρω ένα συγκεκριμένο selector έπρεπε κάθε φορά να κάνω search, μιας και σε ένα μεγάλο site είχα ένα css αρχείο αρκετών εκατοντάδων γραμμών.

Παρατηρώντας το αρκετά σύνθετο (από άποψη grid design και css) site της εφημερίδας Independent - http://www.independent.co.uk/ - παρατήρησα ότι ο δημιουργός είχε χρησιμοποιήσει ένα διαφορετικό τρόπο γραφής, ποιο δενδροειδής.

Συγκεκριμένα ένα παράδειγμα από το http://www.independent.co.uk/independen ... screen.css

Κώδικας: Επιλογή όλων

.
.
.
#welcome { position: relative; padding: 0.5em 11px 0.4em; ... }
 #date { display: inline; padding: 0 10px 0 0; color: #464646; }
 #personal { display: inline; color: #b82129; }
  #personal strong { padding: 0 10px 0 0; color: #000; }
  #personal a { color: #b82129; }
 #side { position: absolute; right: 10px; top: 0.5em; }
  #side a { padding: 0 0 0 15px; background: url(/independent.co.uk/images/i_portfolio.gif) 0 50% no-repeat; color: #000; }
   #side a span { color: #b82129; }
.
.
.
Η διαφορά είναι ότι σε αυτή τη περίπτωση κάθε selector είναι σε μία μόνο γραμμή και επίσης ακολουθούμε δενδροειδή μορφή. Έτσι εκμεταλλευόμαστε όλο το πλάτος της οθόνης και είναι πολύ εύκολο να βρεθεί ο selector που ψάχνουμε.

Π.χ. από ένα τελευταίο site που υλοποιώ, αυτό που θα έκανα δύο σελίδες scroll για να δω γράφεται απλά

Κώδικας: Επιλογή όλων

#header { background: url(../images/bg.png) 50% top no-repeat; height: 163px;}
	#header-main { position: relative; margin: 0px auto; width: 960px; height: 163px; }
		#top-nav-links { position: absolute; top: 4px; left: 590px; width: 190px; color: #fccd9b }
			#top-nav-links a { color: #fccd9b; text-decoration: none; }
			#top-nav-links a:hover { color: #fff; text-decoration: underline; }
		#search { position: absolute; top: -3px; left: 750px; width: 184px; height: 31px; background: url(../images/search_bg.png); }
		
#menu { height: 24px; background-color: #34140a; border-top: 3px solid #603d2c; border-bottom: 5px solid #603d2c;  }
	#menu-main { position: relative; margin: 0px auto; width: 960px; height: 24px; }
		#top-menu li { float: left; height: 22px; margin: 1px 0; font-size: 1.2em; }
			#top-menu li a { display: block; color: #f9f3ef; padding: 0px; height: 22px; text-decoration: none;}
			#top-menu li a span { display: block; padding: 3px 16px; height: 22px; cursor: pointer; } 			
			#top-menu li a:hover { background:url(../images/nav/menu_bg_left.png) top left no-repeat; }
			#top-menu li a:hover span { background:url(../images/nav/menu_bg_right.png) top right no-repeat; }			
Αν και είναι πολύ απλό σαν ιδέα, στη πράξη έχω παρατηρήσει ότι αυτός ο τρόπος είναι πολλαπλά καλύτερος από το πρώτο τρόπο γραφής.

Άβαταρ μέλους
skeftomilos
Script Master
Δημοσιεύσεις: 2888
Εγγραφή: 07 Ιαν 2005 07:22
Τοποθεσία: Αθήνα

Τρόπος γραφής css

Δημοσίευση από skeftomilos » 28 Μαρ 2008 14:32

Αυτή η σύνταξη είναι πιο συνεκτική, αλλά δε διευκολύνει την μετακίνηση εντολών από τον ένα selector στον άλλο. Δηλαδή από πρακτική άποψη είναι πιο εύκολο με το πληκτρολόγιο να γίνουν cut-paste μερικές συνεχόμενες γραμμές κώδικα, παρά ένα τμήμα μίας γραμμής.

Όταν το stylesheet φτάσει πάνω-κάτω στο μέγεθος των 1000 γραμμών, συνήθως καταφεύγω στη λύση του Ctrl+F για να βρω την περιοχή που ψάχνω. Εναλλακτικά σπάω το stylesheet σε περισσότερα αρχεία.

Άβαταρ μέλους
cherouvim
Script Master
Δημοσιεύσεις: 3137
Εγγραφή: 13 Ιούλ 2005 22:56
Τοποθεσία: Athens, Greece
Επικοινωνία:

Τρόπος γραφής css

Δημοσίευση από cherouvim » 28 Μαρ 2008 16:31

Αρκετά πολύπλοκο θέμα για μία φαινομενικά απλή διαδικασία/τεχνολογία.
Είχα παρακολουθήσει ένα session για αυτό το θέμα, και σίγουρη λύση δεν υπάρχει: http://www.vivabit.com/atmedia2006/sessions/#strategic

More food for thought: http://www.digital-web.com/articles/architecting_css/

Απάντηση

Επιστροφή στο “CSS - Cascading Style Sheets”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης