When using !important is the right choice

CSS по стандартам

  • !important
  • @charset
  • @font-face
  • @import
  • @keyframes
  • @media
  • CSS свойства
    • по алфавиту
    • по категориям
    • все
    • CSS1
    • CSS2
    • CSS3
    • animation
    • animation-delay
    • animation-direction
    • animation-duration
    • animation-iteration-count
    • animation-name
    • animation-play-state
    • animation-timing-function
    • appearance
    • azimuth
    • backface-visibility
    • background
    • background-attachment
    • background-clip
    • background-color
    • background-image
    • background-origin
    • background-position
    • background-repeat
    • background-size
    • border
    • border-bottom
    • border-bottom-color
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-bottom-style
    • border-bottom-width
    • border-collapse
    • border-color
    • border-image
    • border-image-outset
    • border-image-repeat
    • border-image-slice
    • border-image-source
    • border-image-width
    • border-left
    • border-left-color
    • border-left-style
    • border-left-width
    • border-radius
    • border-right
    • border-right-color
    • border-right-style
    • border-right-width
    • border-spacing
    • border-style
    • border-top
    • border-top-color
    • border-top-left-radius
    • border-top-right-radius
    • border-top-style
    • border-top-width
    • border-width
    • bottom
    • box-shadow
    • box-sizing
    • break-after
    • break-before
    • break-inside
    • caption-side
    • clear
    • clip
    • color
    • column-count
    • column-gap
    • column-rule
    • column-rule-color
    • column-rule-style
    • column-rule-width
    • column-span
    • column-width
    • columns
    • content
    • counter-increment
    • counter-reset
    • cue
    • cue-after
    • cue-before
    • cursor
    • direction
    • display
    • elevation
    • empty-cells
    • float
    • font
    • font-family
    • font-size
    • font-size-adjust
    • font-stretch
    • font-style
    • font-variant
    • font-weight
    • height
    • left
    • letter-spacing
    • line-height
    • list-style
    • list-style-image
    • list-style-position
    • list-style-type
    • margin
    • margin-bottom
    • margin-left
    • margin-right
    • margin-top
    • marquee-direction
    • marquee-play-count
    • marquee-speed
    • marquee-style
    • max-height
    • max-width
    • min-height
    • min-width
    • nav-down
    • nav-index
    • nav-left
    • nav-right
    • nav-up
    • opacity
    • orphans
    • outline
    • outline-color
    • outline-offset
    • outline-style
    • outline-width
    • overflow
    • overflow-x
    • overflow-y
    • padding
    • padding-bottom
    • padding-left
    • padding-right
    • padding-top
    • page-break-after
    • page-break-before
    • page-break-inside
    • pause
    • pause-after
    • pause-before
    • pitch
    • pitch-range
    • play-during
    • position
    • quotes
    • resize
    • richness
    • right
    • speak
    • speak-header
    • speak-numeral
    • speak-punctuation
    • speech-rate
    • src
    • stress
    • table-layout
    • text-align
    • text-decoration
    • text-indent
    • text-overflow
    • text-shadow
    • text-transform
    • top
    • transition
    • transition-delay
    • transition-duration
    • transition-property
    • transition-timing-function
    • unicode-bidi
    • unicode-range
    • vertical-align
    • visibility
    • voice-family
    • volume
    • white-space
    • widows
    • width
    • word-spacing
    • word-wrap
    • z-index
  • Комментарии в CSS
  • Псевдоклассы
    • :active
    • :checked
    • :default
    • :disabled
    • :empty
    • :enabled
    • :first-child
    • :first-of-type
    • :focus
    • :hover
    • :in-range
    • :invalid
    • :lang
    • :last-child
    • :last-of-type
    • :link
    • :not
    • :nth-child
    • :nth-last-child
    • :nth-last-of-type
    • :nth-of-type
    • :only-child
    • :only-of-type
    • :optional
    • :out-of-range
    • :read-only
    • :read-write
    • :required
    • :root
    • :target
    • :valid
    • :visited
  • Псевдоэлементы
    • :after
    • :before
    • :first-letter
    • :first-line

