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

CSS е странно. Можете да научите основите на него за 15 минути. Но може да минат години, преди да измислите добър начин да организирате стиловете си.

Част от това се дължи само на странностите на самия език. Извън полето, CSS е доста ограничен, без променливи, контури или функции. В същото време е доста разрешително, че можете да стилизирате елементи, класове, идентификатори или всяка комбинация от тях.

Хаотичен лист на стила

Както вероятно сте преживявали сами, това често е рецепта за хаос. И докато препроцесори като SASS и LESS добавят много полезни функции, те всъщност не правят много, за да спрат CSS анархията.

Тази организационна работа беше оставена на методологии като BEM, които - макар и полезни - са изцяло незадължителни и не могат да бъдат наложени на ниво език или инструментариум.

Новата вълна на CSS

Бързо напред няколко години и нова вълна от базирани на JavaScript инструменти се опитват да решат тези проблеми в основата си, като променят начина, по който пишете CSS.

Styled Components е една от тези библиотеки и бързо привлече много внимание поради комбинацията си от иновации и познания. Така че, ако използвате React (и ако не го направите, разгледайте моя план за проучване на JavaScript и моето въведение в React), определено си струва да разгледате тази нова CSS алтернатива.

Наскоро го използвах за редизайн на моя личен сайт, а днес исках да споделя няколко неща, които научих в процеса.

Компоненти, стилизирани

Основното, което трябва да разберете за Styled Components, е, че името му трябва да се приема буквално. Вече не стилизирате HTML елементи или компоненти въз основа на техния клас или HTML елемент:

Здравей, света

h1.title {
  размер на шрифта: 1,5ем;
  цвят: лилав;
}

Вместо това вие определяте стилизирани компоненти, които притежават свои собствени капсулирани стилове. След това ги използвате свободно в цялата си кодова база:

импортиране стилизирани от 'styled-компоненти';
const заглавие = стил.h1`
  размер на шрифта: 1,5ем;
  цвят: лилав;
`;
 Здравейте, свят 

Това може да изглежда като незначителна разлика и всъщност и двата синтаксиса са много сходни. Но те са ключова разлика в това, че стиловете вече са част от техния компонент.

С други думи, ние се отърваваме от CSS класовете като посредническа стъпка между компонента и неговите стилове.

Както казва съ-създателят на стилистични компоненти Макс Стойбер:

„Основната идея на стилизираните компоненти е да наложат най-добрите практики чрез премахване на картографирането между стилове и компоненти.“

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

Това ще изглежда контраинтуитивно в началото, тъй като целият смисъл на използването на CSS вместо директно стилизиране на HTML елементи (спомняте ли си тага?) Е да се отделят стилове и маркиране чрез въвеждане на този клас посредник клас.

Но това разединяване създава също много сложност и има аргумент, че в сравнение с CSS, „истински“ език за програмиране като JavaScript е много по-добре оборудван за справяне с тази сложност.

Подпори над класове

В съответствие с тази философия без класове, стилизираните компоненти използват реквизити над класове, когато става въпрос за персонализиране на поведението на компонент. Така че вместо:

Hello World

// ще бъде син
h1.title {
  размер на шрифта: 1,5ем;
  цвят: лилав;
  
  & .Primary {
    цвят: син;
  }
}

Ще напишете:

const заглавие = стил.h1`
  размер на шрифта: 1,5ем;
  цвят: $ {props => props.primary? 'син': 'лилав'};
`;
<Заглавие първично> Здравей свят  // ще бъде син

Както можете да видите, стилизираните компоненти ви позволяват да почистите вашите React компоненти, като изтривате всички детайли за внедряване, свързани с CSS и HTML.

Въпреки това, стилизираните компоненти CSS все още са CSS. Така че такива неща са също напълно валиден (макар и леко неидиоматичен) код:

const заглавие = стил.h1`
  размер на шрифта: 1,5ем;
  цвят: лилав;
  
  & .Primary {
    цвят: син;
  }
`;
 Hello World  // ще бъде син

Това е една функция, която прави стилизираните компоненти много лесни за влизане: когато се съмнявате, винаги можете да се върнете към това, което знаете!

Уговорки

Също така е важно да се спомене, че стилизираните компоненти са все още млад проект и че някои функции все още не се поддържат напълно. Например, ако искате да стилизирате детски компонент от родител, ще трябва да разчитате да използвате CSS класове засега (поне докато не се появят стилизираните компоненти v2).

Все още няма „официален“ начин за предварително представяне на вашия CSS на сървъра, въпреки че това определено е възможно чрез инжектиране на стиловете ръчно.

И фактът, че стилизираните компоненти генерират собствени рандомизирани имена на класове, може да затрудни използването на инструментите за разработка на браузъра ви, за да разберете къде са дефинирани първоначално вашите стилове.

Но това, което е много обнадеждаващо, е, че основният екип на стилизираните компоненти е запознат с всички тези проблеми и работи усилено върху отстраняването им един по един. Версия 2 идва скоро и аз с нетърпение очаквам това!

Научете повече

Моята цел тук е да не обяснявам подробно как работят стилизираните компоненти, а повече, за да ви дам малък поглед, за да можете сами да решите дали си струва да проверите.

Ако успях да ви направя любопитство, ето някои места, където можете да научите повече за стилизираните компоненти:

  • Макс Стойбер наскоро написа статия за причината за стилизираните компоненти за Smashing Magazine.
  • Самото репо за стилизираните компоненти има обширна документация.
  • Тази статия на Джейми Диксън очертава няколко предимства от преминаването към стилизирани компоненти.
  • Ако искате да научите повече за това как библиотеката всъщност се реализира, разгледайте тази статия от Макс.

И ако искате да отидете още по-далеч, можете също да проверите Glamour, различно поемане на CSS с нова вълна!

Време за самостоятелна промоция: търсим сътрудници с отворен код, за да помогнем на Nova, най-лесният начин да създадем пълни пакети React & GraphQL приложения, допълнени с формуляри, зареждане на данни и потребителски акаунти. Все още не използваме стилизирани компоненти, но вие може да сте първият, който ги прилага!