Как заменить * на класс CSS

Question

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

Его версия:

*,
*:before,
*:after {
  box-sizing: border-box;
}

Моя версия:

.bar,
.bar:before,
.bar:after {
  box-sizing: border-box;
}

Моя версия просто не работает, хотя теоретически яделаю тоже самое.

Оригинальный код: https://codepen.io/havardob/pen/zNPjeg

Answer 1

https://codepen.io/stevensonmt/pen/OZZogv

.bar,
.bar:before,
.bar:after {
  box-sizing: border-box;
}

.bar {
  position: absolute;
  left: 0%;
  }

Мне кажется, это работает.

Answer 2

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

.bar, .bar *,
.bar::before, .bar *::before,
.bar::after,  .bar *::after {
     box-sizing: border-box;
}

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

div {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;

То, что применяется к всем divам, включая ваш div-обертку.

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

.bar div {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;

Вот пример этого примера, но я добавил любые селекторы уровня элемента с помощью .bar

https://codepen.io/anon/pen/GddXMy

Поскольку CSS на самом деле является SCSS (в этом примере), вы также можете обернуть большую часть его внутри своего класса.Таким образом, начиная с:

ul {
  list-style: none;
  position: absolute;

до самого конца, вы можете изменить его на:

.foo {
    ul {
      list-style: none;
      position: absolute;
 // all the rest of the CSS
 }

Обратите внимание, что это преимущество SCSS, позволяющее вкладывать селекторы внутри селекторов, ине будет работать с простым CSS.

Еще один форк:

https://codepen.io/anon/pen/oddPEZ