Управљајте великим ЦСС пројектима помоћу ИТЦСС-а

Харри Робертс ће говорити у Генериши Бангалоре 2. децембра. Не пропустите његов разговор рефакторирајући ЦСС без губљења ума , у којем ће поделити своје савете и технике за бављење наслеђеним ЦСС-ом. Резервиши одмах да постанете оснивач Генерате-а и остварите 50% попуста на све будуће Генерате конференције широм света!



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



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

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



Представљамо ИТЦСС

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

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

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



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

ИТЦСС је такође невероватно флексибилан. Компатибилан је са аспектима других методологија попут СМАЦСС, ООЦСС, па чак и БЕМ. По потреби се може продужити или смањити, у зависности од вашег пројекта. Ради са или без претпроцесора и не примењује никакве посебне конвенције именовања (мада бих вам увек препоручио да их користите). Ова флексибилност значи да се ИТЦСС може користити у било којој величини или стилу пројекта.

како уредити приватност албума на фацебооку

Предуслови

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

Друго, морате радити на компонентисаној архитектури корисничког интерфејса. Више не градите на моделу „странице“, већ на обрасцу додатака / модула / компонената (ИТЦСС их назива „компонентама“). Дискретне, самосталне делове корисничког интерфејса правите као компоненте за вишекратну употребу.

Коначно, ИТЦСС захтева да се залажете за архитектуру засновану на класама. Не плашите се додавања класа у свој ХТМЛ; не верујете да су „мање ознаке“ и „чисте ознаке“ иста ствар; и разумете да везивање за класе, уместо голих ХТМЛ елемената, пружа робуснију и скалабилну архитектуру.

Научите како да рефакторишете ЦСС без губљења мисли у Генерате Бангалоре

Научите како да рефакторишете ЦСС без губљења мисли у Генерате Бангалоре

Кључне метрике

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

ИТЦСС функционише тако што читав ваш ЦСС пројекат налаже по три кључне метрике. Сада ћемо погледати ове.

Необичан или непромишљен редослед извора може довести до несталне и несталне примене стилова

Необичан или непромишљен редослед извора може довести до несталне и несталне примене стилова

01. Опште за експлицитно

Почињемо са најгенеричнијим стиловима на ниском нивоу, који се све уклапају и који се не истичу, а на крају напредујемо до експлицитнијих и конкретнијих правила док се крећемо кроз пројекат. Могли бисмо започети са ресетовањем, а затим прећи на мало опсежнија правила попут х1–6 {}, па све до крајње експлицитних правила као што је .тект-центер {}.

02. Ниска специфичност до висока специфичност

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

03. Далекосежни до локализованих

Селектори према почетку пројекта утичу на пуно ДОМ-а, с тим да се тај досег поступно смањује како пролазимо кроз базу кодова. Желимо да направимо „пролазе“ преко ДОМ-а писањем правила која поступно све мање утичу на њега.

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

како своје слике учинити приватним на фацебооку

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

Слојеви

Три кључне метрике обрнутог троугла

Три кључне метрике обрнутог троугла

Те се метрике можемо држати тако што ћемо наш ЦСС поделити на неколико одељака или „слојева“. Сваки слој мора бити уведен на месту које поштује сваки од критеријума. Већина људи (и архитектура) покушава да ЦСС пројекте подели на тематске групе: ево наших типографских стилова, овде су наши стилови образаца, овде су наши стилови галерије слика. Лоша страна овога је што није баш симпатично према томе како ЦСС заправо ради и не наручује ЦСС на начин који најбоље користи, укроћује или користи предности каскаде, наслеђивања или специфичности.

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

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

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

01. Подешавања

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

Примери глобалних подешавања могу бити ствари као што су основна величина фонта, палете боја, конфигурација (на пример, $ енвиронмент: дев;) и тако даље.

02. Алати

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

03. Генерички

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

04. Елементи

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

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

05. Предмети

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

06. Компоненте

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

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

07. Адути

Овај слој побеђује - или „адутује“ над свим осталим слојевима и има моћ да надјача било шта што је прошло пре њега. Неелегантна је и тешка, а садржи класе услужних и помоћних класа, хаковања и замене.

Много декларација у овом слоју носиће! Важно (нпр. .Тект-центер {тект-алигн: центер! Импортант;}). Ово је слој највише специфичности - он укључује најексплицитније врсте правила, са најужим фокусом. Овај слој чини тачку троугла.

Следећи овај слојевити, кључни метрички заснован, ИТЦСС приступ наручивању извора даје нам здраву примену стилова у нашем пројекту

Следећи овај слојевити, кључни метрички заснован, ИТЦСС приступ наручивању извора даје нам здраву примену стилова у нашем пројекту

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

како се побољшати као уметник

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

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

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

Партиалс

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

Ове парцијалне елементе треба држати што је могуће мање и ситније, при чему свака садржи само онолико ЦСС-а колико је потребно да испуни своју улогу. Дакле, _елементс.хеадингс.сцсс би садржао само правила х1 до х6 и ништа више. Ако имате, на пример, компоненту наслова странице која чини главни наслов (нпр. Х1) и поднаслов (нпр. Х2) изгледом на одређени начин, креирали бисте делимично _цомпонентс.паге-титле.сцсс у слоју Компоненте и повезали на класе (нпр .паге-титле, .паге-титле-суб), а не на ХТМЛ елементе.

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

Резултат

Када се све то споји, могло би изгледати отприлике овако:

@import 'settings.global'; @import 'settings.colors'; @import 'tools.functions'; @import 'tools.mixins'; @import 'generic.box-sizing'; @import 'generic.normalize'; @import 'elements.headings'; @import 'elements.links'; @import 'objects.wrappers'; @import 'objects.grid'; @import 'components.site-nav'; @import 'components.buttons'; @import 'components.carousel'; @import 'trumps.clearfix'; @import 'trumps.utilities'; @import 'trumps.ie8';

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

Обезбеђујемо да сваки слој садржи ЦСС:

  • Слична специфичност: Сви бирачи засновани на елементима или сви бирачи засновани на класама или класе корисних програма који носе!
  • Слична експлицитност: Обликовање свих ваших голих ХТМЛ елемената или обликовање УИ компоненти или обликовање одређених помоћних класа
  • Сличан домет: Могућност утицаја на сав ДОМ (нпр. * {}), Подскуп ДОМ-а (нпр. {}), Одељак ДОМ-а (нпр. Вртешка {}) или на одређени ДОМ чвор (нпр. цлеарфик {})

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

Ако желите даље да истражите ИТЦСС, погледајте уводни говор Харри Робертс-а на ДаФЕД-у ...

Мрзите радити са наслеђеним ЦСС-ом? Не пропустите Харри Робертс ' Генериши Бангалоре разговарају о рефакторирајући ЦСС без губљења ума . Резервиши одмах да уживате у овом и другим разговорима водећих веб имена, укључујући Јонатхан Сноок, Степхание Риегер и Схикхар Капоор.

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