Сасс Бест Працтицес Савјети и алати за програмере

Слично као што је јКуери направио револуцију у ЈаваСцрипту, Сасс је револуционирао ванилије ЦСС. Већина програмера који уче Сасса слажу се да се никада не желе вратити. Многи се такође слажу да је највећи проблем код нових програмера начин користе Сасс, а не Сасс.

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

Свакако не морате да примените све ове функције у ваш радни процес. Али вреди бар да се ове идеје забаве и размотре потенцијалне користи.

Филе Органисатион

Најбоље место за почетак развоја Сасс-а је организација фајлова. Ако сте већ у модуларном коду, требало би да разумете вредност увоза и парцијала (више о томе касније).

Али за сада само погледајте овај пример структуре фајлова из ДоЦССа. Поново сам створио структуру датотеке коју можете погледати у наставку:

Ово је само приједлог и то је један од многих начина на које можете организирати датотеке. Можете пронаћи друге методе које користе различите структуре мапа “глобалс” за СЦСС и “страницама” за СЦСС специфичан за страницу.

Прођимо кроз предложени стил организације да бисмо испитали сврху сваког фолдера:

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

Ово је само основна полазна тачка и има доста простора да се проширите својим идејама.

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

Сас парцијали су од виталног значаја за савремене најбоље праксе. Они су високо препоручени од стране Зурбовог дизајнерског тима и многих других професионалних програмера.

Ево цитата са Сасс вебсајта који објашњава парцијале:

“Можете креирати парцијалне Сасс датотеке које садрже мале исјечке ЦСС-а које можете укључити у друге Сасс датотеке. Ово је сјајан начин модуларизовати ваш ЦСС и помоћи да ствари буду лакше одржаване. Парцијални је једноставно Сасс датотека именована са водећом доњом цртом. Можете га назвати нешто слично _партиал.сцсс. Доња црта омогућава Сассу да зна да је датотека само делимична датотека и да не би требало да се генерише у ЦСС датотеци. Сасс парцијали се користе са @увоз директива.”

Погледајте и остале постове у вези са Сасс структуром датотека:

• Хов И Струцтуре Ми Сасс Пројецтс
• Естетска Сасс: Организација архитектуре и стила
• Структуре директоријума које вам помажу да задржите свој код

Импорт Стратегиес

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

Најбоље место за почетак је глобални лист који садржи увоз, променљиве и миксине заједно. Многи програмери преферирају да одвоје варијабле и микине, али то се своди на семантику.

Имајте на уму да су микини начин увоза, односно умножавање Сасс кода. Они су невероватно моћни, али не би их требало користити “статиц” код. Имајте на уму да постоји разлика између микинс, ектендс и плацехолдера, од којих се сви користе у Сасс развоју.

Микинс се најбоље користе са динамичким вредностима које се преносе у микин за измене кода. На пример, погледајте овај Сасс микин који креира позадински градијент између две боје.

@микин линеарГрадиент ($ топ, $ боттом) бацкгроунд: $ топ; / * Стари претраживачи * / бацкгроунд: -моз-линеар-градиент (топ, $ топ 0%, $ боттом 100%); / * ФФ3.6 + * / бацкгроунд: -вебкит-градиент (линеарно, лево горе, лево дно, боја-стоп (0%, $ топ), боја-стоп (100%, $ боттом)); / * Цхроме, Сафари4 + * / бацкгроунд: -вебкит-линеар-градиент (врх, $ топ 0%, $ боттом 100%); / * Цхроме10 +, Сафари5.1 + * / бацкгроунд: -о-линеар-градиент (топ, $ топ 0%, $ боттом 100%); / * Опера 11.10+ * / бацкгроунд: -мс-линеар-градиент (топ, $ топ 0%, $ боттом 100%); / * ИЕ10 + * / бацкгроунд: линеарно-градијент (до дна, $ топ 0%, $ боттом 100%); / * В3Ц * / филтер: прогид: ДКСИмагеТрансформ.Мицрософт.градиент (стартЦолорстр = "# фффффф", ендЦолорстр = "# 000000", ГрадиентТипе = 0); / * ИЕ6-9 * /

Микин има двије вриједности: горњу и доњу. Можете написати различите микине за различите типове градијента који укључују 3 или 4 различите боје. Ово вам омогућава да увезете и клонирате микин код док мењате параметре за прилагођене опције.

Пример из кода одговоран изгледа овако:

.буттон @инцлуде линеарГрадиент (#цццццц, # 666666); 

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

Иако Сасс има само један @импорт метод, укључио сам миксине и резервисана места да бих демонстрирао флексибилност кода који се може написати у једном фајлу, али укључен било где.

Приликом изградње структуре увоза само запамтите да слиједите концепте ДРИ кодирања (Немојте се понављати).

Именовања конвенције

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

Синтакса Сасс кода је заправо заснована на ЦСС смерницама. Ево неколико препоручених најбољих пракси које треба имати на уму:

• два (2) размака, без картица
• идеално, широке линије од 80 знакова или мање
• смислено коришћење размака
• користите коментаре да бисте објаснили ЦСС операције

Ово нису потребне ставке за важећи Сасс код. Али ови приједлози долазе од професионалних програмера који открили су да ови скупови правила пружају најједнакије искуство кодирања.

Али што се тиче конвенција именовања, можете завршити са две различите структуре: једна за Сасс имена и друга за ЦСС имена класа. Неки програмери преферирају БЕМ у односу на Сассове приједлоге. Ни једно ни више, или мање, тачно; другачији са различитим оперативним процедурама.

Проблем је у томе што се БЕМ не преноси добро на Сасс варијабле или микине јер немају структуру блок / елемент / модификатор (БЕМ). Ја лично више волим да користим Сасс именовања, али можете покушати било шта од цамелЦасе до ваше интерне синтаксе.

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

На пример, да бисте променили боју везе, отворили бисте датотеку променљивих (можда _вариаблес.сцсс) и пронађите одељак за варијабле боја. Затим пронађите везу по имену (линк за заглавље, текстуални линк, итд.) И ажурирајте боју. Једноставно!

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

 // Фоундатион фор Ситес Сеттингс // ----------------------------- // // Садржај: // // 1 Глобална // 2. Прекиди // 3. Мрежа // 4. Основна типографија // 5. Помоћник типографије… // 1. Глобални // --------- $ глобал-фонт-сизе: 100 %; $ глобал-видтх: рем-цалц (1200); $ глобал-линехеигхт: 1.5; // етц

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

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

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

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

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

Нестинг анд Лоопинг

Ове две Сасс технике су веома различите у акцији, али обе имају способност злоупотребе ако се не користи пажљиво.

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

боди див.цонтент див.цонтаинер … боди див.цонтент див.цонтаинер див.артицлес … боди див.цонтент див.цонтаинер див.артицлес див.пост … 

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

Скицирањем овог СитеПоинт водича наћи ћете три златна правила за гнијежђење:

• Никада не идите дубље од 3 нивоа.
• Осигурајте да је ЦСС излаз чист и поновљив.
• Користите уметање када има смисла, а не као подразумевану опцију.

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

Увлачење селектора неће изазвати каскадне ЦСС ефекте. Али, лакше ћете склизнути Сасс фајл у тачку која се односи на класе.

И петље могу ако се не примени на одговарајући начин. Три Сасс петље су @за, @док, и @еацх. Нећу улазити у детаље о томе како сви они раде, али ако сте заинтересовани, погледајте овај пост.

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

/ * Сасс код * / @ за $ и од 1 до 8 $ видтх: перцент (1 / $ и) .цол - # $ и видтх: $ видтх;  / * оутпут * / .цол-1 ширина: 100%; .цол-2 ширина: 50%; .цол-3 ширина: 33.333%; .цол-4 ширина: 25%;  .цол-5 ширина: 20%; .цол-6 ширина: 16.666%; .цол-7 ширина: 14.285%; .цол-8 ширина: 12.5%;

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

Лоопс требало би не користи се за дуплирање селектора или својстава селектора; за то су миксини.

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

Али редовне Сасс петље су једноставне и ефикасне у обезбеђивању излазног кода без понављања. Најбољи разлог за употребу петљи је са ЦСС својства која разликују излазне податке.

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

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

Модуларизација

Пракса писања модуларног Сасс-а је апсолутно неопходна за већину пројеката (тврдио бих, сваки пројекат). Модуларизација је процес разбијање пројекта у мање модуле. Ово се може постићи помоћу Сасс-а парцијала.

Идеја модуларног Сасс-а је да пише појединачне СЦСС датотеке са специфичном сврхом која циља глобални садржај (типографија, решетке) или елементи странице (табови, обрасци).

Дефиниција Сасс модула је прилично јасна и даје веома специфичан предлог: Увоз модула никада не би требао излазити код.

Идеја обавезног излаза за све модуле била би ноћна мора за оптимизацију. Уместо тога треба да креирате модуле појединачно и позовите само оне које вам требају. Модули се могу дефинисати миксинима или функцијама, али је могуће креирати и модуле који садрже селекторе.

Међутим, чланак о Сасс Ваи-у предлаже писање свих селектора као микинова и позива их само према потреби. Без обзира на то да ли то усвојите или не, то је на крају ваш избор. Мислим да то зависи од величине пројекта и ваше удобности при руковању мјешавинама.

Цитирајући Јохна Лонга са његовог поста на Тхе Сасс Ваи:

“За мене, модули су постали основне јединице или блокови за моје Сасс пројекте.”

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

Осим тога, много је лакше копирати модуле из једног пројекта у други када се налазе у одвојеним датотекама. Флексибилност и реусабле цоде су камен темељац модуларног развоја.

Да бисте сазнали више о Сасс модулима и техникама модуларизације, погледајте ове постове:

• ЦСС модули: Добродошли у будућност
• За и против Модуларног Сасса
• Модуларна ЦСС организација са СМАЦСС & САСС

Пронађите свој савршени ток рада

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

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

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

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

Једна коначна сугестија коју имам за цео Сасс процес је да доносити одлуке са јасноћом на уму. Пишите код који олакшава ваш посао. Немојте превише комплицирати пројекат ако постоји једноставнији начин да то урадите.

Сасс је намењен унапређењу искуства у развоју ЦСС-а радити са јасноћом и најбољим праксама да бисте добили најбоље могуће искуство.

Упаковати

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

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

Погледајте ове везе да бисте пронашли више савета и најбољих пракси за развој Сасс-а:

• Сасс Гуиделинес
• Визија за наше Сасс
• 8 савета који ће вам помоћи да извучете најбоље из Сасс-а
• Ширење у Сассу без креирања нереда
• Сасс Бест Працтицес - Нестирање више од 3 нивоа дубоко