Архитектура обрнутог троугла: како управљати великим ЦСС пројектима

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

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

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

Представљамо архитектуру Обрнути троугао

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

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

ИТЦСС је врло флексибилан јер вас не приморава да користите било какве специфичне методологије именовања попут СМАЦЦС, ООЦСС или БЕМ.

Принципи

ИТЦСС функционише тако што структурира ваш цео ЦСС пројекат према следећа 3 принципа:

  1. Генерички експлицитно

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

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

    Бирачи најниже специфичности појављују се на почетку вашег пројекта. Специфичност се стално повећава. На овај начин избегавамо сукобе специфичности и замене специфичности коришћењем !important.

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

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

Слојеви троугла

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

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

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

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

Харри Робертс, творац ИТЦСС-а, изложио је седам слојева. Наредио им је следеће:

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

    Ако користите претпроцесор попут СЦСС-а, ово је ваша полазна тачка. У овом слоју дефинишете своје променљиве.

  2. Алати

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

  3. Општи

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

  4. Елементи

    У овај слој стављамо стилове за голе, неразврстане ХТМЛ елементе. Можете, на пример, размислити о подвлачењу сидра на лебдећем положају или величини фонта за различите наслове.

  5. Предмети

    У слоју објекта стилизујемо прве елементе који имају класе. Размислите о својим контејнерима, омотачима или редовима. Такође овде можете дефинисати своју мрежу.

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

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

  7. Адути

    Адутски слој је прљави слој. Чак и након структурирања стајлинга у складу са ИТЦСС принципима, може се догодити да на пример морате да замените !importantнеки стајлинг независних произвођача. Урадите то у овом слоју јер је ово најспецифичнији, локални и најизразитији слој.

Крајњи резултат

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

// [email protected] "globals";@import "branding";
// [email protected] "mixins";
// [email protected] "normalize";
// [email protected] "fonts";@import "form";
// [email protected] "grid";@import "wrappers";
// [email protected] "header";@import "sidebar";@import "carousel";@import "card";
// [email protected] "overrides";

Закључак

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

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

Тражите посао у Амстердаму?

Радим за Ситац као виши фронт-енд програмер и тражимо средње / старије програмере који су се специјализовали за Ангулар, Реацт, Јава или Сцала. Ситац је амбициозна консултантска компанија у Холандији која ради за многе реномиране компаније у банкарском, авио-сектору, владином и малопродајном сектору.

Ако мислите да имате оно што је потребно за рад са најбољим, пошаљите ми е-маил на луук [дот] груијс [ат] ситац [дот] ио и радо ћу вам рећи више.