Navigation menu

Navigation

  • Main Page
  • Community portal
  • Preferences
  • Requested entries
  • Recent changes
  • Random entry
  • Help
  • Glossary
  • Donations
  • Contact us

In other languages

  • Afrikaans
  • العربية
  • Azərbaycanca
  • Català
  • Čeština
  • Cymraeg
  • Dansk
  • Deutsch
  • Eesti
  • Ελληνικά
  • Español
  • Esperanto
  • Euskara
  • فارسی
  • Français
  • 한국어
  • Հայերեն
  • हिन्दी
  • Ido
  • Bahasa Indonesia
  • Interlingue
  • IsiZulu
  • Íslenska
  • Italiano
  • ಕನ್ನಡ
  • Қазақша
  • Kurdî
  • ລາວ
  • Latviešu
  • Lietuvių
  • Limburgs
  • Magyar
  • Malagasy
  • മലയാളം
  • မြန်မာဘာသာ
  • Nederlands
  • 日本語
  • Norsk
  • Occitan
  • ភាសាខ្មែរ
  • Polski
  • Português
  • Română
  • Русский
  • Simple English
  • Slovenčina
  • Српски / srpski
  • Suomi
  • Svenska
  • தமிழ்
  • తెలుగు
  • ไทย
  • ᏣᎳᎩ
  • Türkçe
  • اردو
  • Tiếng Việt
  • 中文

Examples of important in a Sentence


Diet and exercise are important for health. In his editorial, he made several important points. Scientists have made an important discovery. Doing her job well is important to her. He’s one of the most important scholars in his field.

See More

Recent Examples on the Web Those celebrations were so important that the board approved in 2015 a one-year extension of McRobbie’s contract to keep him at the helm of IU until June 30, 2021. — Michael Reschke, The Indianapolis Star, «IU president announces his intent to retire in 2021,» 14 Aug. 2020 Loyal Friend: Balance and a sense of mutuality are important in friendships. — Amy Dickinson, Washington Post, «Ask Amy: Pandemic brings out the boring,» 14 Aug. 2020 Dear Loyal: Balance and a sense of mutuality are important in friendships. — Amy Dickinson, oregonlive, «Ask Amy: Friend endures boring phone calls that never seem to end,» 14 Aug. 2020 That’s one of the reasons why wearing masks is so important. — Holly Yan, CNN, «With major delays in Covid-19 testing, AMA and other medical groups push for testing priority guidelines,» 14 Aug. 2020 The role of the health officials is important in determining the criteria, Griffith said, because superintendents are not trained to make health decisions. — Liz Bowie, baltimoresun.com, «Lawmakers, superintendents want statewide metrics to determine when schools should resume in-person classes,» 13 Aug. 2020 The vice presidential nominee is going to be particularly important in this campaign because of Biden’s age. — W. James Antle Iii, Washington Examiner, «Law and order or prison reform? Ex-prosecutor Kamala Harris heightens Trump camp message confusion,» 13 Aug. 2020 So many of those express why these protests are so important. — Dave Brooks, Billboard, «BLM Organizer Tianna Arata Talks About Her ‘Terrifying’ Arrest and How Music Motivates Her Activism,» 13 Aug. 2020 As the first-year coach, McDonald noted that implementing and sustaining the culture is just as important as on-the-field performance. — David J. Kim, The Courier-Journal, «Providence football embraces new coach, culture and system ahead of 2020 season,» 12 Aug. 2020

Как работает каскад CSS?

Общий принцип прост: «Чем специфичнее правило — тем выше оно в каскаде». Например, у нас на сайте в списке статей на главной каждый пост — это контейнер с классом box. У него прописан стиль

Это правило добавляет красивую рамку. Но в тёмной теме это бессмысленно, ибо на тёмном фоне тёмная рамка не нужна. В тёмной теме и так достаточно контраста.

Хакатон DemHack

12–13 сентября, Москва, беcплатно

tproger.ru

События и курсы на tproger.ru

