Специфика CSS объясняется безнадежными покупками новой одежды

1656676931 speczifika css obyasnyaetsya beznadezhnymi pokupkami novoj odezhdy

Кевин Кононенко

1*Cmd1yXcbw-hv3lb1AEenMA

Если вы когда-нибудь заходили в универмаг или в другой магазин одежды, то можете понять, как селекторы CSS применяют свои стили.

Если вы новичок в CSS, вы, вероятно, уже видели много сценариев Конфликт правил стиля CSS. Вы думаете, что только что добавили новый стиль к элементу, но после многократного обновления браузера… вы понимаете, что стиль по какой-то причине не применяется.

Вот пример. Скажем, у вас есть общее правило, что все тэги абзаца должны иметь высоту строки 140%, как это.

p{   line-height:140%; }

Но вы также хотите создать a subtitle класс, имеющий высоту строки 120%, обычно применяемый к элементам абзаца.

.subtitle{   line-height:120%; }

Итак, какой из них будет применяться, если вы назначите его таким образом?

<p class="subtitle"> This is a subtitle</p>

Ответ таков сubtitle стиль класса, но я хочу найти лучший способ объяснить правила, стоящие за этой логикой. Вы же не хотите открывать Инспектор всякий раз, когда не уверены, какой стиль более конкретный.

Вот сценарий, который поможет: представьте, что вы продавец в универмаге или в другом магазине одежды. Вам платят в зависимости от того, сколько единиц одежды вы продаете в течение дня, поэтому вам нужно уделять время лучшим клиентам, если вы хотите заработать больше денег.

0*72O7r9E5Nvxkaglc

Клиенты, которые, скорее всего, совершат покупку, получат приоритет. Клиенты, которые приходят с конкретным представлением о том, что они хотят, будут с большей вероятностью покупать.

CSS работает схожим образом. Это предпочтет наиболее конкретные стили, которые заменят менее специфические стили. Самые распространенные способы добавить стиль:

  • Уровень элемента (p тег)
  • Уровень класса (.subtitle)
  • ID
  • Встроенный стиль

Вот как определить, какие из селекторов выше наиболее конкретны. В любом случае покупатель ищет сшитый костюм, и вы должны продать как можно больше одежды.

Селекторы элементов — иметь только туманное представление

Вы когда-нибудь заходили в универмаг только с невнятным мнением, например «Мне нужен костюм для события на следующей неделе»?

По личному опыту я могу вам сказать, что это отличный способ застрять в магазине часами, примеряя случайные костюмы. В любом случае, таким клиентам понадобится больше времени, чтобы найти то, что им нравится. Им нужно будет поговорить с несколькими людьми и примерить несколько костюмов. Их мысленный образ того, чего они хотят выглядит так:

0*medgGe7inXZjhhrj

Да, они понятия не имеют, чего хотят. Им еще нужно выбрать стиль, определить свой ценовой диапазон, а затем попросить вас измерить их, чтобы вы могли адаптировать их.

Это самый конкретный способ поиска костюма, и он похож на стиль для элемента общего типа. Вот так, а div с черным фоном:

div{   background-color:black; }

Селекторы классов — по крайней мере, вы знаете бренд…

Ладно, следующим уровнем над общим типом одежды является бренд. Итак, вы можете сказать, что вам нравится одежда Ralph Lauren, поэтому вы начнете с части магазина.

0*JAEsVtLxAOqcfOjv

(Примечание: Это не дисплей Ralph Lauren на фото, это единственное фото, которое я мог получить)

Это лучше чем искать все костюмы в магазине, но это все равно означает, что клиенту понадобится немного времени, прежде чем он захочет купить. Вот как выглядит CSS:

.ralphLauren{ }

Это более конкретно, чем a div, что мы использовали в примере выше. Но эта декларация CSS может стать более конкретной. Поскольку мы знаем, что клиент ищет костюм Ralph Lauren, давайте объединим элемент и класс. В конце концов, Ralph Lauren может быть любым типом одежды, от сапог до брюк и рубашек.

div.ralphLauren{ }
0*hSinWUd9x-BdU2NJ

Этот стиль заменит:

  1. Все общее div стилизация
  2. ralphLauren стиль класса, когда класс применяется к a div.

Это потому, что он более конкретным, поскольку включает как элемент, так и класс. Итак, если мы имеем следующее:

.ralphLauren{   background-color: black; } 
div.ralphLauren{   background-color:grey; }

Вторая декларация более конкретна, поэтому она будет иметь приоритет для всех divs с классом ralphLauren.

ID Selector – они знают точную модель, которую хотят

Селектор идентификатора почти настолько конкретн, насколько это возможно. Это похоже на человека, который сделал столько покупок в Интернете, сколько возможно и пришел в магазин с распечатанным изображением костюма, который он хочет.

0*IviYwcuWUEVHewYL

Да, люди все еще делают это. Хорошо, возможно, они имеют это как сохраненную ссылку, чтобы они могли открыть его на своем телефоне и показать вам продавцу.

Ладно, я могу иногда так поступать.

В любом случае, если клиент уже знает конкретную модель костюма, которую он/она хочет, вам нужно лишь измерить его размеры, и тогда он будет готов к покупке.

Селектор ID предназначен для использования только для одного элемента на всей странице, что гораздо более конкретно, чем селекторы на уровне класса или элемента. Вот пример модели костюма RL123 какие клиент выбрал еще до встречи с вами:

#rl123{   background-color:navy; }

Если цвет костюмов Ralph Navy по умолчанию сер, это означает, что конкретная модель на самом деле имеет темно-синий цвет.

Краткое примечание о масштабируемости: вы это имеете нет нужны HTML-элементы с пользовательскими идентификаторами и стилями по всей странице. Это станет огромной болью для поддержки. Чтобы быстро создать универсальные стили, вам все еще нужно использовать стили на уровне элементов и классов. Но вы должны знать, как отменить эти правила в отдельных случаях.

Встроенный стиль – клиент знает свою модель и размеры

Это наиболее конкретный способ сделать это, а также менее масштабируемый. Вы можете использовать встроенный стиль непосредственно в элементе HTML, чтобы заменить стили, написанные в CSS.

Это что-то типа клиента, который приходит в магазин и не только знает костюм, который хочет, но и знает его размеры. У них есть очень конкретное представление о том, чего они хотят, и они готовы заказать костюм и покинуть магазин как можно скорее. Это отлично для продавца! Следовательно, он получает самый высокий приоритет.

0*DxVV0_pwLyFp4DwA

Вот как это смотрится с точки зрения HTML.

Мы назначим width и height атрибуты к div с классом ralphLauren:

<div class="ralphLauren" style="height:100px; width:100px"></div>

Если бы мы назначили ширину и высоту в CSS, как в вышеприведенных примерах, это было бы перезаписано здесь.

Wild Card — !важно

Существует еще один способ изменить приоритет правил стиля по CSS. Но я не собираюсь об этом говорить, потому что его следует использовать только в ситуациях, когда нет другой альтернативы. Это нарушает все правила, которые мы только что создали…

Вы можете прочитать больше о !important здесь.

Окончательное резюме

Вот порядок специфики для разных способов нанесения стайлинга:

0*0KoWiUMj7yRS4Uln

Получите больше визуализированных пособий по программированию

Вам понравился этот урок? Похлопайте по нему, чтобы другие могли его узнать.

Или подпишитесь на мои последние учебники здесь:

Добавить комментарий

Ваш адрес email не будет опубликован.