Тази година имах няколко презентации за SC5 Style Guide. където аз споделих опита от използването на средства по проекти на един от нашите клиенти - мобилния оператор Elisa. Като се има предвид, че Elisa - огромна компания, с маса от сайтове, на които искате да сте постоянни и стил, не е изненадващо, че SC5 Style Guide като инструмент за да бъде много полезно там. Но какво да кажем за малки проекти? си струва за тях да направят Style водачи ли е? Аз не знам отговора и иска да експериментира. Както експериментален сайт, зае своето блог.
Живо ръководство Style моя блог изглежда така: varya.me/styleguide. Можете да видите целия интерфейс е разделен на блокове, всеки от които включва отделен компонент. Аз все още не погледна към интерфейса на блога си по този начин, и това ме кара да се преразгледа дори CSS-архитектура на проекта. Но нека всичко в ред.
Създаване SC5 Style Guide
Всичко започва с инсталационния пакет
След това аз бях в състояние да генерира уеб сайт Style гайда. Вие ще трябва няколко Таско глътка.
Аз трябваше да се върнем назад малко от конфигурацията, която е на разположение в документацията, за да се решат проблемите си. Аз ще пиша за това по-подробно.
Използване на appRoot
My Style ръководство не е в основната директория на домейна, както и в styleguide папка, наречена. Това трябва да се докладва инструмент за генериране на тяхното прилагане, за да се използва правилната препратка:
Но в действителност, се нуждаят от повече един трик. Моите компоненти са написани на I-bem.js и автоматично инициализира с domReady. Това е точно това, което се нуждаете за един блог, защото статичните страници и цялата HTML-маркирането се зарежда веднага. Но на сайта Style Гайда - СПА (прилагане на една страница), и там той не работеше. Компонентите са изготвени на staylgayda страници "в движение", и е очевидно, че това се случва по-късно domReady. Тоест, те не се инициализира автоматично. За щастие, можете да използвате styleguide събитие: onRendered на прозореца. което създава SC5 Style Guide когато pereresovyvaetsya компонент. Направих компонента инициализация на това събитие, което е, веднага след като те се появяват на страницата. Тази инициализация е необходима само на сайта Style гайда, така че кодът не е включена в общото събрание и се свързва с Style Хайд като допълнителен файл.
Стил за употреба като статична страница
За развитието на режима в SC5 Style Guide работи на сървъра, който решава по целия път до главната директория, от която се разпространява sgenenirovanny SPA-сайт. Ако искате да използвате резултата в сървъра ви, по маршрут, което трябва да се грижи за себе си. Но в моя случай, мястото се намира на сайта GitHub, статичен хостинг и няма маршрутизация не е предвидено. Въпреки това, в този случай има disableHtml5Mode настройка: вярно. Тя казва на генератора, че молбата трябва да добрите стари връзки с #. Така че всички творби.
документиране компонент
Дори и преди въвеждането на Style гайда, имам всички СГО е написана от BEM, че е с компонентен подход. За Style Хайд Трябваше само да създаде структурата и компонентите на документи блокове с помощта на KSS.
структуриране на кода
Оказа се, че структурата на файла, който предлага BEM, не е най-доброто решение за развитието на живо staylgayda. На файловата система, всички компоненти са дълги плоски списък:
Това означава, че малките атомни компоненти не се различават от блоковете на структурата на страницата (като например горния или долния колонтитул), на пресечки от страничната лента или CSS за трети страни джаджи. Разбира се, плоска структура е по-удобен за строители, но от гледна точка на развитието на нужда някаква каталогизиране.
За да направите това, което направих overview.css файл. в които няма активен CSS, но това ми помага да се организират на блоковете. Аз съм бил там 5 секции, както и всеки, свързани компонента:
Аз се игнорира своите списъци на единици, тъй като те не влияят на кода. Но секции описват остане.
Описание на блоковете
Компонентите на документацията поотделно за всеки prorisovanny модификатор: varya.me/styleguide/#/section/1.5.1
За slozhnosostavnyh компоненти, които се използват в друг, аз използвах ключов маркер
С тази документация в приемлив размер на кода, но онлайн всичко се разкрива в своята цялост: varya.me/styleguide/#/section/4.1
Стил-Guide задвижване развитие
Ако изпишете търсене "лого" в резултат Style Haidee в областта, ще видите всички компоненти, които използват логото! Търсихме целия код. Също така, можете да търсите за компоненти, които се използват за маркиране . Или има шрифт, чиито стилове.
Лично аз особено харесва, че можете да търсите и маркиране. Това може да се използва по време на рефакториране. Например, въвеждане на промяната, не мога да намеря всички блокове да го използвате и да видим дали те са счупени.
Въпреки, че в действителност това е само една малка допълнение към основните предимства на използването на Style гайда. По мое мнение, основната му предимство - демонстрация на грешки при набора.
В CSS, моя блог, дори преди въвеждането на Style гайда използва компонент подход. Като се има предвид опита ми BEM, бях 100% сигурен, че компонентите са написани добре. Но дори и като компонент за развитие на все още се наблюдава от гледна точка на страницата на. Преди блоковете са били вградени в блога, аз ги отделна статична страница направена. Това е отделен, почти страница, те никога не са съществували.
Блоковете са предназначени да бъдат независими, аз написах кода, опитвайки се да постигне това. Но се поставят заедно на една и съща страница, те никога не са били независими.
След SC5 Style Guide магически ги донесе лично, мога да видя, че логото на блок е правилно подравнен. Но защо е това? Очевидно е, че това е моя грешка, направена, когато набирате logitip във вътрешността на Header.
Същото се случи и с езика на превключвател. Той също така подравнени вдясно.
Разбира се, тези открития означават бързо рефакториране :-)
И в началото трябва да се каже, че експериментът приключи. Има и други отворени за нови публикации.
Свързани статии