Мы добавили правило

И прописали у тега body (родительский тег для всего контента вообще на сайте) класс dark.

В итоге второе правило более специфично, оно даёт путь из двух компонент. И применяется именно оно, перекрывая предыдущее. То есть в тёмной теме рамки у постов нет.

Пользовательские таблицы стилей¶

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

Если кто-то определяет таблицу стилей для просмотра веб-страниц, то эта таблица будет переопределена таблицей стилей автора страницы. Если пользователь указывает стиль подобно !important, этот стиль переопределяет таблицу стилей автора веб-страницы, даже если автор выбирает такое правило, как !important.

Эта структура полезна для тех пользователей, кто каким-нибудь образом должен установить стили. Например на всех используемых ими веб-страницах слабовидящему читателю понадобится увеличить размер шрифта по умолчанию. С помощью использования директивы !importantпри разработке страниц, вы обеспечиваете индивидуальные требования ваших пользователей.

Не рекомендуется использовать правило !important слишком часто, так как единственное, что может переопределить !important — это другое правило !important. Один раз используя его, у вас получится CSS файл, полный правилами !important, и это не очень хорошо.

Обратите внимание на служебные классы

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

Если мы не придерживаемся функционального CSS в стиле Tachions, Basscss или Atomic CSS (но это совсем другая тема), то нам, скорее всего, ни к чему много служебных классов в HTML.

Если вместо этого выбрать более модульный и компонентный подход в CSS (что мы скорее всего и делали), большинство из наших классов будут очень специальными, например:

.c-carousel {}

.o-media__body {}

.c-nav-primary {}

.c-btn--large {}

У них будет область видимости (блок, в БЭМ) и хорошая инкапсуляция. Красота классов вроде этого в том, что можно легко обнаружить взаимосвязи в HTML (что гораздо труднее — практически невозможно — с функциональным CSS), например:

<blockquote class="o-media  c-testimonial">
  <img class="o-media__img c-testimonial__photo" ... />
  <p class="o-media__body c-testimonial__text">...</p>
</blockquote>

Здесь можно ясно видеть взаимосвязь между двумя различными и раздельными ветками оформления.

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

Здесь как нельзя кстати придется служебный класс:

<blockquote class="o-media
                   c-testimonial
                   u-margin-bottom-large">

Мы используем служебный класс, поскольку дополнительный никак не связан с конкретным отзывом; это крайне контексто-зависимая и временная процедура, поэтому не следует жёстко вбивать это изменение в CSS нашего отзыва.

С другой стороны, если в стиле отзыва есть большой размер шрифта, и эту особенность можно придать любому отзыву, служебный класс ни к чему. Это не временная процедура, относящаяся к конкретному отзыву, поэтому нужно систематизировать и инкапсулировать его с помощью модификатора БЭМ:

<blockquote class="o-media
                   c-testimonial  c-testimonial--large">

Так что вот общее правило:

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

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

