Kaskadkoppling & Semantik

Jag har just börjat ett nytt projekt, eller rättare sagt så har jag börjat med att avsluta någon annans projekt. Normalt så brukar inte detta vara ett problem, men denna organisation är inte särskilt organiserad, det var ett tag sedan jag arbetade som frilansare utanför en agentur, men kanske är det så är pleben arbetar.

CSS, är en webbsidas stylist, C:et står för ‘Cascading’ dvs. kaskadkoppling, så alla klasser däri borde följa och implementera varandra, men dessa CSS filer är runt 16,000 rader tillsammans, och specificerar varje element individuellt. Hur fan kan man arbeta så!

t.ex. deras kod:

.account #wrapper .my-account #content h3 {
	font-family: "BitstreamCooperBlack", 'cooper black';
	font-size: 150%;
	color: #444;
	margin: 10px 5px;	
}

.account #wrapper .my-account #content h4 {
	font-family: "BitstreamCooperBlack", 'cooper black';
	font-size: 120%;
	color: #444;
	margin: 10px 5px;	
}

.account #wrapper .my-login #content h3 {
	font-family: "BitstreamCooperBlack", 'cooper black';
	font-size: 150%;
	color: #444;
	margin: 10px 5px;	
}

.account #wrapper .my-login #content h4 {
	font-family: "BitstreamCooperBlack", 'cooper black';
	font-size: 120%;
	color: #444;
	margin: 10px 5px;	
}

.payment #wrapper .payment-wrapper h4 {
	font-family: "BitstreamCooperBlack", 'cooper black';
	font-size: 120%;
	color: #ADFFCC;
	margin: 10px 15px;	
}

Hur jag tycker det borde se ut:

h3, h4 {
	font-family: "BitstreamCooperBlack", 'cooper black';
	color: #444;
	margin:  10px 5px;
}
h3 {
	font-size: 150%;
}

h4 {
	font-size: 120%;
}

.payment-wrapper h4 {
	color: #ADFFCC;
	margin: 10px 15px;
}

Som ni ser är det mindre kod i min version, och enklare att ändra etc.

rant over!

Publicerat av

Jim Lundblad

Mercenary web wizard, schooled in the dark arts of digitalness, stands on his head. Enjoys to Doodle, Code, Design, talk Sustainability and most new Endeavours

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *