5 минута увода у стилизоване компоненте

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

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

Цхаотиц Стиле Схеетс

Као што сте вероватно и сами искусили, ово је често рецепт за хаос. И док претпроцесори попут САСС и ЛЕСС додају мноштво корисних функција, они не чине много да зауставе ЦСС анархију.

Тај организациони посао препуштен је методологијама попут БЕМ-а, које су - иако корисне - потпуно необавезне и не могу се применити на нивоу језика или алата.

Нови талас ЦСС-а

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

Стилед Цомпонентс је једна од ових библиотека и брзо је привукла велику пажњу због комбинације иновација и познавања. Дакле, ако користите Реацт (а ако не, погледајте мој ЈаваСцрипт студијски план и мој увод у Реацт), свакако је вредно погледати ову нову ЦСС алтернативу.

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

Компоненте, стилски

Главна ствар коју треба да схватите о Стилским компонентама је да њено име треба схватити прилично буквално. Више нисте стилске ХТМЛ елементе или компоненте засноване на њиховој класи или ХТМЛ елементу:

<х1 цлассНаме = "титле"> Здраво, свет 
х1.титле {
  фонт-сизе: 1.5ем;
  боја: љубичаста;
}

Уместо тога, дефинишете сложене компоненте које поседују сопствене инкапсулиране стилове. Затим их слободно користите широм своје кодне базе:

увоз стилова из 'стилед-цомпонентс';
цонст Наслов = стилед.х1`
  фонт-сизе: 1.5ем;
  боја: љубичаста;
`;
<Титле> Здраво, свет 

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

Другим речима, решимо се ЦСС класе као посредника корак између компоненте и њених стилова.

Као што је аутор креатора Мак Стоибер рекао:

„Основна идеја стилских компоненти је примењивање најбољих пракси уклањањем мапирања између стилова и компоненти.“

Сложеност претовара

У почетку ће ово изгледати контраинтуитивно, јер је смисао употребе ЦСС-а уместо да директно обликује ХТМЛ елементе (сећате се <фонт> ознаке?) У уклањању стилова и маркирања увођењем овог слоја посредника класе.

Али та раздвојеност такође ствара велику сложеност и мора да се аргументује да је у поређењу са ЦСС-ом, „прави“ програмски језик као што је ЈаваСцрипт много боље опремљен да поднесе ту комплексност.

Реквизити изнад класе

У складу с овом филозофијом без класе, стилед-компоненте користе реквизите над класама када је у питању прилагођавање понашања компоненте. Па уместо:

<х1 цлассНаме = "титле примарни"> Хелло Ворлд  // ће бити плаве боје
х1.титле {
  фонт-сизе: 1.5ем;
  боја: љубичаста;
  
  &.Примарна{
    боја: плава;
  }
}

Написали бисте:

цонст Наслов = стилед.х1`
  фонт-сизе: 1.5ем;
  боја: $ {пропс => пропс.примари? 'блуе': 'пурпурно'};
`;
<Наслов примарне> Хелло Ворлд  // ће бити плаве боје

Као што видите, стилизоване компоненте омогућавају вам да очистите своје Реацт компоненте тако што нећете сачувати све детаље имплементације у вези са ЦСС-ом и ХТМЛ-ом.

Речено је да ЦСС са стилским компонентама и даље представља ЦСС. Такве ствари су такође потпуно валидан (мада помало не-идиоматичан) код:

цонст Наслов = стилед.х1`
  фонт-сизе: 1.5ем;
  боја: љубичаста;
  
  &.Примарна{
    боја: плава;
  }
`;
<Титле цлассНаме = "примарна"> Хелло Ворлд  // ће бити плаве боје

Ово је једна карактеристика која чини стилед-компоненте врло једноставним за улазак: кад сумњате, увек се можете вратити на оно што знате!

Цавеатс

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

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

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

Али оно што је веома охрабрујуће је то што је основни тим који има стилске компоненте свестан свих ових проблема и тешко ради на поправљању једног по једног. Верзија 2 стиже ускоро и јако се радујем!

Сазнајте више

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

Ако сам успео да вас учиним знатижељнима, ево неких места на којима можете сазнати више о стилова-компонентама:

  • Мак Стоибер недавно је написао чланак о разлогу стилских компоненти за Смасхинг Магазине.
  • Сам репо за стилизоване компоненте има опсежну документацију.
  • Овај чланак Јамие Дикон-а описује неколико предности преласка на стилизоване компоненте.
  • Ако желите да сазнате више о томе како се библиотека заправо имплементира, погледајте овај чланак од стране Мак-а.

А ако желите да идете још даље, можете такође да погледате Гламоур, другачији став о новоталасном ЦСС-у!

Вријеме самопромоције: тражимо ауторе са отвореним кодом који би помогли Новој, најлакши начин за стварање цјеловитих апликација Реацт & ГрапхКЛ заједно са обрасцима, учитавањем података и корисничким рачунима. Још не користимо стилизоване компоненте, али ви бисте могли бити први који ће их имплементирати!