KODÉR.BLOG

Prý kóduješ weby aneb CSS přehledně a stylově!

02 Oct 2011

Po dvou článcích ve kterých jsem se „navážel“ čistě do grafiků je na čase rejpnout i do mě podobných (čti kodérů) a dát jim pár tipů a triků, které mohou, ale nemusejí znát. Neberte tento článek jako mantru nebo nějaká přikázání či zákon. Jen jsem si po těch více jak 4 letech kódování, udělal určitá pravidla v CSS souboru, kterými se řídím a která používám.

CSS hlavička, bloky a přehlednost

Řekl bych, že více jak rok používám v každém CSS souboru hlavičku, ve které je název projektu, můj web (dříve jméno a nedávno jsem místo něj dal twitter), poté následuje informace o layoutu, kde je uvedena šířka webu, poté tabulka s převodem velikosti fontů z PX na EM (ještě se k tomu vrátím a popíšu), dále následuje seznam jednotlivých bloků, rozřazených v závislosti k čemu jsou použity. Místo zbytečného popisování je zde ukázka z nově spuštěného webu www.kuponet.cz:

/*=====================================================================================

	Project:			Kuponet.cz
	Author:				www.r4ms3s.cz
	Twitter:			@r4ms3scz
	
		
	== iNFO ===========================================
	
	Web width:			100%
	Page width:			978px
	
	
	== Px2Em ===========================================
	
	body 	75%

	10px 	0.833em		10 / 12 = 0.857
	11px 	0.917em		11 / 12 = 0.929
	12px 	1em			12 / 12	= 1
	13px 	1.083em		13 / 12 = 1.071
	14px 	1.167em		14 / 12 = 1.143
	15px 	1.25em
	16px 	1.333em
	17px 	1.417em
	18px 	1.5em
	20px 	1.667em

	
	== CSS DETAiL ======================================
	
	RESET
	TYPOGRAPHY
	HACKS
	SELECTOR HELPER
	
	LAYOUT
	HEADER
	NAVIGATION
	FOOTER
	
	UNI
	
	CONTENT
	CONTENT - HOME
	CONTENT - DEPARTMENT
	CONTENT - ARTICLE
	CONTENT - SEARCH
	CONTENT - TREE
	CONTENT - GOODS
	
	AJAX
	
	PRINT
	
	
=====================================================================================*/

Vše je asi jasné, velikost webu je 100% (kvůli stínu pod menu, který je větší než 978px) a hlavní šířka je 978px, výchozí velikost fontů je 12px a pro BODY musí být tudíž nastavena velikost na 75% (více tento zápis popíšu níže). Poté následuje sekce CSS Detail, která slouží k rychlému nalezení a hlavně „grafickému“ rozřazení co kde se dá najít, každý jednotlivý blok je pak nadepsán stejným název jako je uveden zde např.:

/******************************************************************
	HEADER
*/

Tímto jsem si já neskutečně urychlil práci a celý CSS soubor (alespoň pro mě) zpřehlednil. Menší bloky poté nadepisuji takto:

/* COUPON LIST */

Používám je k nadepsání větších funkčností a je pod ním celý zápis, zde například list, který je použit na všech stránkách pro výpis kupónů na webu kuponet.cz.

Věčný boj s PX, EM, %...

Nebudu zde obhajovat, proč používám právě EM, je na každém kodérovi co bude používat, ale mě se s ním výborně pracuje a už jsem si na něj zvyknul. Pro přepočet z PX na EM používám web http://pxtoem.com, kde si zadám velikost výchozího fontu, většinou beru ten nejmenší, který je použit v hlavních textech, tak aby i bez nastavování byl text v bloku správně velký. A poté si vykopíruju určité velikosti a včetně výchozího nastavení na BODY přidám nahoru do layoutu, tak abych měl pěkný přehled, jaký font je výchozí a pro další věděl přepočet + ty nejpoužívanější měl rovnou připraveny na vykopírování. A navíc si k pár přidám i přepočet (co čím dělit), je to tam spíše pro info a kdyby k webu přišel jiný kodér, tak aby hned věděl jakou velikost zadat, kdyby chtěl cokoliv upravit nebo přidat.

Háčky a selektory kam se podíváš

Jedny z hlavních bloků které stojí za zmínku jsou HACKS a SELECTOR HELPER. V prvním mám fičury, které mi upravují a nastavují web, tak aby byl použitelnější a pro mě to je seznam speciálních věcí. Ke každému je přidán popis, který neslouží pro mě, ale pro někoho kdo se může ke kódu dostat po mě, tak aby věděl co k čemu je.

