Како преправити ЦСС - Водич

ЦСС рефацторинг треба да буде суштински део фронт-енд развојног тока, ако желимо да имамо управљиву и оптимизовану базу кода. Када прерађујемо ЦСС, ми очистити и реорганизовати наш постојећи код без додавања нових функција или поправљања грешака.

Рефакторинг помаже спречава експлозију ЦСС-а, побољшава читљивост кода и поновну употребу, и чини ЦСС слеекер и бржим за извршавање.

Рефакторинг је обично потребан након неког времена, јер чак и пројекти који су почели са концизном и организованом кодном базом прије или касније почињу губити своју јасноћу; појављују се конзистентност, застарела правила и делови дупликата кода; такође почињемо да превазилазимо стилове и да користимо све више хакова и заобилазних решења.

Најбољи начин да одржимо нашу базу ЦСС кода одрживим је да се држимо “рефацтор еарли, рефацтор офтен” правило. У овом посту ћемо погледати неколико савета о томе како можемо да спроведемо ефикасан процес рефакторинга у ЦСС-у.

1. Спровођење иницијалне ревизије

Да бисте имали бољу слику о томе шта нам је потребно да рефакторишемо, најбоље је почети са свеобухватном ревизијом да видимо шта тренутно имамо.

Постоји много одличних онлине алата који нам могу помоћи у овом настојању. ЦССДиг је моћно Цхроме проширење које анализира ЦСС веб сајта и истражује његове слабости, као што су превише специфични селектори или репетитивна својства.

Неискоришћени ЦСС истражује неискоришћена правила ЦСС-а, док алатке за линтинг, као што је ЦСС Линт, омогућавају брзо проналажење компатибилности, могућности одржавања и других проблема.

Такође је важно да се ручно проучи код током почетне ревизије, јер многи проблеми на архитектонском нивоу могу бити ухваћени само на овај начин..

2. Поставите управљив план

Радни код за рефакторисање је увек тежак задатак, али можемо да ублажимо бол ако направимо план о томе шта нам је потребно да урадимо, поделимо процес рефакторинга до контролних делова и направимо изводљив распоред.

У ЦСС рефацторинг-у постоји кључна ствар коју увијек морамо узети у обзир: неке ствари које прерађујемо, нпр. мењајући имена селектора, успети потребно је подесити код релевантних ХТМЛ и ЈаваСцрипт датотека такође.

Зато је добра идеја пратите ове додатне модификације које ћемо морати да обавимо, и уградите их у наш распоред прераде заједно са примарним задацима везаним за ЦСС.

3. Пратите напредак

Пре него што кренемо у рефакторинг, то је битан корак направите резервне копије наших почетних датотека. Увођење система за контролу верзија, као што је Гит или Субверзија, у наш радни процес такође може значајно да побољша процес рефакторинга, јер ћемо имати регистар о секвенцијалним корацима које смо предузели, и ће се моћи вратити на претходну фазу ако желимо поновити ствари.

4. Држите се водича за стил кодирања

Кохерентни водич за стил кодирања може значајно побољшати читљивост кода и могућност одржавања, тако да је пре него што почнемо да рефакторишемо битно поставити ЦСС водич за стил кодирања.

Важне ствари о којима треба одлучити су:

именовања конвенције
правила форматирања
ордер ордер
јединице и вредности које желимо да користимо
правила за коментирање

Ако не желимо да креирамо сопствени водич за стил кодирања, можемо да користимо и туђе, као што је ТхинкУп, који се може наћи на Гитхубу.

Међутим, није довољно само представити водич за стил кодирања, већ и то држите се тога када преписујемо код током рефакторинга, и исто од свих осталих који ради на нашем пројекту.

5. Поставите кохерентну структуру датотека

Након што смо спремни за припреме, прва ствар коју треба да урадимо је да поставимо одговарајућу ЦСС датотечну структуру која обраћа пажњу на каскадну природу ЦСС-а.

То углавном зависи од пројекта како најбоље организовати наше фајлове, али постоје нека универзална правила, као што је коришћење засебног нормализе.цсс фајл за ЦСС ресет стилове, одвојен глобал.цсс за глобалне стилове који се користе у целом пројекту и за смештање библиотека трећих страна у посебан директоријум.

Ако желимо да будемо сигурни са нашом ЦСС структуром фајлова, постоје и готове архитектуре, као што су СМАЦСС или ИТЦСС, које нуде ефикасне технике о како организовати ЦСС датотеке на скалабилан начин.

6. Ослободите се неупотребљених и дуплицираних правила

После неког времена, ЦСС датотеке обично почињу да обилују неискоришћеним правилима која нам је потребно да идентификујемо и очистимо током рефакторинга. Постоје многи онлине алати који нам омогућавају истражите ова застарела правила, а понекад и дозвољава нам да их брзо одбацимо.

