Cascade meaning in css

Принцип каскада

Один из основных принципов работы CSS. Стили читаются и применяются сверху вниз.

1. Источники правил
2. Область видимости
3. Специфичность
4. Порядок в коде
5. Влияние на каскад 👻
   1. Начальное значение — initial
   2. Заимствование у родителя — inherit
   3. Отмена значения — unset
   4. Сброс значения — revert
   1. Николай Лопин советует
   2. Realetive советует

   Если вы так боитесь каскада, что отказываетесь его изучать, вы не понимаете веба и лучше вам посмотреть в сторону чего-нибудь попроще в другой области кодинга. Спасибо, что прослушали мой доклад для фронтендеров.

   

   Каскад — одно из важнейших понятий в CSS. Само название CSS — Cascading Style Sheets, «каскадные таблицы стилей» явно упоминают это неочевидное определение.

   Точнее, в определении каскада принимает участие не только специфичность, но и в первую очередь источник этих правил и область видимости. Также имеет важное значение порядок в коде (какие свойства были объявлены «позже», те «важнее»).

   Источники правил

   Скопировать ссылку «Источники правил» Скопировано

   1. Стили во время CSS-переходов ( transition );
   2. Браузерные стили с !important ;
   3. Пользовательские стили с !important ;
   4. Авторские (мы с вами пишем именно эти стили) стили с !important ;
   5. Стили во время анимаций ( animation );
   6. Обычные (т. е. без !important ) авторские стили;
   7. Обычные пользовательские стили;
   8. Обычные браузерные стили.

   Иногда браузеры нарушают этот порядок — порой осознанно (например, могут запретить делать слишком мелкий шрифт в полях ввода, как это делал Google Chrome) или по ошибке (до недавнего времени стили при анимации перекрывали остальные стили только в Firefox).

   Область видимости

   Скопировать ссылку «Область видимости» Скопировано

   Со свойствами, описанными через классические CSS-селекторы (классы, теги, id, атрибуты) иначе — чем точнее мы описываем правило для селектора, тем сильнее мы суживаем область видимости (т. е. как бы точнее прицеливаемся), тем самым увеличивая и приоритетность правила. Но это работает до тех пор, пока CSS-правило не содержит «подлого» !important . Именно поэтому их использование считается плохой практикой — они «меняют правила игры». Это правило мгновенно становится приоритетнее, но чем шире область видимости — тем оно важнее 🤯

   Специфичность

   Скопировать ссылку «Специфичность» Скопировано

   Установим цвет текста абзаца в красный:

     p  color: red;>   Цвет текста будет красным — единственное правило описано в теге <style>.  style> p  color: red; > style> p> Цвет текста будет красным — единственное правило описано в теге <style>. p>    Скопировать Скопировано Не удалось скопировать   

   Теперь переопределим цвет текста более специфичным инлайн-правилом:

     p  color: red;>   Цвет текста стал синим — инлайн «перебивает» <style>.  style> p  color: red; > style> p style="color: blue"> Цвет текста стал синим — инлайн «перебивает» <style>. p>    Скопировать Скопировано Не удалось скопировать   

   Повысим специфичность, добавив !important в правила селектора:

     p  color: red !important;>   Цвет текста снова стал красным за счёт !important в <style>.  style> p  color: red !important; > style> p style="color: blue"> Цвет текста снова стал красным за счёт !important в <style>. p>    Скопировать Скопировано Не удалось скопировать   

   Последний «шанс» разработчику повлиять на правило — добавить !important в инлайн-стиль:

     p  color: red !important;>   Цвет текста снова синий — !important инлайн-правила «перебивает» даже !important в <style>.  style> p  color: red !important; > style> p style="color: blue !important"> Цвет текста снова синий — !important инлайн-правила «перебивает» даже !important в <style>. p>    Скопировать Скопировано Не удалось скопировать   

   Инлайн-стили и !important — крайние меры влияния на стилизацию, правильнее описывать стили в селекторах в файлах. Но разные правила можно описать так, что они будут претендовать на одну и ту же сущность (тег и его содержимое). В этом случае на применимость правила будет влиять специфичность, т. е. тип (тег, класс, id, атрибуты и псевдоклассы) и их совокупность и комбинации. Самый простой способ разобраться в этом разнообразии — использовать так называемый калькулятор специфичности. Можно воспользоваться одним из множества онлайн-сервисов:

   Подробнее про специфичность можно прочитать в статье «Специфичность».

   Порядок в коде

   Скопировать ссылку «Порядок в коде» Скопировано

   Тут ещё проще — при равной специфичности правила, написанные ниже по ходу чтения переопределяют написанное выше:

     .color_red  /* Определяем начальное значение */ color: red;> .color_red  /* Переопределяем написанное ранее правило */ color: blue;>  
   Цвет текста — синий! style> .color_red  /* Определяем начальное значение */ color: red; > .color_red  /* Переопределяем написанное ранее правило */ color: blue; > style> p class="color_red">Цвет текста — синий!p>    Скопировать Скопировано Не удалось скопировать   

   Влияние на каскад 👻

   Скопировать ссылку «Влияние на каскад 👻» Скопировано

   Помимо знания как и где написать селектор, можно управлять каскадом с помощью CSS-свойств!

   Начальное значение — initial

   Скопировать ссылку «Начальное значение — initial» Скопировано

   Любое CSS-правило можно сбросить на начальное значение — то, которое было у правила до того как было установлено явно разработчиком. color станет #000 , position — static , display — inline , padding и margin — 0 и так далее.

   Даже если для тега какое-то свойство имеет конкретное значение (например, для по умолчанию браузером ставится display : block ), установка initial выставит именно дефолтное значение без учёта значения для тега (то есть для свойство display : initial вычислится как inline ).

   Заимствование у родителя — inherit

   Скопировать ссылку «Заимствование у родителя — inherit» Скопировано

   Некоторые свойства наследуются от родителя автоматически ( color , font , text — align и другие). Но можно и явно позаимствовать какое-то значение у родителя:

    div class="wrapper"> div class="inner">div> div>    Скопировать Скопировано Не удалось скопировать   

    .wrapper  background-color: #2E9AFF; border: 10px solid #FFFFFF;> .inner  background-color: #F498AD; border: inherit;> .wrapper  background-color: #2E9AFF; border: 10px solid #FFFFFF; > .inner  background-color: #F498AD; border: inherit; >    Скопировать Скопировано Не удалось скопировать   

   Отмена значения — unset

   Скопировать ссылку «Отмена значения — unset» Скопировано

   По своему поведению unset чем-то похож на initial + inherit — если это свойство ненаследуемое от родителя — оно сбросится до начального значения, наследуемое — получит значение родителя.

   Сброс значения — revert

   Скопировать ссылку «Сброс значения — revert» Скопировано

   Это менее строгий режим сброса — он отменяет все установленные разработчиком значения для данного свойства до значения, которое считается браузером «значением по умолчанию».

   Подсказки

   Скопировать ссылку «Подсказки» Скопировано

   💡 В CSS есть такое волшебное свойство — all — это своеобразный шорткат (сокращённый формат записи), который внутри себя содержит все-все CSS-свойства. В сочетании с initial , inherit , unset или revert это позволяет повлиять на каскад в одну строчку.

   Все наследуемые свойства .widget и вложенных элементов будут сброшены:

    .widget  all: revert;> .widget  all: revert; >    Скопировать Скопировано Не удалось скопировать   

   На практике

   Скопировать ссылку «На практике» Скопировано

   Николай Лопин советует

   Скопировать ссылку «Николай Лопин советует» Скопировано

   🛠 Если вы знакомы с JavaScript, то каскад можно представить как создание объекта через спред-синтаксис на основе приоритета стилей:

    const styles =  . inheritedStyles, . tagStyles, . classStyles, . idStyles, . inlineStyles, . importantStyles, . transitionStyles> const styles =  . inheritedStyles, . tagStyles, . classStyles, . idStyles, . inlineStyles, . importantStyles, . transitionStyles >    Скопировать Скопировано Не удалось скопировать   

   Realetive советует

   Скопировать ссылку «Realetive советует» Скопировано

   🛠 Понимание каскада — один из ключевых моментов в понимании работы CSS. С опытом вы научитесь так эффективно писать селекторы и группировать стили, что сам уровень каскада будет минимальным — это ускоряет «чтение» кода и упрощает поддержку. Ну и в идеале — исключить необходимость использования !important .

   Источник

   The cascade

   Sometimes two or more competing CSS rules could apply to an element. In this module find out how the browser chooses which to use, and how to control this selection.

   

   

   CSS stands for Cascading Stylesheets. The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element. It’s the reason that the text of the button styled with the following CSS will be blue.

   button  
   color: red;
   >
   
   button  
   color: blue;
   >

   If you have an !important rule type in the CSS you have authored and the user has an !important rule type in their custom CSS, whose CSS wins?

   Test your knowledge of cascade origins, consider the following style rules from various origins:

   User-agent style

   h1  margin-block-start: 0.83em; >

   Bootstrap

   h1  margin-block-start: 20px; >

   Page Author styles

   h1  margin-block-start: 2ch; >
   
   @media (max-width: 480px)  
   h1  margin-block-start: 1ch; >
   >

   User custom style

   h1  margin-block-start: 2rem !important; >

   Then, given the following HTML:

   What is the final margin-block-start of the h1 ?

   Bootstrap is part of the authored origin, which loses to the important local user style.

   The user agent style origin loses to the important local user style.

   This !important user custom style has the most specific origin.

   This author style is part of the authored origin, which loses to the important local user style.

   This author style is part of the authored origin, which loses to the important local user style.

   Importance #

   Not all CSS rules are calculated the same as each other, or given the same specificity as each other.

   The order of importance, from least important, to most important is as follows:

   1. normal rule type, such as font-size , background or color
   2. animation rule type
   3. !important rule type (following the same order as origin)
   4. transition rule type

   Active animation and transition rule types have higher importance than normal rules. In the case of transitions higher importance than !important rule types. This is because when an animation or transition becomes active, its expected behaviour is to change visual state.

   Using DevTools to find out why some CSS is not applying #

   Browser DevTools will typically show all CSS that could match an element, with those which are not being used crossed out.

   

   If the CSS you expected to apply doesn’t appear at all, then it didn’t match the element. In that case you need to look elsewhere, perhaps for a typo in a class or element name or some invalid CSS.

   The Cascade can be used for.

   Resolving conflicts when multiple styles apply to an element. Ensuring there’s only one style value for each property at draw time. Scoring and weighting style rules. Sorting and filtering style attributes.

   This is one of its primary goals, conflict resolution.

   The text can only be one color, and The Cascade is a way of determining which it should be.

   Scoring and weighting are part of the sorting phase of The Cascade.

   Sorting and filtering are phases of The Cascade to help understand aspects of conflict resolution.

   Resources #

   Next and previous lessons

   Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.

   Источник

   Читайте также:  Hierarchical clustering in python