Как да оптимизирате CSS с ръководства за кодов стил

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

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

Поставянето на подходящи ръководства за кодов стил ни дава възможност да използваме a по-добре организирана, последователна кодова база, подобрена четливост на кода и по-надежден код. Не е съвпадение, че големите технологични компании като Google, AirBnB или Dropbox се възползват от тях.

В този пост ще разгледаме как можем да оптимизираме нашия CSS с помощта на ръководства за стил на CSS код.

Ръководства за стил на кодове спрямо библиотеки с образци

В нашата индустрия има известна степен на несигурност относно това, което можем да наречем ръководство за стил. A List Apart например го използва като синоним на термина библиотека с образци в тази статия, но можем да се натъкнем на този вид дефиниция и в други публикации.

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

И двете ръководства за стил на код и библиотеки с образци включват стратегия за оформяне на стил, но различен вид. Библиотеките с шаблони, като Bootstrap, Zurb Foundation, глобалния език на BBC или библиотеката на MailChimp, ни предоставят потребителски интерфейс с предварително подготвени CSS класове, типография, цветова схема, понякога мрежова система и други шаблони.

Ръководства за стил на CSS код, като например Evernote или ThinkUp (или споменатите в интрото) съдържат правила за писане на CSS включително такива неща правила за именуване, файлова структура, ред на собственост, форматиране на код, и други.

Обърнете внимание на това, че живите стилови справочници като KSS, Styledown или Pattern Lab, генериране на библиотеки с образци и не стилови ръководства за кодиране. Докато библиотеките с модели също са много полезни и повишават процеса на уеб разработки, те не ни позволяват да оптимизираме самия код.

Създайте своето ръководство за стила на CSS кода

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

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

Например, AirBnB показва добри и лоши примери на разработчиците по следния леснозасмиваем начин:

Структура на файла

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

Някои стилови ръководства като ThinkUp's също ни предупреждават не се използват вградени или вградени стилове освен ако не е неизбежно; това също е полезно правило, което си струва да се приложи.

Разполагане

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

 .class_1 .class_2 # id_1 # id_2 li a span color: #bad; 

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

Правила за наименуване

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

Четирите общи стила, използвани в именуването на селектора, са .с малки букви, .under_scores, .непокрит-ове, и .lowerCamelCase. Добре е да изберете някоя от тях, но трябва да следваме същата логика в целия проект.

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

освен това ако искаме да променим цвета му от червено на друго в бъдеще, лесно можем да го направим без да се налага. Съществуват също и правила за именуване на CSS, като например конвенцията BEM (блок, елемент, модификатор), да доведе до последователна структура на именуване с уникални и значими имена.

Правила за форматиране

Форматирането на кодове включва неща като използване на интервали, раздели, отстъпи, интервали, прекъсвания на редове и т.н. В форматирането в действителност няма добър или лош метод, единственото правило е да се изберете съгласувани правила, които водят до четене на код, и ги следвайте.

Dropbox например изисква от разработчиците да поставят интервали след двоеточие в декларациите за собственост, докато Evernote използва два интервала за отстъп. Можем да създадем толкова правила за форматиране, колкото сме доволни, но никога повече, отколкото е възможно да се разбере.

Поръчка за деклариране

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

Обърнете внимание например на правилата за подреждане на свойствата на WordPress, то определя следната проста, но логична базова линия за подреждане, в която свойствата са групирани по тяхното значение:

1. показ
2. позициониране
3. Модел на кутията
4. Цветове и типография
5. друг

Единици и стойности

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

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

Също така трябва да вземаме решения относно стойностите на цветовете (шестнадесетична, rgb или hsl), както и дали искаме да използваме свойствата на стенограмите и според кои правила. Има инструкция, която е включена във всяко ръководство за стил на CSS код, в което се натъкнах, т.е.. не посочвайте единици за 0 стойности (наистина, просто не).

.class // добър марж: 0; // лош марж: 0px; // лош марж: 0em; // лош марж: 0rem; 

Коментирайки

Кодексът за коментиране е от съществено значение на всички езици, но в CSS не само улеснява отстраняването на грешки и създаването на документация, но също така разделя CSS правилата в логически групи. Можем да използваме и двете / *… * / или // ... нотационен стил за коментари в CSS, важното е да останете последователни с коментари в нашия проект.

Идиоматичният CSS например създава смислена система за коментари, която дори използва някои основни ASCII изкуства и води до красиво организиран код: