Како написати бољи ЦСС у тимовима са АЦСС-ом - динамична атомска ЦСС библиотека

Писање добрих каскадних табела стилова (ЦСС) је тешко и постаје теже у тиму у којем више програмера пише ЦСС.

Кроз овај чланак покушавам да вам представим приступ писању (или не писању ... видећемо) ЦСС-а. Овај приступ решава готово све проблеме са којима се данас суочава лоше написан ЦСС у тимовима.

Али прво, дозволите ми да поставим неке основне услове под којима мој чланак важи.

Неколико услова који овај чланак претпоставља:

  1. Радите у тиму у којем више програмера пише ЦСС.
  2. Тешко је применити смернице уколико не постоје аутоматизовани алати.
  3. Дизајнери су бесплатне птице. Редизајн се дешава.

Под овим условима представићу решење са сребрним метком које решава готово све проблеме са којима се суочавамо због лошег ЦСС-а (запамтите, ЦСС није лош. Лоше написан ЦСС јесте). Прођимо кроз те проблеме за почетак.

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

Проблем 1: Тешко је именовати часове

Програмер 1 (док кодира) : Мени изгледа као заглавље, дозволите ми да користим .headerселектор за то.

Програмер 2 (у захтеву за повлачење) : То није заглавље. Мени изгледа као наслов. Штавише, не можемо га назвати само „заглављем“ јер тај елемент није довољно генерички. Назовимо то .panel-headerили боље .panel-title.

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

Доступна решења:

  • БЕМ - конвенције о именовању попут БЕМ постоје да би се овај проблем донекле решио. Али на крају је то смерница (сви знамо како је лако следити смернице). БЕМ вас можда спречава да идете у потпуности ад-хоц, али и даље морате да смислите почетно име класе за своје компоненте.
  • Атомске класе - још један уобичајени приступ који данас иде у потпуности атомски са атомским класама. Мали часови који раде само једно. На пример. Тахиони. Мешајте их и подударајте како бисте добили оно што вам треба. Ово је добар корак ка „прескакању именовања“, али шта ако у будућности не постоји класа за одређену ствар? Како да прилагодим постојеће атомске класе према свом дизајну? Да ли се сви часови увек учитавају на мојој страници без обзира да ли их користим или не? Треба нам нешто више.

Проблем 2: Снаге селектора

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

Доступна решења:

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

Проблем # 3: Шта је са неискоришћеним ЦСС-ом?

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

Доступна решења:

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

Проблем # 4: Рефакторирање

Програмер 1 : Овај ЦСС је постао прилично неуредан. Мислим да би то требало да преправимо.

Програмер 2 : Мислите ли да се и овај селектор који мењате можда користи на страници Кс? Да ли сте проверили?

Програмер 1 : О, доврага! У праву си ... То ми је недостајало. Та страница Кс је превише критична да би је се могло додирнути. Да ли знате зашто је тај програмер користио исту класу на обе странице?

Програмер 2 : Немам појма. Напустио је компанију. Оставимо ЦСС какав јесте :(

Немам више шта да кажем овде. Тај дијалог све објашњава.

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

У тиму би најочигледније, али савршено решење било - престати писати ЦСС!

„Чекај, шта то говориш? То није могуће!". Можда мислите тако, али дозволите ми да вас упознам са нечим.

Све-у-једном решење - АЦСС (Атомизер)

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

Да бисте наставили са примерима кода у овом чланку, предлажем да инсталирате Веб Макер (предње игралиште које подржава писање АЦСС-а без подешавања израде) на Цхроме прегледачу.

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

 I am a button

Један предлог - не просуђујте већ при првом погледу на ову синтаксу. Наставите да читате, дајте му времена, разговарајте и онда одлучите. Настава на buttonознаци може изгледати другачије, али сложићете се да су гуессабле у великој мери о томе шта они раде. То је дугме са плавом , белом , 10 пиксела , линијским блоком , показивачем и промењено у црвено при лебдењу.background-colorcolorpaddingdisplaycursorbackground-color

Ако сте већ инсталирали Веб Макер, отворите га кликом на икону Веб Макер у горњем десном углу прегледача Цхроме. Налепите горњи ХТМЛ у окно ХТМЛ кода и изаберите Атомиц ЦСС као режим у ЦСС окну кода. Чим то учините, видећете неки аутоматски ЦСС генерисан у окну ЦСС кода, на пример:

ЦСС који видите генерише алатка Атомизер коју сам горе поменуо. У основи чита ХТМЛ (или било коју датотеку), детектује АЦСС класе из њих и генерише ЦСС за те откривене класе. Дакле, пишете само ХТМЛ са одговарајућим класама које желите да користите и ЦСС се аутоматски генерише!

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

Инлине, али не инлине?

Као што видите, на тагове увек пишемо класе у реду. То сам мислио под линијским стилом. Али, молим вас, немојте га бркати са „уграђеним стиловима“ . За разлику од инлине стилова, наше инлине класе преводе се у стварне ЦСС класе у предмеморираном листу стилова. Дакле, у основи добијамо исту снагу као и уграђени стилови (брзо писање ствари), али и даље добијамо потпуно важећи атомски ЦСС као излаз.

Нема више именовања! ?

Моја апсолутна омиљена предност. Никада нећете морати да смислите лепо, семантичко и неусаглашено име за час.

Веома позната изрека каже:

У рачунарским наукама постоје само две тешке ствари: поништавање кеша и именовање ствари. - Пхил Карлтон

Супер лако ажурирање и рефакторирање

Идите на ХТМЛ и промените класе да бисте ажурирали неки стил. Уклоните било коју наставу са било ког места, без страха да ћете нешто друго разбити.

Нисте бајт неискоришћеног ЦСС-а?

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

Немате смерница за нове програмере?

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

Такође, постоји сјајно мало продужење Висуал Цоде-а Панкаја Парашара које аутоматски предлаже ове класе директно у едитору. Дакле, ни референца није потребна са тим проширењем. Укључивање програмера је завршено!

Поред ових предности, постоји још неколико додатака с којима АЦСС долази.

  • Генерално користимо исте старе парове својства / вредности у апликацији. Тако генерисани табела стилова у суштини престаје да расте након одређеног тренутка . Јер сваки јединствени пар својство / вредност долази једном у завршном табели стилова.
  • Због горње тачке, у ствари бисте могли користити исти табеларни слог у свом пакету више производа, јер никада не би био тако велик. Иста кеширана ЦСС табела стилова за све производе!
  • Захтев за повлачењем који делује као сан. Замислите повлачење захтева тамо где не видите ниједну .цсс датотеку. Нема више провере класа да ли постоји сукоб смисла или специфичности . Јер знате да би се генерисао тачан атомски ЦСС, који би требао бити присутан. Зар то неће бити земља чудеса?

Пробијање мита

Пуно митова се развило у вези са АЦСС преко Интернета. То је због плитке процене оквира и просуђивања на први поглед.

То је исто као и линијски стил. То је лоше!

Не то није. Већ смо видели горе. Дефинитивно је моћан попут линијског стила, али од њега не наслеђује никакве недостатке.

Тешко је изнова и изнова писати све те исте класе.

Да, јесте. АЦСС каже да је то оквир заснован на компонентама. Ако не шаблонирате сваку од својих компоненти и већ дуплирате ХТМЛ, реците да сваки пут направите дугме, АЦСС није за вас.

На пример, требало би да креирате дугмад користећи апстрактну компоненту дугмета на следећи начин:

Hello World

који би требало да се компајлирају у нешто попут:

Hello World

Часови уопште немају смисла

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

Желео бих да цитирам одломак из једног од члана Харрија Роберта:

Уобичајени аргумент против БЕМ-а је да је ружан; Усуђујем се рећи да ако зазирете од кода који се заснива искључиво на његовом изгледу, често пропуштате поенту. Осим ако је код постаје непотребно тешко одржавати, или искрено теже читати, онда можда не треба да размисле пре него што га користите, али ако се 'само изгледа чудно ", али има важећу сврху, онда дефинитивно треба да се у потпуности сматрати пре отписујући. - Харри Робертс

Али ево нас, користимо БЕМ да бисмо учинили наше базе кода здравим.

Нећу моћи да урадим Кс ствар у АЦСС-у

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

На крају

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

Такође, АЦСС није једини који заузима овај приступ. Постоје сличне алтернативе попут Бловдри ЦСС-а, Целл ЦСС-а итд., Свака доноси свој стил постизања исте ствари.

Ако имате било каквих питања у вези са АЦСС, можете да пингерате Тхиеррија Коблентза, самог човека из АЦСС тима, на Твиттеру. Поставите питање на компилацији ФАК коју он одржава или се придружите групи Атомизер на Гиттеру. Или ставите у коментаре овог чланка.

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

Ако вам се свиђа овај чланак, покажите своју љубав пљескајући ?? на чланку. Такође ме пратите на Твиттер-у, где делим још својих фронт-енд чланака и пратећих пројеката.

Више за читање

  • //ввв.смасхингмагазине.цом/2013/10/цхалленгинг-цсс-бест-працтицес-атомиц- Аппроацх/ - аутор Тхиерри Коблентз
  • Репо за Атомизер ГитХуб - //гитхуб.цом/ацсс-ио/атомизер
  • АЦСС документација - //ацсс.ио/куицк-старт.хтмл
  • Честа питања о АЦСС-у саставио Тхиерри - //гитхуб.цом/тхиеррик/АЦСС-КА
  • АЦСС игралиште - //вебмакерапп.цом