Какъв е вашият CSS стил?

Един от най-объркващите аспекти на работата с CSS (каскадни стилови таблици) е, че можете да пишете стилове по толкова много начини. Подобно на писането на проза, само защото разбирате основните правила на граматиката и правописа, не означава, че сте усвоили писането на кратка проза.

Опитните CSS дизайнери прекарват значително време в изработването на кратък, ясен CSS, който е лесен за редактиране и актуализиране. Но тези, които са нови в CSS, са склонни да пишат повече стилове, отколкото е необходимо, и да създават излишни стилове.

Не само, че излишният код отнема повече време за изтегляне в уеб браузър, но и е много по-трудно да се редактира или преработва по-късно. И колкото по-излишен е кодът ви, толкова по-вероятно е да се сблъскате със стилови конфликти.

Ето пет съвета за писане на чисти, ефективни стилове:

• Никога не създавайте два стила, когато единият е достатъчен. Например, можете да създадете стил, като използвате селектора на етикети за всички

  тагове, които променят семейството на шрифтовете на вашите заглавия, и след това създайте втори стил с помощта на селектор на клас, който можете да приложите към вашите заглавия, за да промените цвета.

  Но би било по-ефективно да дефинирате и цвета, и семейството на шрифтовете в един и същи стил. Не забравяйте, че винаги можете да се върнете и да редактирате стил, за да добавите друго правило, ако искате да промените форматирането на стила.

• Съкратени шестнадесетични цветови кодове. Можете да дефинирате цветове в CSS, като включите целия шестнадесетичен цветен код. Въпреки това, когато използвате цветни кодове, които се повтарят, трябва да включите само първите три знака. Например #ffffff е същото като #fff; и двете ще създадат бял цвят.

• Използвайте външни стилови таблици. Можете да дефинирате стилове във вътрешна таблица със стилове в горната част на всяка уеб страница или можете да запишете вашите стилове във външен файл с разширението .css и да прикачите този стилов лист към всичките си уеб страници. Външните стилови таблици са по своята същност по-ефективни, защото ви позволяват да използвате един и същ стил на всяка или всички страници във вашия сайт.

  Например, ако дефинирате стил, който прави всички основни заглавия получерни, сини и големи, запазването на този стил във външен стилов лист ви позволява да използвате същия стил за всяко заглавие. След това, ако по-късно решите, че искате да промените заглавията си на зелено, можете да промените стила в един външен лист със стилове и да промените всички заглавия наведнъж.

  Ако сте запазили стиловете във вътрешна таблица със стилове, ще трябва да редактирате стила на заглавието във всеки файл.

• Разработете конвенция за именуване за вашите стилове. Въпреки че можете да наименувате стилове, създадени с селекторите на клас или идентификатор, каквото искате, най-добре е да изберете стилове, които имат значение освен форматирането. Например, ако създадете стил, наречен .redHeadlines и след това по-късно решите, че искате всичките ви .redHeadlines да са сини, в крайна сметка ще получите син стил на заглавие, наречен .redHeadlines, или ще трябва да преименувате стила.

  И преименуването на стила включва връщане назад и повторно прилагане на този стил навсякъде, където имате червено заглавие, което искате да превърнете в синьо, което отрича силата на стиловете да правят глобални актуализации. За да избегнете този проблем, създайте имена на стилове, които се отнасят до позицията или важността на елементите, като .mainHeadlines или .sidebarHeadlines.

• * Тествайте и потвърдете вашия код. Дори опитни CSS дизайнери правят грешки, поради което Dreamweaver включва толкова много страхотни инструменти за тестване и валидиране на кода във вашите уеб страници. Уверете се, че сте тествали своя CSS за често срещани грешки.

  Следват две услуги за онлайн тестване, които можете да използвате, за да проверите за грешки във вашия CSS код. Просто въведете URL адреса на която и да е уеб страница в Интернет в адресното поле на някой от тези сайтове и щракнете върху бутона Изпращане, за да получите отчет, показващ всички грешки във вашия код:

  • Услугата за валидиране на W3C CSS

  • XHTML-CSS : Бъдете валидни или умрете ученето