Наращивание специфичности

**Наращивание специфичности

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

.button {
  width: 100px;
}
 
// как я бы сделал раньше
.button.fancy-button {
  width: 200px;
}
 
// трюк
.fancy-button.fancy-button {
  width: 200px;
}
 
 
```Возможно, такие селекторы кажутся странными, поэтому я бы добавил поясняющий комментарий в коде для других разработчиков и пояснил, что именно я здесь делаю.
 
Такой приём может оказаться полезен, когда вы используете библиотеки компонентов вроде [material-ui](https://mui.com/) и не хотите завязываться на CSS классы, предоставляемые библиотекой, для увеличения специфичности. 
 
#css