Новини

Красимир Тодоров
  - Красимир Тодоров

курсове по програмиране

В нашите курсове по програмиране се учим на безброй добри похвати, но не пропускаме да се запознаем и с лошите практики. За да подплатим някои умения реших ежеседмично да ви представям статии, чрез които да ви „сблъскам“ с някои от нещата усъвършенствани и потвърдени от дългогодишния ми опит в програмирането.

Преди седмица ви показах „11 принципа да пишем чист HTML код“. Започнахме оттам понеже не може да имаме чист, красив и подреден CSS код, без да сме преминали през HTML.

Може би сте се чудили защо CSS е такава „каша“, всичко е разбъркано и няма стриктен формат за подреждане? Е, тази бъркотия понякога се поражда от самото начало, а друг път след много промени и бъг фиксове. И в двата случая имаме идентичен резултат – неподреден и неприятен за ползване CSS. Как да избегнем всичко това?

Бъдете организирани

Всичко зависи от самите вас. Използвайте еднакви подредба и структура винаги! Не поставяйте декларации по реда, в който ви хрумнат или винаги най-долу, или най-горе. (да, да, виждал съм го). Това е грешно. Сигурно вече се питате – „Е, добре де, как тогава? Как да подредя CSS кода си?“. Спазвайте следния ред и ще разберете, че така е много по-удобно:

  • Стиловете, които нулират и/или презаписват стандартни такива – resets and overrides
  • Линкове и типография – anchors and typography
  • Главно оформление – main layout
  • Вторично оформление – secondary layout
  • Форми и техните елементи – form elements
  • Разни други – miscellaneous
/* resets and overrides 
======================= */
* {
	margin: 0;
	padding: 0;
}
img { border: none; }

/* links & typography 
======================= */
body {
	font-family: Verdana, Arial, sans-serif;
	font-size: 100%;
}

a:link, a:active, a:visited { text-decoration: none; }
a:hover {
	color: #999;
	text-decoration: underline;
}

h1 { }
h1 a { }
h1 a:hover { }

h2 { }
h2 a { }
h2 a:hover { }

/* layout 
======================= */
#container { }
header { }
#col-alpha { }
#col-beta { }
#footer { }

/* callout boxes
======================= */
#callout-alpha { }
#callout-beta { }

/* form elements
======================= */
label { }
input { }
input.button { }

/* misc
======================= */
.left { float: left; }
.right { float: right; }
.clear { clear: both; }

Оставяйте коментари

Казвал съм го безкрайно много пъти – оставяйте коментари, не прекалявайте с тях, но все пак не ги забравяйте – те са много важни. В CSS може да обозначавате началото и края на определена група от декларации, като например такива за header, sidebar, footer и т.н. Когато натрупате повече код ще усетите, че ще ви бъдат от полза при намирането на специфични неща. Моят съвет към вас е, да оставите заглавие, автор и кратък списък с основните цветове и шрифтове, използвани за конкретния дизайн най-отгоре на вашия CSS файл. След време ще бъде много по-лесно да сложите, например, светло синия цвят, без да се налага да използвате инструменти като Photoshop, за да видите точно какъв е този цвят.

/* ==============================================
Krasimir Todorov
BGO Software Ltd.

written for - www.webacademy.bg

==============================================
Colors and fonts
==============================================
Dark blue   - #2e3fbb
Light blue  - #5f90ff 
Light gray  - #dbdbdb
Middle gray - #a5a5a5
Gray        - #6b6b6b
============================================== */

Външни CSS библиотеки

В повечето случаи ще ползвате и външни библиотеки, не бихте искали да пишете всичко отначало. Нека вземем за пример Bootstrap, решили сте да го използвате, но не всичко в него е така както желаете. Може много лесно да се справите с този проблем. Включете вашата библиотека преди всички други персонализирани стилови файлове. Тоест първо зареждаме CSS на bootstrap и след това всички специфични за дизайна наши стилове. Това ще помогне да се презаписват дори и стиловете от bootstrap във вашите CSS файлове.

Използвайте полезни конвенции за именуване

Предполагам по-горе забелязахте, че декларирах двойка колони именувани col-alpha и col-beta. Защо просто не ги наречем col-left и col-right? Винаги мислете за бъдещите промени. След време може да се наложи да направите редизайн на целия сайт, тогава колоната от ляво да премине в дясно. Така няма да ви се наложи да сменяте id навсякъде из HTML кода само за да не изгубят логическото си значение. Разбира се винаги може да преместите col-left вдясно и да я оставите така, но не губи ли значението си? Ако id-то казва вляво, не трябва ли да е вляво?

Едно от главните предимства на CSS е да отделиш стилизациите от съдържанието. Така ще можете да направите тотален редизайн, променяйки само CSS, без дори да докосвате HTML структурата на вашия темплейт. Следователно, не използвайте имена обозначаващи съдържание. Примерно клас .link-blue ще ви създаде повече работа отколкото сте очаквали, ако се наложи да смените синия цвят с оранжев.

Именувайте елементите си базирано на това какво са, не как изглеждат те. Например .comment-blue е много по-малко гъвкав от .post-comment и .post-largefont е много по-ограничаващ от .post-title.

Тире вместо долна черта

Напълно възможно е някои стари браузъри да правят проблеми с долните черти в CSS или изобщо да не ги поддържат. Разбира се този проблем не е наличен за всички нови версии на майорните браузъри, но все пак трябва да предвидим всичко. Нали така?

За по-добра поддръжка си изградете навик да използвате тирета за разделяне на думите в CSS. Използвайте #col-alpha вместо #col_alpha.

Не се повтаряйте

Преизползването на атрибути е много важно. Правете го винаги когато можете. Примерно имате h1 и h2 с еднакъв размер на шрифта, цвят и външни отстъпи. Групирайте ги, използвайки запетая.

Използвайте кратки варианти винаги когато е възможно.
Може да постигнете това:

h1 {
	margin-top: 1em;
	margin-bottom: 2em;
	margin-left: 0;
	margin-right: 0;
}

 

Само с това:

h1 {
	margin: 1em 0 2em 0;
}

 

Много е важно да запомните реда, в който CSS интерпретира тези кратки варианти, а той е следният: горе, дясно, долу и ляво. Тоест по часовниковата стрелка базирано на кутийния модел (box model).

В случай, че горният с долния и левият с десния отстъп са еднакви, може да постигнете ефекта само с това:

h1 {
	margin: 1em 0;
}

Оптимизирайте кода за по-олекотени стилове

Използвайки по-горните препоръки ще постигнете доста олекотен и изчистен CSS код. По-малкото винаги зарежда по-бързо, по-лесно е за поддръжка и обновяване!

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

Друг малък съвет е, че не се нуждаете от мерна единица когато използвате нула. Нула винаги е нула без значение от мерната единица. Ако външния отстъп е 0, следователно може да напишете 0 вместо 0px или 0em.

Пишете кода си за Gecko, след това оптимизирайте за Webkit и IE

Спасете се от главоблъсканици и проблеми. Първо пишете вашите стилове за Gecko браузъри (Firefox, Mozilla, Netscape, Flock, Camino). Ако CSS кодът ви работи за тях, е много по-вероятно да работи по същия начин и за Webkit (Chrome, Safari, Chromium, Maxthon, Torch), и Internet Explorer.

Валидирайте

Използвайте W3C CSS validator. Ако сте в безизходица и вашият основен изглед не прави това, което искате да прави, валидаторът ще ви помогне като покаже грешките допуснати в CSS кода ви.

Пазете подредба за по-добра оптимизация

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

Заключение

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

Остави коментар