CSS специфичност

Интро

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

Не е едноставно, но е важно. Тоа е нешто што секој може да го разбере со образование и пракса.

CSS Специфичноста не е проблем специфичен за Client-First. Тоа не е проблем што го создава Client-First. Така функционира CSS.

Принципот на специфичност најрелевантен за системот Client-First е: Класите додадени на CSS стилскиот лист ќе „победат“ кога ќе има конфликти на вредноста на имотот на CSS.

Ќе научиме како функционира преку пример во Client-First Style системот. Има вообичаен проблем со работниот тек кога се додаваат стилови Client-First на проект.

Ако ги копираме-залепиме Client-First маргините и ги пополнуваме класите на друг проект по погрешен редослед, класите нема да работат како што се очекува.

Client-First пример за растојание

Кога Client-First системот за растојание ќе НЕ работи?

Ние го копираме системот за растојание од нашиот официјален стартер проект во друг проект со следење на следниве чекори:

1. Inside the start project, go to the Style Guide page and open the Navigator.Во рамките на почетниот проект, одете на Style Guide страната и отворете го навигаторот.
2. Копирајте ја fs-styleguide_spacing-directions 'папката' и вметнете ја во новиот проект.
3. Потоа, копирајте ја fs-styleguide_spacing-sizes 'папката' и вметнете ја во новиот проект.

Класите за маргина Client-First треба да бидат подготвени за употреба откако ќе се копираат сите класи во проектот. Сепак, системот за растојание нема да работи со овој редослед на операции.

Сè работи како што се очекува кога ќе додадеме нов Div Block на страната и ќе примениме margin-bottom на неа.

Ако додадеме margin-large на неа, очекуваме да се примени голема маргина на горната страна.

Сепак, голема маргина се додава на сите страни. Ова не е намерата.

‍Не можеме да го користиме вака системот за растојание од Client-First.

Зошто овој пример не функционира? CSS специфичност.

Класите за големина се додадени во проектот по класите за насока. Поради ова, големите класи се поспецифични за специфичноста на проектот.

margin-top беше додаден на проектот Webflow прво, а потоа margin-large беше додаден на проектот Webflow.

Кога создаваме стилови во Webflow, стиловите се генерираат на CSS листот со стилови по редоследот што се креирани во проектот Webflow.

Еден од принципите на CSS Специфичноста е "Редот на создавање".

Правилата на CSS Специфичност сметаат дека класата создадена пониско (подоцна) во CSS стилови е поспецифична за вебсајтот од стиловите создадени повисоко (порано) во CSS стилови.

Класата создадена подоцна во нашиот проект Webflow (margin-large) има поголема тежина од класата создадена порано во нашиот проект Webflow (margin-top).

Ако овие две класи имаат исто CSS својство применено на нив (margin), класата со поголема тежина ќе "победи", а декларацијата за својство на стил на таа класа ќе се примени на елементот.

margin-large има поголема тежина од margin-top, па ќе ги презапише стиловите на margin-top. margin-large има margin применета на сите страни. Тие стилови имаат приоритет и ги презапишуваат 0rem маргините на нашата margin-top класа.

Ни треба margin-top класата за да ја презапише margin-large на сите страни. Мора да го смениме редоследот на создавањето за да функционира системот за растојание.

Кога ќе работи системот за растојание?

1. Client-First стартер проектот кој може да се клонира (Препорачано)

Кога го користиме официјалниот стартер проект Client-First, класите за растојание ќе се креираат по правилен редослед. Не мора да се грижиме за примерот погоре што се појавува во нашиот проект.

2. Finsweet Extension > Client-First

Користејќи го Finsweet Extension, можеме да го копираме целосниот систем за растојание Client-First — без проблеми со CSS специфичноста. margin-[size] класите автоматски ќе бидат додадени на проектот прво, а класите за margin-[direction] автоматски ќе бидат додадени на проектот второ.

3. Овој работен тек

Ние го копираме-залепиме системот за растојание од нашиот официјален Client-First стартер проект во друг проект следејќи ги следните чекори:

1. Во стартер проектот, одете на Style Guide страната и отворете го навигаторот.
2. Во Навигаторот, отворете fs-styleguide_classes >fs-styleguide_spacing-all‍
3. Копирајте ја fs-styleguide_spacing-sizes 'папката' и залепете ја во новиот проект.
4. Потоа, копирајте ја fs-styleguide_spacing-directions 'папката' и залепете ја во новиот проект.

Сега, кога ќе додадеме нов div block на страната, применуваме margin-bottom на неа, и потоа применуваме apply margin-large врз неа, функционира.

margin-bottom ќе се примени само на горната страна на div блокот.

Пример за CSS Специфичност 'display: none'

Запомнете дека CSS Специфичноста не е специфична за Client-First или нашиот систем за растојание. Ќе поминеме низ пример кој нема никаква врска со растојанието. Проблемите со CSS Специфичноста може да се појават на секој Webflow проект, без оглед на стратегијата за изградба.

Прво ќе додадеме display-none класа, која ќе го постави display својството на none. Имаме намера да ја користиме оваа класа во текот на нашиот проект како помошна класа за да аплицираме каде било во нашиот проект.

ледно, ајде да создадеме елемент background-red, со неговиот display поставен на block и неговата background поставена на red.

Кога ќе додадеме display-none на background-red како комбинирана класа, нашата прва мисла е дека background-red треба да биде поставена на display: none.

Поради CSS Специфичноста, ова не се случува. display својството на display-none се игнорира.

Бидејќи background-red е создадена по display-none, таа е поспецифична на листата со стилови и за проектот

Својството за приказ(display) на background-red има поголема тежина од својството за приказ display-none, што ја прави background-red победничка.

Поправање со Finsweet Extension

CSS Styles Reorder Candy во Finsweet Extension ќе ни овозможи да ги преуредиме класите на листот со стилови .css на нашиот проект.

Горенаведениот display: none случај на употреба е одличен пример зошто ја додадовме оваа функционалност. Можеме брзо и сигурно да го решиме проблемот со Finsweet Extension.

1. Отворете ја наставката, изберете "Candies" и потоа "CSS Styles Reorder".
2. Поместете ја background-red класата пред display-none во листата со класи и зачувајте ја.

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

Сега, background-red е прва, и display-none е втора на листата со стилови. Сега можеме да ја користиме нашата display-none класа како што намерававме.

Кога display-none ќе биде последната класа на листата за стилови, ќе биде навистина глобална по природа. Може да го презапише display својството на која било класа во проектот.

Видео објаснување на сесијата во живо

Подолу е видеото од епизода на F'in Live која објаснува многу од содржината на оваа страна. Целосната напишана страна е подлабоко објаснување.

Заклучок и следни чекори

Горенаведените информации се мал дел од CSS Специфичноста. Тоа е сложен концепт со листа на многу дефинирани правила. Горе учиме еден од тие правила — редоследот на класите на .css листата со стилови.

Разбирањето на секој дел од CSS Специфичноста не е потребно за да се биде професионалец во Webflow. Сепак, кога ќе ги разбереме напредните концепти како овој, го носиме нашето знаење за Webflow на следно ниво.

Разбирањето на CSS Специфичноста ни дава подлабока поврзаност со CSS во нашиот проект. Колку повеќе ја разбираме, толку е подлабока врската.

Има многу содржини за CSS специфичност на интернет. Започнете со страната за документација на W3 Schools CSS Specificity за да дознаете повеќе.

‍