/******************************************************************
	HACKS
*/
html 			{overflow-y:scroll;} 						/* PRO NON-IE PROHLIZECE PRIDA DOPRAVA SCROLLBAR */
textarea		{overflow:auto;} 							/* V IE ODSTRANI V TEXTAREA SCROLLBAR */
a img 			{border:none;}								/* ODSTRANI BORDER */
button 			{width:auto; overflow:visible;}				/* WWW.VIGET.COM/INSPIRE/STYLING-THE-BUTTON-ELEMENT-IN-INTERNET-EXPLORER/ */
a:link 			{-webkit-tap-highlight-color: #FF5E99;}		/* J.MP/WEBKIT-TAP-HIGHLIGHT-COLOR */
a:active		{position:relative;left:0px;top:1px;}		/* PRI KLIKNUTI POSOUVA ODKAZ O 1PX Z VRCHU */

::-moz-selection	{background:#FF5E99; color:#fff; text-shadow: none;}
::selection 		{background:#FF5E99; color:#fff; text-shadow: none;}

.clearfix:before,											/* NEW CLEARFIX! - RESI PROBLEM S VYTECENIM FLOATOVANYCH PRVKŮ */
.clearfix:after {
content: ".";    
display: block;    
height: 0;    
overflow: hidden;	
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE 5.5/6/7 */

Druhý blok je SELECTOR HELPER, kde mám jen pár vybraných selectorů, které se sem tam hodí a mám je zde hlavně kvůli sobě, protože na ně často zapomínám a je škoda, je nevyužívat. Schválně používám naprosto nesmyslné názvy, aby se mi to potom někde na webu nenastavilo :)

/******************************************************************
	SELECTOR HELPER
*/
h10+p{ 							/* POKUD PO H10 NASLEDUJE P, TAK SE NA P NASTAVI 10PX Z VRCHU - NEFUNGUJE V IE6 */
padding-top:10px;
}
.first.firstAct{				/* POKUD MA ELEMENT CLASSU FIRST A I FIRSTACT, TAK SE NASTAVI 10PX Z VRCHU */
padding-top:10px; 
}
#content h10:first-child{ 		/* POKUD JE V CONTENT PRVNI ELEMENT H10, TAK SE NASTAVI 10PX Z VRCHU */
padding-top:10px; 
}

Vlastní tiskový styl je OUT!

O tisku a tiskovém stylu jsem psal ve článku „Tisk stránky s CSS Frameworkem Hartija“ tenkrát jsem ho používal jako speciální CSS styl, ale doba jde dál a pokud začneme přemýšlet i o rychlosti načítání stránek a o omezení dotazů na server, tak je žádáno umísťovat tisk do hlavního CSS souboru, ve kterém je úplně dole a zápis vypadá nějak takto:

/******************************************************************
	PRINT
*/
@media print {
	/* TYPOGRAPHY */
	* {
	background: transparent !important; 
	color: black !important; 
	text-shadow: none !important; 
	filter:none !important; 
	-ms-filter: none !important; 
	}

	.
	.
	.
	
	/* LAYOUT */
	#header{
	height:60px;
	margin:0px 0px 20px 0px;
	border-bottom:1px solid black;
	}
}

Do „@media print“ umísťujeme zápis, který je pouze pro tisk, já vycházím z CSS Frameworku Hartija, který je uveden výše, a poté pokračuju zápisem pro vlastní vzhled tisku pro danou stránku. Hlavní výhoda je to, že mám vše v jednom souboru a editace nebo přidání další funkčnosti je poté otázka pár minut.

Závěrem

Článek měl být hlavně o „fičurách“ a zápisech, které moc lidí nezná, ale ve výsledku by to byl hodně dlouhý článek, proto jsem ho zkrátil a vydal pouze pár rad o zápisu CSS a o tom jak ho používám já. Příště se tedy můžete těšit na různé zápisy nejen CSS ale i samotného HTML, Javascriptu...
A jak vy zapisujete CSS? Používáte nějaké oddělovače? Děláte si v CSS souboru pořádek? Líbí / nelíbí se vám článek? Napište mi do komentářů nebo na twitteru. Za jakékoliv sdílení budu rád. Díky :)

Sdílet:

comments powered by Disqus