Называть классы лучше так, чтобы по названию можно было понять что он делает. Длинные имена в общем не проблема. можно попробовать использовать BEM-подход или взять оттуда некоторые принципы и написать собственную методологию. Например у меня все классы делятся на несколько категорий:
row (горизонтальный блок на сайте)
col (делит row на несколько секций)
wrap (оборачивает компонент, который находится внутри col)
item (сам компонент)
text (текст, который находится внутри компонента)
У каждой категории классов есть свой набор свойст которые к нему применяются. Например сетка работает с col-классами и следовательно, когда я вижу класс типа .col-width-50-s, то я знаю что тут структурный стиль для сетки, в котором присваивается ширина 50 процентов на мобилах. А класс item-table_caption это заголовок компонента-таблицы.
Когда в голове создашь свою иерархию классов, то проблем с названием селекторов не будет и их очень легко читать/писать станет.
У такого подхода есть как плюсы, так и минусы.
Плюс - вы берете самые интересные решения из разных методологий и создаете инструмент под себя (мне нравится атомарный подход, mcss и bem, но у всех них есть свои недостатки)
Минус - другие разработчики не всегда могут читать ваш код также легко как и вы. Однако, как показывает практика, методологии приходят и уходят и возможно изобретенный вами подход станет новым стандартом в будущем)
Средний
Средний
