В нашите курсове по програмиране се учим на безброй добри похвати, но не пропускаме да се запознаем и с лошите практики. За да подплатим някои умения реших ежеседмично да ви представям статии, чрез които да ви „сблъскам“ с някои от нещата усъвършенствани и потвърдени от дългогодишния ми опит в програмирането.
Преди седмица ви показах „11 принципа да пишем чист HTML код“. Започнахме оттам понеже не може да имаме чист, красив и подреден CSS код, без да сме преминали през HTML.
Може би сте се чудили защо CSS е такава „каша“, всичко е разбъркано и няма стриктен формат за подреждане? Е, тази бъркотия понякога се поражда от самото начало, а друг път след много промени и бъг фиксове. И в двата случая имаме идентичен резултат – неподреден и неприятен за ползване CSS. Как да избегнем всичко това?
Всичко зависи от самите вас. Използвайте еднакви подредба и структура винаги! Не поставяйте декларации по реда, в който ви хрумнат или винаги най-долу, или най-горе. (да, да, виждал съм го). Това е грешно. Сигурно вече се питате – „Е, добре де, как тогава? Как да подредя CSS кода си?“. Спазвайте следния ред и ще разберете, че така е много по-удобно:
/* 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 ============================================== */
В повечето случаи ще ползвате и външни библиотеки, не бихте искали да пишете всичко отначало. Нека вземем за пример 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 браузъри (Firefox, Mozilla, Netscape, Flock, Camino). Ако CSS кодът ви работи за тях, е много по-вероятно да работи по същия начин и за Webkit (Chrome, Safari, Chromium, Maxthon, Torch), и Internet Explorer.
Използвайте W3C CSS validator. Ако сте в безизходица и вашият основен изглед не прави това, което искате да прави, валидаторът ще ви помогне като покаже грешките допуснати в CSS кода ви.
Отделете стиловете специфични за браузъри в отделни CSS файлове и ги зареждайте с JavaScript, проверки от сървърна страна или условни коментари. Използвайте този трик за да избегнете ненужен CSS код в основния ви файл. Това ще ви помогне да получите чист и по-лесен за промяна CSS код.
С горните 10 съвета бихте могли да постигнете един доста подреден, изчистен и оптимизиран CSS код. Всичко зависи от самите вас и от навиците, които ще изградите с практиката и ще прилагате винаги. Пробвайте, опитвайте всичко, дори да е грешно поне ще знаете, че е. Все пак всички се учим от грешките, които правим и те ни служат занапред като поуки. С времето ще си изградите свои стил на писане, навици за подреждане и именуване. Това ще помогне както на вашата работа, така и на всички останали, които рано или късно ще се „сблъскат“ с вашия код.