Есть ли способ заставить более низкую специфичность в CSS? - PullRequest
Новая
       92

Есть ли способ заставить более низкую специфичность в CSS?

1 голос
/ 21 сентября 2019

У меня есть шаблон CSS, в котором я хочу использовать минимальное количество атрибутов в некоторой разметке HTML, в то же время позволяя легко настраивать эту разметку с помощью классов (не идентификаторов) позже, если это необходимо. 

<ul data-role = 'a'>
  <li>A</li>
  <li>B</li>
</ul>

<style>
  [data-role="a"] { /* ... */ }
  [data-role="a"] > :first-of-type { /* ... */ }
  [data-role="a"] > :last-of-type { /* ... */ }
</style>

Проблема в том, что из-за специфики CSS я сталкиваюсь либо с тем, чтобы сделать все мои классы селекторов в любом случае, либо с тем, чтобы любая модификация таблицы стилей моего контента была чрезвычайно специфичной: 

<style>
[data-role="a"] > li { } /* custom overriding CSS */
</style>

против 

<ul class = 'a'>
  <li class = 'a-top'>A</li>
  <li class = 'a-bottom'>B</li>
</ul>

<style>
  a {/* */}
  a-top {/* */}
  a-bottom {/* */}
</style>

Есть ли способ принудительного выхода специфичности без использования !important, например, гипотетически: 

@yield to classes {
  [data-role = "a"] { } 
  [data-role = "a"] > :first-of-type { }
  [data-role = "a"] > :last-of-type { }
  /* etc */
}

или

@specify('[data-role="a"] > :last-of-type' , 10) { ... }, где 10 - самая низкая присвоенная внутренняя специфика и т. Д.

Или я просто вынужден везде использовать классы?

...