Емо Соколов

Аз лично, не пишех CSS до скоро, но сега се налага. За това, спокойно мога да се определя като начинаещ. Съвсем начинаещ. В момента, всеки път, когато ми се налага да направя нещо ново свързано с CSS, откривам по една купчина неща, които улесняват живота ми в последствие .
Има някои полезни неща, които научих от уроци из нет-а или от приятели програмисти (Валери Бучински), и които искам да споделя тук, за останалите прохождащи в писането на CSS. Ето някои от тях:

1. Задайте размера на текста , без да използвате пиксели

Ако се чудите, как някои уеб дизайнери, успешно прилагат em като мярка вместо пиксели, не се чудете повече а продължете да четете. Има един начин да ресетнете размерите на фонтовете за целия сайт, в който случай ще се получи, че 1.0em се равнява на 10px.
body { font-size: 62.5% } Просто добавете font-size: 62.5% в body стила и сте готови. Сега като размер можете да използвате em-ове (хаха) като размер, вместо пиксели. Ето например как изглежда един параграф използвайки em:
p { font-size: 1.3em; line-height: 1.2em; } Може би вече сте си задали въпроса, защо пък да има значение, по какъв начин декларирам размера на фонтовете в сайта ми (даге)?. „Достъпен за всички възрасти“ или по-просто казано, за да направите сайта си, удобен за максимална част от аудиоторията ви. Объркахте се още повече ? :) хехе и аз така, тоя не можа да го напише с малко побългарени примери :) Идеята е, че сайта трябва да остане четлив, когато се използва вграденото в повечето браузери увеличаване на сайта. Възрастните хора или хората с нарушено зрение, често използват тази функция и ако сте сложили абсолютни стойности на шрифтовете, крайния резултат ще бъде неадекватно изглеждащи текстове (Това си е малко преувеличено, но съм съгласен , че ем вече се е наложило като стандарт в задаването на големината на текстовете в CSS за това и включих това във статията ми).

2. Направете кода си лесен за четене.

Когато съм се натъквал последните месеци на CSS, писан от някой от колегите ми, винаги ми е правило впечатление, как приятно за окото си разделят heading таговете (и не само тях разбира се, но с това ще дам пример). Мисля че изглеждаше такa:
h1 {}
    h1#logo { font-size: 2em; color: #000; }
h2 {}
    h2.title { font-size: 1.8em; font-weight: normal; }Това се е много удобно, ако искате бързо да намерите точно този heading , който ви трябва точно сега, на момента, без да се налага да изчетете половината си CSS. Също така, е полезно, и ако работите върху по-голям проект, където използвате един и същ heading таг (да кажем h2) на много места в сайта, защото както знаем (или не!), можем да му даваме различни стойности в отделните класове, всеки път, когото го използваме, без да се притесняваме, че ще вземе стойности от първоначалното му деклариране. Аз лично използвам такова подреждане и за параграф таговете, Anchor таговете и всички останали тагове, които изискват различни класове, за да изглеждат както трябва във даден случай.

3.Подреждайте кода си на секции

Аз до скоро не го правех. И много други програмисти уеб дизайнери също не го правят. Защо? Мм… ми честно казано незнам., но е факт, че ако искаме да редактираме някакъв код след няколко месеца или години, ще бъде много, ама много по-лесно да намирате класове и елементи, които искате да редактирате в същия този код.
Ето как аз структорирам моя код:
/* Structure */Тук слагам основните дивове и класове
/* Typography */Тук описвам параграфите, Headings и другите дребни неща свързани с форматирането на текста, като strong, code и други.
/* Links */Това си говори само за себе си ( не, че другите не го правят де, но това си е класика ). Тук слагам всички anchor тагове.
/* Lists, images, etc. */ Тук слагам стиловете за картинки, списъци и всички останали елементи които не се вписват в останалите секции. Ако например обаче имам неподреден списък за менюто на сайта ми, ще си направя съвсем нова секция (/* Navigation*/ примерно) и ще сложа всички елементи, които са свързани по някакъв начин с тази част от кода в нея. По този начин ако след време ми се наложи да преправя само навигацията на сайта ми, ще ми бъде много по-лесно да го направя.

4. Не използвайте div-вове за щяло и нещяло

Аз лично, нямам нищо против използването на повече div елементи, но само, когато е обоснована нуждата от такива. Всеки път ми идва да се напия, да си разкъсам ризата и да се махна от тоя живот, когато видя някой, който задава стил на заглавиятa на своите статии, използвайки div елемент. Опитвайте се, когато е възможно, да изпозвате по често span или някакъв друг подходящ за случая елемент примерно, вместо div. Не бързайте, просто обмисляйте всяко свое действие. Това може да ви донесе само плюсове.

5. Задайте стил само веднъж

Не че много се замислям по принцип, но напоследък забелязах, че пиша „margin:0; padding:0″ във почти всеки елемент. Наскоро открих как колегата ми Елин е разрешил този си проблем, използвайки *, за да зададе дадена стойност, на всички елементи по страницата наведнъж. Първото нещо което ми дойде на ум, беше, че е безсмислено да пиша margin и pading с едни и същи параметри във всеки таг, след като мога да ги задам за всички тагове, само веднъж:
* { margin: 0; padding: 0; } Сега вече използвам margin и padding, само в случаите, когато се налага .
Надявам се, че съм бил полезен за някой.