Как да рефактор CSS - Ръководство

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

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

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

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

1. Провеждане на първоначален одит

За да имате по-добра представа за това какво трябва да рефакторираме, най-добре е да започнем с цялостен одит, за да видим какво имаме в момента.

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

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

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

2. Създайте управляем план

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

В рефакторинга на CSS има решаващо нещо, което винаги трябва да се вземе под внимание: някои неща, които преработваме, напр. ще променяте имената на селекторите необходимо е да коригирате кода на съответните HTML и JavaScript файлове също.

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

3. Проследяване на напредъка

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

4. Придържайте се към Ръководство за стил на кодиране

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

Важните неща, за които трябва да се вземе решение са:

• конвенции за именуване
• правила за форматиране
• ред за деклариране
• единици и стойности, които искаме да използваме
• правила за коментиране

Ако не искаме да създаваме нашето ръководство за стил на кодиране, можем да използваме и някой друг, като например ThinkUp, който може да се намери на Github.

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

5. Създаване на съгласувана файлова структура

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

Това зависи главно от проекта как най-добре да организираме нашите файлове, но има някои универсални правила, като например използването на отделни файлове normalize.css файл за стиловете за CSS нулиране, отделен global.css за глобални стилове, които се използват в целия проект, и за съхраняване на библиотеки на трети страни в отделна папка.

Ако искаме да играем безопасно с нашата CSS файлова структура, има и готови архитектури, като SMACSS или ITCSS, които предлагат ефективни техники за как да организирате CSS файловете по един мащабируем начин.

6. Отървете се от неизползваните и дублиращи се правила

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

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

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

Заедно с остарели правила, дублиращите се правила също водят до излишно раздуване на код и загуба на производителност. Можем да ги премахнем, като използваме модула CSS Purge Node.js, но можем да работим и с него CSS linters за търсене на дублиращи се правила в нашите CSS файлове.

7. Намалете спецификата

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

Най-ниската специфичност (0001) принадлежи към селектори, които са насочени само към един общ HTML елемент, като например

или

. Колкото повече вътрешни селектори съдържа селективният селектор, толкова по-висока е неговата специфичност.

Някои селектори, като например документ за самоличност или селектори, идващи от вградени стилове, имат по-високи приоритети, защото те надхвърлят стиловете, принадлежащи към по-общи селектори. Например специфичността на. \ T # ID1 селектор 0100.

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

Трите основни вида селектори с висока специфичност са:

1. Квалифицирани селектори, като p.class1 (дефиниране на р е ненужен тук, тъй като прави невъзможно използването на същия клас с други HTML елементи)
2. Дълбоко вложени селектори, като .class1 .class2 .class3 .class4…
3. документи за самоличност, като # ID1

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

8. Изкореняване !важно правилник

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

Когато трябва бързо да пишем CSS, може да започнем да разчитаме на тях, макар и поради тяхната простота.

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

9. Почистете магическите числа и твърдите кодирани стойности

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

 .class1 позиция: абсолютна; отгоре: 28px; наляво: 15.5%; 

Основният проблем с магическите числа е, че те са подробен, и те въплъщават “програмиране чрез пермутация” antipattern. По време на процеса на рефакторинг трябва да премахнем тези произволни правила от нашия код и да ги заменим с по-разумни решения, където и да е възможно.

Същото правило се прилага и за твърдо кодирани стойности също. Вероятно най-честата поява на твърдо кодирани стойности може да бъде намерена в правилата за височина на линията:

 / * лошо, ще трябва да добавим допълнителни фиксирани правила за височина на линията към дъщерните елементи на .class1 * / .class1 font-size: 20px; височина на линията: 24px;  / * добре, гъвкавото правило за височината на линията може да се използва безопасно от детските елементи * / .class1 font-size: 20px; височина на линията: 1.2; 

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

10. Единици и стойности на рефактора

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

Ако ги използваме непоследователно в миналото, трябва да ги преобразуваме така, че да могат да представляват сбита система

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