Задаволены
- Прадстаўляем ITCSS
- Перадумовы
- Асноўныя паказчыкі
- 01. Агульны для відавочнага
- 02. Нізкая спецыфічнасць да высокай спецыфічнасці
- 03. Дасягальны да лакалізаванага
- Пласты
- Удзельнікі
- Вынік
Гары Робертс будзе выступаць у Стварыць Бангалор 2 снежня. Не прапусціце яго размову далей рэфактарынгуе CSS, не губляючы розуму, у якім ён падзеліцца парадамі і метадамі працы са старым CSS. Браніраваць зараз стаць членам-заснавальнікам Generate і атрымаць зніжку 50% на ўсе будучыя канферэнцыі Generate па ўсім свеце!
Здаецца, архітэктура CSS зараз некалькі ў модзе. Пра гэта вы, несумненна, чулі шмат разоў за мінулы год і каля таго, і нездарма: карыстацкія інтэрфейсы (і каманды, якія іх ствараюць) становяцца ўсё больш і больш складанымі, чым калі-небудзь раней.
Ёсць шэраг аспектаў CSS, якія робяць яго складаным. Гэта дэкларатыўна, што азначае, што няма ніякай логікі і кантролю, каб шмат распавядаць іншым распрацоўшчыкам пра стан альбо будаўніцтва праекта. Ён працуе ў глабальнай прасторы імёнаў, гэта значыць, мы атрымліваем сутыкненні, стылі, якія выцякаюць, і выпадковыя рэгрэсіі. Ён выкарыстоўвае спадчыну, робячы ўсё некалькі ўзаемазалежным і далікатным. Нарэшце, непазбежная мадэль спецыфікі можа выклікаць праблемы, калі селектары змагаюцца паміж сабой за вядомасць.
Гэта ўсе праблемы самі па сабе, але пры працы ў любым разумным маштабе яны альбо становяцца непасрэдна больш відавочнымі, альбо верагоднасць сутыкнуцца з такімі праблемамі статыстычна значна большая. Увядзіце архітэктуру CSS: спосаб планавання і структуравання вашага CSS для вялікіх і доўгатэрміновых праектаў.
Прадстаўляем ITCSS
Архітэктура, якую мы сёння разгледзім, называецца ITCSS - «Перавернуты трохвугольнік CSS». Гэта метадалогія, якая ўключае ў сябе візуалізацыю ўсяго вашага праекта CSS як шматслаёвы перавернуты трохкутнік. Гэтая іерархічная форма ўяўляе мадэль, якая дапаможа вам упарадкаваць CSS найбольш эфектыўна і найменш марна. Давайце капацца!
ITCSS - гэта тое, над чым я працую ў той ці іншай форме ўжо каля чатырох гадоў. Не выпадкова апошнія чатыры гады я таксама працаваў выключна над лічбавымі прадуктамі: вялікімі доўгатэрміновымі праектамі з цэлымі камандамі інжынераў, якія цягам некалькіх месяцаў працавалі над адной і той жа базай дадзеных.
Менавіта ў гэтым асяроддзі (спадчына, новыя функцыі, шматлікія ўдзельнікі, высокая хуткасць, назапашаны тэхнічны запазычанасць, супярэчлівыя праблемы зацікаўленых бакоў) патрабуецца нашмат больш стараннасці і структуры з напісаным намі кодам. Вось чаму я вынайшаў ITCSS; дапамагчы распрацоўшчыкам, якія працуюць над гэтымі буйнымі праектамі, лепш арганізаваць, маштабаваць і кіраваць сваім CSS.
Што ITCSS імкнецца зрабіць, гэта забяспечыць узровень фармальнасці і структуры спосабу напісання нашага CSS. Гэта не вялікае адхіленне ад нормы, а гэта азначае, што пераход да ITCSS не павінен апынуцца занадта складаным. Акрамя таго, там, дзе большасць архітэктур і падыходаў імкнуцца пазбегнуць надакучлівых аспектаў CSS, ITCSS ахоплівае і прыручае іх і прымушае працаваць на нашу карысць. ITCSS вызначае агульныя аспекты праекта лагічным і разумным чынам, у той жа час забяспечваючы салідны ўзровень інкапсуляцыі і развязкі, які абараняе неагульныя аспекты ад умяшання адзін у аднаго.
ITCSS таксама неверагодна гнуткі. Ён сумяшчальны з такімі аспектамі, як SMACSS, OOCSS і нават BEM. У залежнасці ад вашага праекта яго можна падоўжыць альбо паменшыць. Ён працуе з прэпрацэсарам ці без яго, і ён не забяспечвае выканання якіх-небудзь канкрэтных умоў наймення (хаця я б заўсёды рэкамендаваў выкарыстоўваць яго). Гэтая гнуткасць азначае, што ITCSS можна выкарыстоўваць для любога памеру і стылю праекта.
Перадумовы
Перш чым мы паглыбімся ў спецыфіку, ёсць некалькі неабходных умоў пры працы з ITCSS.Усё гэта становіцца звычайнай практыкай для любога сучаснага распрацоўшчыка карыстацкага інтэрфейсу. Па-першае, у CSS няма ідэнтыфікатараў. Ідэнтыфікатары - гэта цяжкавагавікі спецыфікі, і іх выкарыстанне цалкам вывядзе нашу спецыфіку.
Па-другое, вам трэба папрацаваць з кампанентаванай архітэктурай карыстацкага інтэрфейсу. Вы ствараеце ўжо не мадэль "старонкі", а мадэль віджэтаў / модуляў / кампанентаў (ITCSS называе іх "кампанентамі"). Вы ствараеце дыскрэтныя, самадастатковыя фрагменты карыстацкага інтэрфейсу як шматразовыя кампаненты.
Нарэшце, ITCSS патрабуе, каб вы выступалі за архітэктуру, заснаваную на класе. Вы не баіцеся дадаваць класы ў свой HTML; вы не верыце, што "меншая нацэнка" і "чыстая нацэнка" - гэта адно і тое ж; і вы разумееце, што прывязка да класаў, а не голыя элементы HTML, забяспечвае больш надзейную і маштабуецца архітэктуру.
Асноўныя паказчыкі
ITCSS - гэта цалкам кіраваная архітэктура, а гэта значыць, яна распавядае, як пабудаваць увесь ваш CSS-праект. Напрыклад, ён не проста распавядае, як ствараць кампаненты, але дапамагае кіраваць усім, пачынаючы ад архітэктуры Sass і заканчваючы парадкам, тыпаграфскіх стыляў нізкага ўзроўню да тэматыкі і шмат іншага.
ITCSS працуе, упарадкаваўшы ўвесь ваш CSS-праект па трох ключавых паказчыках. Мы разгледзім іх зараз.
01. Агульны для відавочнага
Мы пачынаем з самых агульных, нізкага ўзроўню, усеабдымных, нічым не характэрных стыляў, і ў канчатковым выніку пераходзім да больш відавочных і канкрэтных правілаў, прасоўваючыся па праекце. Мы можам пачаць з перазагрузкі, а потым перайсці да крыху больш правілаў, такіх як h1-6 {}, аж да надзвычай відавочных правілаў, такіх як .text-center {}.
02. Нізкая спецыфічнасць да высокай спецыфічнасці
Селектары з самай нізкай спецыфікай з'яўляюцца ў самым пачатку, і спецыфічнасць пастаянна павялічваецца па меры прасоўвання па праекце. Мы хочам пераканацца, што пазбягаем як мага большай колькасці Спецыфічных войнаў, таму стараемся ўстрымлівацца ад напісання селектараў больш высокай спецыфічнасці перад нізкаспецыфічнымі. Мы заўсёды дадаем спецыфіку ў адным кірунку, пазбягаючы такім чынам канфліктаў.
03. Дасягальны да лакалізаванага
Селектары ў пачатку праекта ўплываюць на вялікую частку DOM, і гэты прагрэс паступова памяншаецца па меры праходжання кодавай базы. Мы хочам зрабіць "пераходы" над DOM, напісаўшы правілы, якія ўсё менш і менш уплываюць на яго.
Мы можам пачаць з выцірання палёў і запісаў з усяго, потым мы можам стылізаваць кожны тып элемента, потым звузіць яго да кожнага тыпу элемента з пэўным класам, прымененым да яго, і гэтак далей. Гэта паступовае звужэнне ахопу надае нам форму трыкутніка.
Заказ нашых праектаў у адпаведнасці з гэтымі ключавымі паказчыкамі мае некалькі пераваг. Мы можам пачаць дзяліцца глабальнымі і далёка ідучымі стылямі значна больш эфектыўна і значна радзей, мы значна зніжаем верагоднасць узнікнення праблем і пішам CSS у лагічным і прагрэсіўным парадку. Гэта азначае вялікую пашыральнасць і меншую празмернасць, што, у сваю чаргу, азначае меншую колькасць адходаў і значна меншы памер файлаў.
Пласты
Мы можам прытрымлівацца гэтых паказчыкаў, разбіваючы наш CSS на некалькі раздзелаў альбо «слаёў». Кожны пласт павінен быць уведзены ў месцы, якое адпавядае кожнаму з крытэрыяў. Большасць людзей (і архітэктур) спрабуюць падзяліць праекты CSS на тэматычныя групы: вось нашы тыпаграфскія стылі, вось нашы стылі формы, вось нашы стылі галерэі малюнкаў. Недахопам гэтага з'яўляецца тое, што гэта не вельмі прыхільна ставіцца да таго, як на самай справе працуе CSS, і не замаўляе CSS такім чынам, каб лепш выкарыстоўваць, прыручаць альбо скарыстаць каскад, наследаванне ці спецыфіку.
У ITCSS кожны ўзровень з'яўляецца лагічным прагрэсаваннем ад апошняга. Ён павялічваецца ў спецыфіцы, становіцца больш відавочным і намераным, а таксама звужае ахоп выкарыстоўваюцца селектараў. Гэта азначае, што наш CSS па сваёй сутнасці лягчэй маштабаваць, бо мы пішам яго ў парадку, які толькі дадае да таго, што было напісана раней. Мы не губляем час на скасаванне альбо перакрыванне занадта раздумлівага CSS, напісанага раней.
Гэта таксама азначае, што ў кожнай рэчы і ў любых тыпах рэчаў ёсць сваё стабільнае, прадказальнае месца для жыцця. Гэта робіць пошук і даданне стыляў значна прасцей, што асабліва карысна, калі ў вас ёсць некалькі распрацоўшчыкаў, якія ўносяць свой уклад у кодавую базу.
Па змаўчанні ITCSS мае сем слаёў. Зараз мы разгледзім кожны з іх па чарзе.
01. Налады
Калі вы выкарыстоўваеце прэпрацэсар, пачніце тут. Гэта ўтрымлівае любыя глабальныя налады для вашага праекта. Я хацеў бы падкрэсліць слова "глабальны" - гэты пласт павінен змяшчаць толькі налады, да якіх трэба атрымаць доступ з любога месца. Налады, такія як $ heading-size-1, павінны быць вызначаны ў частковым загалоўках. Гэта гарантуе, што гэты пласт застаецца прыгожым і тонкім, і гэта азначае, што большасць налад можна знайсці побач з кодам, які іх выкарыстоўвае, што робіць пошук рэчы прасцейшым.
Прыкладамі глабальных налад могуць быць такія рэчы, як базавы памер шрыфта, каляровыя палітры, канфігурацыя (напрыклад, $ environment: dev;) і гэтак далей.
02. Інструменты
На наступным пласце размешчаны вашы даступныя ва ўсім свеце інструменты - менавіта міксіны і функцыі. Любы міксін альбо функцыя, якія не маюць патрэбы ў глабальным доступе, павінны належаць да той частцы, да якой яны адносяцца. Пласт "Інструменты" ідзе пасля слоя "Налады", таму што міксін можа запатрабаваць адзін з глабальных параметраў у якасці параметра па змаўчанні. Прыкладамі глабальных інструментаў могуць быць градыентныя міксіны, міксіны памеру шрыфта і гэтак далей.
03. Агульны
Агульны пласт - гэта першы, які фактычна стварае любы CSS. Тут размешчаны стылі вельмі высокага ўзроўню. Гэты пласт рэдка мадыфікуецца і звычайна аднолькавы ў любых праектах, над якімі вы працуеце. Ён утрымлівае такія рэчы, як Normalize.css, глабальныя правілы памеру скрынкі, скіды CSS і гэтак далей. Агульны пласт уздзейнічае на вялікую частку DOM, таму ён з'яўляецца добрым і шырокім у мадэлі "Трохвугольнік" і сустракаецца вельмі рана.
04. Элементы
Гэта голыя, некласіфікаваныя элементы HTML. Як выглядае h1 без заняткаў на ім? Як выглядае знешні выгляд без заняткаў на ім? Пласт "Элементы" прывязваецца толькі да селектараў голых элементаў HTML (ці "тыпу"). Гэта крыху больш відавочна, чым папярэдні пласт, у тым, што мы цяпер гаворым "зрабіць кожны h1 такім вялікім", альбо "зрабіць кожны a пэўным колерам". Гэта ўсё яшчэ вельмі нізкаспецыфічны пласт, але ўплывае крыху менш на DOM і крыху больш упэўнены, таму і знаходзіцца ў трохкутніку.
Шар Elements, як правіла, апошні, у якім мы знаходзім голыя селектары на аснове элементаў, і яго вельмі рэдка дадаюць альбо мяняюць пасля першапачатковай налады. Пасля таго, як мы вызначылі стылі на ўзроўні элементаў, усе дапаўненні і адхіленні павінны быць рэалізаваны з выкарыстаннем класаў.
05. Аб'екты
Карыстальнікі OOCSS будуць знаёмыя з паняццем аб'ектаў. Гэта першы пласт, у якім мы знаходзім селектары на аснове класаў. Яны тычацца стылістыкі некамерцыйных мадэляў дызайну альбо «прадметаў». Аб'екты могуць вар'іравацца ад чаго-небудзь простага, як элемент .wrapper, да сістэм кампаноўкі, да такіх рэчаў, як даччыны постэр OOCSS - Медыя-аб'ект. Гэты пласт уплывае на меншую колькасць DOM, чым на апошні пласт, мае больш высокую спецыфічнасць і крыху больш відавочны тым, што зараз мы арыентуемся на раздзелы DOM з дапамогай класаў.
06. Кампаненты
На пласце Кампаненты мы пачынаем стылізаваць пазнавальныя часткі карыстацкага інтэрфейсу. Мы па-ранейшаму звязваем заняткі тут, таму наша спецыфіка яшчэ не павялічылася. Аднак гэты пласт з'яўляецца больш відавочным, чым апошні, тым, што мы зараз ствараем відавочна распрацаваныя фрагменты DOM.
У гэтым пласце мы не павінны знайсці селектараў з меншай спецыфічнасцю, чым адзін клас. Тут большасць вашай працы адбудзецца пасля першапачатковай налады праекта. Даданне новых кампанентаў і функцый звычайна складае пераважную большасць распрацоўкі.
07. Козыры
Гэты пласт пераўзыходзіць - або «козыры» - усе астатнія і мае сілу перакрыць усё, што было да яго. Гэта неэлегантна і складана і змяшчае ўтыліты і дапаможныя класы, узломы і адмены.
Шмат дэкларацый у гэтым пласце будзе мець! Важнае значэнне (напрыклад .text-center {text-align: center! Important;}). Гэта самы высокі ўзровень спецыфічнасці - ён уключае найбольш відавочныя тыпы правілаў з самай вузкай накіраванасцю. Гэты пласт утварае кропку Трохкутніка.
Такім чынам, замест таго, каб згрупаваць рэчы ў "тыпаграфскія стылі" ці "стылі формы", мы разбіваем іх на групы, заснаваныя на канкрэтнасці, ахопе і відавочнасці. Гэты фармат дазваляе нам пісаць CSS у парадку, які толькі дадае і наследавае тое, што было раней.
Мы марнуем вельмі мала часу, каб адмяніць рэчы, таму што наш каскад і спецыфіка накіраваны ў адзін бок. Мы рэзка памяншаем колькасць сутыкненняў, уцечак і перавызначэнняў.
Удзельнікі
Кожны пласт змяшчае шэраг частковых. Я рэкамендую канвенцыю аб іменаваннях _layer> .partial> .scss (напрыклад: _settings.colors.scss, _elements.headings.scss, _components.tabs.scss).
Гэтыя частковыя кампаненты павінны быць як мага меншымі і дробнымі, прычым кожны з іх змяшчае толькі столькі CSS, колькі яму трэба для выканання сваёй ролі. Такім чынам, _elements.headings.scss будзе ўтрымліваць толькі правілы з h1 па h6 і нічога больш. Калі ў вас ёсць, напрыклад, кампанент загалоўка старонкі, які робіць асноўны загаловак (напрыклад, h1) і падзагаловак (напрыклад, h2) пэўным чынам, вы створыце частковы _components.page-title.scss у пласце "Кампаненты" і звяжаце на класы (напрыклад, .page-title, .page-title-sub), а не на элементы HTML.
Вось як працуе ITCSS: мы не размяшчаем разам усе стылі, звязаныя з загалоўкамі. Замест гэтага мы змяшчаем усе правілы, заснаваныя на элементах, і ўсе правілы на аснове класа. Цяпер мы заказваем праект на аснове карысных паказчыкаў CSS, а не ствараем нязграбную спецыфіку і каскадныя групоўкі, упарадкоўваючы праект тэматычнымі кавалкамі.
Вынік
Калі ўсё гэта збярэцца, гэта можа выглядаць прыблізна так:
@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";
Нават на гэтым малюсенькім прыкладзе вы можаце бачыць, як кожны пласт можа ўтрымліваць любую колькасць частковых частак, і гэтыя частковыя часткі могуць тэарэтычна размяшчацца ў любым парадку @import, які вы хочаце. Адзінае патрабаванне - каб самі пласты заўсёды заставаліся ў гэтай фармацыі.
Мы гарантуем, што кожны пласт змяшчае CSS:
- Падобная спецыфіка: Усе селектары на аснове элементаў, альбо ўсе селектары на аснове класаў, альбо класы ўтыліты, якія нясуць! Важнае значэнне
- Падобная відавочнасць: стылізацыя ўсіх вашых аголеных элементаў HTML альбо стылізацыя кампанентаў карыстацкага інтэрфейсу альбо стылізацыя пэўных дапаможных класаў
- Аналагічны ахоп: Магчымасць уздзейнічаць на ўвесь DOM (напрыклад, * {}), падмноства DOM (напрыклад, {}), раздзел DOM (напрыклад, карусель {}) або пэўны вузел DOM (напрыклад, .clearfix {})
Такі падрабязны падыход дае нам значна больш кіраваную архітэктуру CSS. Цяпер мы ведаем, што ўсё, што мы дадаем, павінна быць дадаткам да ўсяго, што было да гэтага. Мы ведаем, дзе будзе жыць кожны тып правілаў і куды трэба паставіць новыя стылі, і мы ўпэўнены, што ўсе нашы розныя селектары будуць выдатна гуляць побач.
Калі вы хочаце вывучыць ITCSS далей, паглядзіце ўступную гутарку Гары Робертса на DaFED ...
Ненавідзіце працу са старым CSS? Не прапусціце Гары Робертса Стварыць Бангалор размова далей рэфактарынгуе CSS, не губляючы розуму. Браніраваць зараз атрымаць асалоду ад гэтай і іншых размоў вядучых вэб-імёнаў, у тым ліку Джонатана Снука, Стэфані Рыгер і Шыхара Капура.
Гэты артыкул першапачаткова з'явіўся ў нумары 267 ад сеткавы часопіс.