CSS по стандартам

  • !important
  • @charset
  • @font-face
  • @import
  • @keyframes
  • @media
  • CSS свойства
    • по алфавиту
    • по категориям
    • все
    • CSS1
    • CSS2
    • CSS3
    • animation
    • animation-delay
    • animation-direction
    • animation-duration
    • animation-iteration-count
    • animation-name
    • animation-play-state
    • animation-timing-function
    • appearance
    • azimuth
    • backface-visibility
    • background
    • background-attachment
    • background-clip
    • background-color
    • background-image
    • background-origin
    • background-position
    • background-repeat
    • background-size
    • border
    • border-bottom
    • border-bottom-color
    • border-bottom-left-radius
    • border-bottom-right-radius
    • border-bottom-style
    • border-bottom-width
    • border-collapse
    • border-color
    • border-image
    • border-image-outset
    • border-image-repeat
    • border-image-slice
    • border-image-source
    • border-image-width
    • border-left
    • border-left-color
    • border-left-style
    • border-left-width
    • border-radius
    • border-right
    • border-right-color
    • border-right-style
    • border-right-width
    • border-spacing
    • border-style
    • border-top
    • border-top-color
    • border-top-left-radius
    • border-top-right-radius
    • border-top-style
    • border-top-width
    • border-width
    • bottom
    • box-shadow
    • box-sizing
    • break-after
    • break-before
    • break-inside
    • caption-side
    • clear
    • clip
    • color
    • column-count
    • column-gap
    • column-rule
    • column-rule-color
    • column-rule-style
    • column-rule-width
    • column-span
    • column-width
    • columns
    • content
    • counter-increment
    • counter-reset
    • cue
    • cue-after
    • cue-before
    • cursor
    • direction
    • display
    • elevation
    • empty-cells
    • float
    • font
    • font-family
    • font-size
    • font-size-adjust
    • font-stretch
    • font-style
    • font-variant
    • font-weight
    • height
    • left
    • letter-spacing
    • line-height
    • list-style
    • list-style-image
    • list-style-position
    • list-style-type
    • margin
    • margin-bottom
    • margin-left
    • margin-right
    • margin-top
    • marquee-direction
    • marquee-play-count
    • marquee-speed
    • marquee-style
    • max-height
    • max-width
    • min-height
    • min-width
    • nav-down
    • nav-index
    • nav-left
    • nav-right
    • nav-up
    • opacity
    • orphans
    • outline
    • outline-color
    • outline-offset
    • outline-style
    • outline-width
    • overflow
    • overflow-x
    • overflow-y
    • padding
    • padding-bottom
    • padding-left
    • padding-right
    • padding-top
    • page-break-after
    • page-break-before
    • page-break-inside
    • pause
    • pause-after
    • pause-before
    • pitch
    • pitch-range
    • play-during
    • position
    • quotes
    • resize
    • richness
    • right
    • speak
    • speak-header
    • speak-numeral
    • speak-punctuation
    • speech-rate
    • src
    • stress
    • table-layout
    • text-align
    • text-decoration
    • text-indent
    • text-overflow
    • text-shadow
    • text-transform
    • top
    • transition
    • transition-delay
    • transition-duration
    • transition-property
    • transition-timing-function
    • unicode-bidi
    • unicode-range
    • vertical-align
    • visibility
    • voice-family
    • volume
    • white-space
    • widows
    • width
    • word-spacing
    • word-wrap
    • z-index
  • Комментарии в CSS
  • Псевдоклассы
    • :active
    • :checked
    • :default
    • :disabled
    • :empty
    • :enabled
    • :first-child
    • :first-of-type
    • :focus
    • :hover
    • :in-range
    • :invalid
    • :lang
    • :last-child
    • :last-of-type
    • :link
    • :not
    • :nth-child
    • :nth-last-child
    • :nth-last-of-type
    • :nth-of-type
    • :only-child
    • :only-of-type
    • :optional
    • :out-of-range
    • :read-only
    • :read-write
    • :required
    • :root
    • :target
    • :valid
    • :visited
  • Псевдоэлементы
    • :after
    • :before
    • :first-letter
    • :first-line

Браузеры

Хотя большинство свойств CSS описаны достаточно давно, разработчики не всегда включали их поддержку в браузер или делали это не в полном объеме. По этой причине часто возникала ситуация, когда стандарты нельзя было применять только потому, что они не работали. К счастью, эта ситуация исправляется и современные браузеры поддерживают спецификацию CSS 2.1 практически в полном объеме, хотя еще и не до конца. Тем не менее, при создании универсальных веб-страниц, которые корректно отображаются в разных браузерах, необходимо знать, какие свойства будут работать и где, а какие нет. Для этого в таблице приведены популярные браузеры — Internet Explorer, Chrome, Opera, Safari и Firefox, а также используются следующие обозначения:

 — свойство полностью поддерживается браузером со всеми допустимыми значениями;

 — свойство браузером не воспринимается и игнорируется;

 — свойство понимается браузером, но с некоторыми оговорками. Например, не все допустимые значения действуют; свойство применяется не ко всем элементам, которые указаны в спецификации; свойство работает только с вендорным префиксом.

