wqertAnna

В моей компании используют препроцессоры и компонентный подход. К сожалению, приходится поддерживать и проекты, в которых стили представлены css, но это просто неприятная необходимость и все это понимают.

Я влюблена в sass, очень лаконичный синтаксис, что существенно ускоряет верстку, а также очень легко читается, особенно, учитывая, что в компании приняты именования классов по БЭМ.

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

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

И да, поддерживать css хоть немного в приличном состоянии намного сложнее.

Я просто не понимаю, как можно вот это

.header-sub-menu

		&__link
			display: block
			padding: 9px 8px 9px 18px
			color: $dark-gray
			+max-width($tablet)
				padding: 9px 20px 9px 40px
				// анимация
				opacity: 0
				transform: translateY(-25px)
				transition: transform .4s .4s, opacity .4s .4s


			&:hover
				background-color: rgba(56, 65, 79, 0.04)
				color: $dark-gray
				+max-width($tablet)
					background-color: transparent


		&__link-item
			font: bold 13px $font
			color: $dark-gray
			+max-width($tablet)
				font-size: 17px

сравнить в этим

.header-bottom .header-sub-menu__link {
  display: block;
  padding: 9px 8px 9px 18px;
  color: #38414f;
}
@media only screen and (max-width: 992px) {
  .header-bottom .header-sub-menu__link {
    padding: 9px 20px 9px 40px;
    opacity: 0;
    transform: translateY(-25px);
    transition: transform 0.4s 0.4s, opacity 0.4s 0.4s;
  }
}
.header-bottom .header-sub-menu__link:hover {
  background-color: rgba(56, 65, 79, 0.04);
  color: #38414f;
}
@media only screen and (max-width: 992px) {
  .header-bottom .header-sub-menu__link:hover {
    background-color: transparent;
  }
}
.header-bottom .header-sub-menu__link-item {
  font: bold 13px "Roboto Condensed", sans-serif;
  color: #38414f;
}
@media only screen and (max-width: 992px) {
  .header-bottom .header-sub-menu__link-item {
    font-size: 17px;
  }
}

Я понимаю, что приведенный мной css это скомпилированный sass и если изначально писать на css, то это выглядит приличнее, но всё равно, это не сильно меняет картину.