Најпознатији алат за ову намену је вероватно УнЦСС, Ноде.јс модул који омогућава брзо уклањање неискоришћених ЦСС правила, а пружа нам и софистициране конфигурационе опције које олакшавају фино подешавање процеса чишћења..

Важно је узети у обзир да смо ми не нужно желите уклонити неискоришћена правила из све ЦСС датотеке које имамо, на пример, од глобалних, ресетованих или листова стилова треће стране, тако да морамо искључите их током чишћења.

Заједно са застарелим правилима, дуплирана правила такође доводе до сувишног подрхтавања кода и губитка перформанси. Можемо их уклонити помоћу ЦСС Пурге Ноде.јс модула, али можемо радити и са ЦСС линтерс за тражење дуплих правила у ЦСС фајловима.

7. Смањити специфичност

Специфичност ЦСС селектора се израчунава из броја и типова унутрашњих селектора које садржи. ЦСС специфичност је изражена као четвороцифрени број који је најлакше разумети ако погледамо овај визуелни калкулатор специфичности ЦСС-а:

Најнижа специфичност (0001) припада селекторима који циљају само један општи ХТМЛ елемент, као што је

или

. Што више унутрашњих селектора садржи селекторски спој, то је његова специфичност већа.

Одређени селектори, као што су ид или селектори који долазе из уграђених стилова, имају више приоритете јер превазилазе стилове који припадају генеричким селекторима. На пример, специфичност # ид1 селектор је 0100.

У рефакторингу, циљ је смањити специфичност селектора (задржати их кратко) колико је то могуће, као што је могуће селектори са већом специфичношћу значајно смањују поновну употребу селектора, и довели до ослабљене базе кода.

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

Квалификовани селектори, као такав п.цласс1 (дефинисање п овде је непотребан, јер онемогућава коришћење исте класе са другим ХТМЛ елементима)
Дубоко уклопљени селектори, као такав .цласс1 .цласс2 .цласс3 .цласс4…
ИД, као такав # ид1

Онлине алати, као што је ЦССДиг споменуто у кораку 1, могу се користити за брзо проналажење селектора високе специфичности. Такође може бити корисно поставити правило у водичу за стил кодирања о стварима као што је максимални ниво угњежђивања или ограничење употребе ид селектора.

8. Веед Оут `!важно` Правила

ЦСС правила праћена !важно изјава надјачава регуларна правила стила. Користећи !важно правила пре или касније довести до некохерентног кода. Није случајност да их већина алатки за означавање означава као грешку.

Када морамо да напишемо ЦСС брзо, можемо почети да се ослањамо на њих иако због њихове једноставности.

Главни проблем са !важно декларације је да ако желимо да их у будућности превазиђемо, морамо ставити још више !важно декларације у употреби, тако да је најбоље да их отклоните где год је то могуће током процеса рефакторинга.

9. Очистите Магиц бројеве и тврде кодиране вредности

Током нашег свакодневног рада у ЦСС-у, понекад се бавимо проблемима које не можемо да решимо и почнемо да користимо тзв чаробне бројеве, вредности које раде из неких разлога, али ми не разумемо зашто. На пример узмите следећи пример:

 .цласс1 поситион: абсолуте; топ: 28пк; лијево: 15,5%;

Главни проблем са магичним бројевима је да јесу индиректно, и они утјеловљују “програмирање пермутацијом” антипаттерн. Током процеса рефацторинга морамо уклонити ова произвољна правила из нашег кода, и замијенити их разумнијим рјешењима гдје год је то могуће.

Исто правило се односи и на хард-цодед валуес такође. Вероватно најчешће појављивање хард-кодираних вредности може се наћи у правилима лине-хеигхт:

 / * лоше, мораћемо да додамо додатна фиксна правила висине линије за подређене елементе .цласс1 * / .цласс1 фонт-сизе: 20пк; лине-хеигхт: 24пк;  / * добро, флексибилно правило висине линије се може безбедно користити од стране дететових елемената * / .цласс1 фонт-сизе: 20пк; висина линије: 1.2;

Чврсто кодиране вредности чине наш код мање отпорним на будућност и ригиднијим, тако да као део рефакторинга морамо да их ископамо, и замените их флексибилним вредностима.

10. Јединице и вредности рефактора

Да би олакшали одржавање и отклањање грешака у будућности, и да би се избегли кварови који могу произаћи из коришћења различитих јединица, као што је ем и пк, истовремено, морамо држати се кохерентних правила о томе како користимо релативне и апсолутне вредности.

Ако смо их користили неконзистентно у прошлости, морамо их претворити тако да могу да сачињавају концизан систем

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