Увод у ИТЦСС за Веб програмере

Постоји неколико одличних метода структурирање ЦСС кода, и сви они раде на различите начине. Најпопуларније су ООЦСС и СМАЦСС, али постоји и мање позната метода ИТЦСС (Инверзни троугао ЦСС) креирао Харри Робертс.

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

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

Шта је ИТЦСС?

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

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

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

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

Ево неких од највећих предности употребе ИТЦСС:

Објекти странице могу се подијелити у властите ЦСС / СЦСС датотеке за реусабилити. Једноставно је копирати / залијепити и проширити сваки објект у друге пројекте.
Дубина специфичности је На вама.
Ево га не постоји структура мапа, и не захтева коришћење алата за претходну обраду.
Можете спојити концепте из других методологија као што су ЦСС модули креирајте сопствени хибридни радни процес.

ИТЦСС систем

Погледајмо како модел Обрнутог троугла ради користећи следећу илустрацију са поста Лубоса Кметка.

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

Свака подсекција троугла може се сматрати засебном датотеком или групом датотека, иако не морате писати код на тај начин. Има више смисла за Сасс / Лесс кориснике због могућности увоза. Замислите сваку пододјељак као методологију раздвајање и организовање ЦСС кода за вишекратну употребу.

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

Подешавања - Препроцесорске променљиве и методе (нема стварног ЦСС излаза)
Алати - Микинс и функције (нема стварног ЦСС излаза)
Општи - ЦСС се ресетује, што може укључивати ресетовање Ерица Меиера, Нормализе.цсс или вашу личну шифру
Елементи - Селектори за појединачне ХТМЛ елементе без класа
Објецтс - Класе за структуру странице обично слиједе ООЦСС методологију
Компоненте - Естетске класе за стилинг било ког и свих елемената странице (често комбиноване са структуром класа објеката)
Трумпс - Најспецифичнији стилови за превазилажење било чега у троуглу

Сваки слој обрнутог троугла може бити прилагођен вашим потребама. Дакле, ако не користите ЦСС претпроцесор, онда вам не требају слојеви Сеттингс или Тоолс.

Требало би да будете слободни да сваку подсекцију интерпретирате како вам одговара. На пример, Јордан Косцхеи објашњава како је комбиновао структуру и естетику заједно у објекте класе, остављајући веома мало у одељку Компоненте..

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

Иако је креатор ИТЦСС-а Харри Робертс био заинтересован да задржи своје методе за интерну употребу, можете пронаћи пример отвореног кода за ИТЦСС у овом ГитХуб репо. Домаћин је ЦСС Визардри налог који је Харри Робертсов лични сајт.

БЕМ + ИТ = БЕМИТ Именовање

Једна од најпопуларнијих ЦСС схема именовања је БЕМ. Ово означава Блоцк-Елемент-Модифиер и прати врло специфичну синтаксу.

Сваки елемент у БЕМ-у описује конвенцију именовања за ЦСС класе:

Блоцкс су класе за појединачне елементе који се могу реплицирати и самостално.
Елементи увек су део блока
Модификатори увек модификујте блок или елемент да мало промени његов изглед (укључивање / искључивање, активно / неактивно, фиксно, статично, осветљавање / неутрално).

БЕМИТ је конвенција о именовању усвојен од стране ИТЦСС, који позајмљује идеје од БЕМ-а док имплементира нове идеје са ИТЦСС.

БЕМ синтакса диктира врло специфична правила. У наставку се налази пример са веб сајта БЕМ-а:

.форм  .форм - тхеме-кмас  .форм - једноставан  .форм__инпут  .форм__субмит  .форм__субмит - онемогућен

Блокови имају имена без одвајања, или имена одвојена једном цртицом или једном доњом цртом. Елементи користе два подцртаја и описују интерне елементе који су у складу са тим блоком. Модификатори раде на исти начин, али користе две цртице за идентификацију.

Харри дубље улази у БЕМИТ у овом блогу. Његов опис је веома концизан и показује да је права природа ИТЦСС-а играти пријатељски са другим ЦСС методологијама.

Харри дефинише простори имена за објекте који се појављују као префикси за свако главно име класе. Они се разбијају као о- фор објецтс, ц- за компоненте, и у- за услужне програме (као што је цлеарфик или центрирање текста).

Ево неких примјера кода који представљају типичне БЕМИТ конвенције именовања.

…

Он такође препоручује коришћење @ суфикс за класе засноване на медијским стиловима. Тако је .о-медиа класа може да се промени у .о-медиа @ лг за велике екране, и .о-медиа @ мд за екране средње величине.

Лично мислим да су додатни суфикси превише замршен за основне веб пројекте. Мислим да би већина девелопера радије користила уобичајене медијске упите и преписивала класе на различитим тачкама прекида. Али не могу да кажем да је било који метод исправан или погрешан, и свако може појединачно да одлучи да ли жели да користи БЕМИТ или не.

Препоручујем да прочитате овај уводни БЕМИТ чланак да бисте сазнали више о томе зашто је ИТЦСС проширена БЕМ и како бисте жељели да именујете ЦСС класе.

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

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

Окончање

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

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

Управљајте великим веб пројектима са новом ЦСС архитектуром ИТЦСС (цреативеблок.цом)
Управљање ЦСС пројектима са ИТЦСС - презентационим слајдовима (спеакердецк.цом)
ЦСС пројекти са ИТЦСС (1 х видео презентација)
ИТЦСС - Занимљив начин организовања великих пројеката (цсс-трицкс.цом)

(Фотографија на насловној страни путем звучника