Где использовать правило !important?¶

Использование правила !important может быть нормальным в следующих случаях:

Переопределение стилей в пользовательском таблице стилей

Главным образом правило !important было создано, чтобы предоставить пользователю возможность переопределить стили веб-страниц. Оно часто используется программой чтения экрана, средствами блокирования рекламы и т. д.

Переопределение исходного кода и встроенных стилей.

Как разработчик вы должны стремиться иметь как можно больше контроля над вашим кодом. но бывают случаи. когда нет другого выбора кроме как работать с тем. что имеете. Используйте !important редко.


Utility Cases

Наверное лучшим способом является использование utility-классов. Рассмотрим кнопки

Если на вашей веб-странице есть название класса подобно .button и неважно, какой элемент вы поместите, вам необходимо, чтобы этот элемент имел вид кнопки (с конкретным шрифтом, круглыми углами, особым фоном и границами), можете попробовать следующее:

Здесь спецификой является 0,0,1,0. Если есть и другие селекторы с высокой спецификой, которые влияют на элемент, у вас могут быть проблемы в таком виде:

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

Будет более эффективно добавление правила !important к значениям. Рассмотрим пример, где к кнопкам применено правило !important.

Каскад CSS

1

Важность. Первая ступень каскада рассматривает тип правила

Первая ступень каскада рассматривает тип правила.

Есть четыре уровня типов:

(переход)

Правила, которые применяются к активному переходу, имеют первостепенную важность.. Если поставить в конце правила, оно перейдёт на этот уровень каскада

В идеале вы должны использовать только для переопределения inline-стилей или других из сторонних библиотек.

(анимация). Правила, применяющиеся к активной анимации, повышают уровень в каскаде.

. На этом уровне находится основная часть правил.

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

2. Происхождение

Вторая ступень смотрит, где определено правило.

Таких мест может быть три (расположены в порядке приоритета):

  1. Веб-сайт. Единственный уровень, который вы можете контролировать как веб-разработчик.
  2. Пользователь. Стили, которые пользователь подключает через настройки браузера.
  3. Браузер. У каждого браузера есть свой набор стилей — например элемент <button> всегда использует стиль браузера по умолчанию. Так выглядит кнопка в вашем браузере

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

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

На третьей ступени важна специфичность правила. Значение специфичности определяется исходя из уровней селекторов CSS. Всего уровней четыре:

  1. . Стили, объявленные в HTML-свойстве , обладают наибольшей специфичностью.
  2. . Можно использовать идентификатор (синтаксис ) для определения стиля конкретного элемента.
  3. . Определять стиль элемента также позволяют классы (синтаксис ). Этот уровень включает селекторы HTML-атрибутов, например или , и псевдоклассы, такие как и .
  4. . Тип тега (синтаксис ) тоже используется для определения стиля элементов. Сюда же входят псевдоэлементы вроде и .

Стоит отметить, что здесь имеет значение число «вхождений» в какой-либо уровень.

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

4. Позиция

Последняя ступень каскада смотрит на порядок определения правил.

Всегда побеждает то правило, которое объявлено позже (при условии, что всё остальное в каскаде одинаково).

***


Когда в следующий раз вам захочется написать волшебное слово , лучше притормозите, оглянитесь назад и выясните, на каких ступенях каскада находятся конфликтующие стили. А ещё можете почитать спецификацию CSS.

А теперь небольшой тест: как думаете, какое из двух правил победит?

Когда использовать правило !important¶

При тестировании и отладки веб-страницы !important является эффективным. Если вы не уверены, почему применятся стиль, и думаете, что это может быть конфликтом специфики, добавьте !importantк вашему стилю. Если таким образом проблема решается, измените порядок селекторов и удалите директивы !important из вашего кода.

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

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

Медиазапросы, используемые в Bootstrap 4

В этом разделе мы с Вами рассмотрим основные медиазапросы, которые используются в Bootstrap 4. Bootstrap это HTML, CSS и Javascript фреймворк для создания адаптивных страниц.

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

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция min-width) используются в Bootstrap 4:

