Какие сокращения имён переменных/классов в CSS применять?

Question

[Dubrovin]

Здравствуйте,
есть проблема с длинными именами переменных, вроде --button-active-box-shadow-color, хотелось бы писать всё короче, вроде --btn-act-shw. Есть ли какие нибудь стандартизированные/рекомендуемые списки сокращений слов (вроде button в btn, hover в hv и т.п.)?

Comments

[FeST1VaL]

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

[Destell]

Просто старайтесь не применять такие длинные названия. Почитайте про БЭМ.

[Dubrovin]

Пример кода:

.button {
	--button-color: black;
	--button-background: white;
	--button-after-background: white;
	--button-after-box-shadow: 0 0 10px 0 gray;
	--button-active-background: black;
	--button-active-box-shadow: 0 0 10px 0 black;
	--button-checked-background: gray;
	--button-checked-box-shadow: 

	color: var(--button-color);
	background-color: var(--button-background);

	&::after {
		background-color: var(--button-after-background);
		box-shadow: var(--button-after-box-shadow);
	}

	&:active {
		&::after {
			background-color: var(--button-active-background);
			box-shadow: var(--button-active-box-shadow);
		}
	}

	&.\--checked {
		&:not(:active) {
			&::after {
				background-color: var(--button-checked-background);
				box-shadow: var(--button-checked-box-shadow);
			}
		}
	}
}

//а здесь куча модификаторов для кнопки, которые просто меняют нужные цвета
.button {
	&.\--colorPrimary {
		--button-color: white;
		--button-background: var(--primary);
	}
}

Как предлагаете сократить названия?

[sim3x]

Dubrovin,

Никак
Тк никакого профита после сокращения не получите

[Dubrovin]

sim3x, уверены? таких модификаторов для кнопок порядка 25 (default, outlined, neutral всех цветов), даже если результирующий размер css только для кнопок будет меньше на 5-10кб, это профит. Умножьте это на количество компонентов, использующих подобный подход и получится неслабая экономия в 50-100кб CSS.
Конечно, можно спорить, что нет никакой разницы в наш век высокоскоростного интернета в размере CSS для сайта 100 кб или, например, 300кб. Но я считаю, что если можно написать код с меньшим количеством символов, используя при этом системный подход, то почему бы этим не воспользоваться?

[sim3x]

Dubrovin,
Давайте с подробностями, что у вас там за кнопка, что без картинки в base64 требует 10кб цсс
И зачем вам 25 вариаций для каждой из них

получится неслабая экономия

и сразу думаем, что у нас все идет в гзипе с -9

Если хотите системно подойти к решению, то вы пошли вообще не в ту сторону
Вам требуется соединить хтмл и цсс так, чтоб названия всех классов состояли из 1-2 буквоцифр