Идея: LESS CSS создает специальные селекторы при обработке / компиляции
Я пытаюсь избежать длинной цепочки селекторов и использую один селектор на основе классов, который автоматически создается, когда LESS CSS компилируется в простой CSS. Смотрите пример ниже для деталей.
Вдохновленный http://css-tricks.com/efficiently-rendering-css/, у меня была идея создать уникальные классы для каждого элемента (дублирующий класс может быть очень полезным) для повышения эффективности рендеринга CSS.
HTML
<div class="main">
<img src="something.jpg" />
<a class="link" href="#">Click me</a>
</div>
МЕНЬШЕ CSS
div.main {
img {border:1px solid #ccc;}
a.link {color:blue;}
}
Стандартный простой CSS (составлен из LESS выше)
div.main img {border:1px solid #ccc;}
div.main a.link {color:blue;}
Требуемый простой CSS (скомпилированный из LESS выше, класс для дочернего элемента в родительском элементе форматируется как .parentElement1-parentClass1-childElement1-childClass1
использовать null
если класс не определен)
.div-main-img-null {border:1px solid #ccc;}
.div-main-a-link {color:blue;}
Конечно, более конкретное / описательное имя класса для элемента может решить эту проблему, но для гораздо более крупных приложений и во избежание дублирования имен классов этот подход мог бы быть лучше, так как читаемость обрабатывается меньшим количеством, а рабочий CSS эффективен. Элемент "тело" используется в качестве основы, а все остальное относительно него с точки зрения номенклатуры. Имя класса в html все еще должно быть определено вручную, чтобы соответствовать этому требованию, но есть возможность создания сценария для автоматизации создания имени класса для всех элементов.
Мне было интересно, если LESS может иметь метод компиляции с учетом этого критерия. Что вы думаете об идее, и если что-то подобное жизнеспособно?
1 ответ
Я не уверен, что понимаю вопрос... Если вам нужно -
вместо точек и пробелов просто напишите это:
.div-main {
&-img-null {border: 1px solid #ccc}
&-a-link {color: blue}
}
Я предполагаю, что вы можете использовать обычный поиск и замену регулярных выражений для преобразования одного формата в другой.