// Small devices (landscape phones, минимальная ширина области просмотра 576px и выше)
@media (min-width: 576px) { ...код CSS }

// Medium devices (tablets, минимальная ширина области просмотра 768px и выше)
@media (min-width: 768px) { ...код CSS }

// Large devices (desktops, минимальная ширина области просмотра 992px и выше)
@media (min-width: 992px) { ...код CSS }

// Extra large devices (large desktops, минимальная ширина области просмотра 1200px и выше)
@media (min-width: 1200px) { ...код CSS }

Bootstrap в основном использует вышеуказанные диапазоны запросов для макета, системы сеток и компонентов, но иногда используют и медиазапросы, которые идут в другом направлении (заданный размер области просмотра или меньше).

Давайте рассмотрим какие точки останова основанные на минимальной ширине (мультимедийная функция max-width) используются в Bootstrap 4:

// Extra small devices (portrait phones, максимальная ширина области просмотра 576px и ниже)
@media (max-width: 575.98px) { ...код CSS }

// Small devices (landscape phones, максимальная ширина области просмотра 768px и ниже)
@media (max-width: 767.98px) { ...код CSS }

// Medium devices (tablets, максимальная ширина области просмотра 992px и ниже)
@media (max-width: 991.98px) { ...код CSS }

// Large devices (desktops, максимальная ширина области просмотра 1200px и ниже)
@media (max-width: 1199.98px) { ...код CSS }

В Bootstrap 4 существуют также точки останова направленные на определенный сегмент размеров экрана с использованием минимальной и максимальной ширины области просмотра (мультимедийные функции min-width и max-width):

// Small devices (landscape phones, минимальная ширина области просмотра 576px и максимальная ширина области просмотра 768px)
@media (min-width: 576px) and (max-width: 767.98px) { ...код CSS }

// Medium devices (tablets, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 992px)
@media (min-width: 768px) and (max-width: 991.98px) { ...код CSS }

// Large devices (desktops, минимальная ширина области просмотра 992px и максимальная ширина области просмотра 1200px)
@media (min-width: 992px) and (max-width: 1199.98px) { ...код CSS }

Обратите внимание, что точки останова, направленные на опеределенный сегмент используют логический оператор and («И»), который используется для объединения нескольких медиазапросов в один, в нашем случае это значение для минимальной и максимальной ширины области просмотра. Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

Аналогичным образом медиазапросы могут охватывать несколько сегментов точек останова:

// Medium and Large devices (tablets and desktops, минимальная ширина области просмотра 768px и максимальная ширина области просмотра 1200px)
@media (min-width: 768px) and (max-width: 1199.98px) { ...код CSS } 

Синтаксис

Все запросы начинаются с правила @media, после чего следует условие, в котором используются типы носителей, логические операторы и медиа-функции. Типы носителей перечислены в табл. 1.

Табл. 1. Типы носителей и их описание
Тип Описание
all Все типы. Это значение используется по умолчанию.
braille Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed Принтеры, использующие для печати систему Брайля.
handheld Смартфоны и аналогичные им аппараты.
print Принтеры и другие печатающие устройства.
projection Проекторы.
screen Экран монитора.
speech Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
tty Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv Телевизоры.

Рабочие классы

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

.btn{display: inline-block;background: #3590f1;padding: 0.7em 1.6em;border-radius: 2px;font-size: 1rem;font-weight: 700;color: #fff;text-transform: uppercase;text-decoration: none;&:hover,&:focus {background: #5adba0;}}.entry-content a {text-decoration: underline;color: #3590f1;}

Хотя с нашим классом всё ок, его специфичность низка, так что простое второе правило, которое идет дальше — перепишет его свойства, в данном случае это color и . Вам нужно написать простой селектор, но вы все еще будете иметь проблему.

Вы можете решить ее, использовав , как в этом примере:

Это правда, что после этого, вам также придется применять эту технику в модификаторах и псевдозаявлениях.


С этим читают