0

I'm trying to avoid long chain of selectors and use one class-based selector that is automatically created when the LESS CSS is being compiled into plain CSS. See the example below for details.

Inspired by http://css-tricks.com/efficiently-rendering-css/, I had the idea of creating unique classes for each element (duplicate class can intentially be beneficial) to increase efficiency of CSS rendering.

HTML

<div class="main">
  <img src="something.jpg" />
  <a class="link" href="#">Click me</a>
</div>

LESS CSS

div.main {
  img {border:1px solid #ccc;}
  a.link {color:blue;}
}

Standard Plain CSS (compiled from LESS above)

div.main img {border:1px solid #ccc;}
div.main a.link {color:blue;}

Desired Plain CSS (compiled from LESS above, the class for the child element within a parent is formatted like
.parentElement1-parentClass1-childElement1-childClass1, use null if class is undefined)

.div-main-img-null {border:1px solid #ccc;}
.div-main-a-link {color:blue;}

Of course, more specific/descriptive class name for the element can solve this problem, but for much larger applications and to avoid duplicate class names, this approach might be better since readability is handled by less and the production css is efficient. The "body" element is used as the base and everything else is relative to it in terms of nomenclature. The class name in the html still has to be manually defined to match this requirement, but there's a possibility of creating a script to automate class name creation for all elements.

I was wondering if LESS can have compile method with this criteria in mind. What's your thought on the idea and if something like this is viable?

Steve
  • 4,946
  • 12
  • 45
  • 62
  • So do you want the magic tool not only to generate classes, but also update them all in your html? – dotnetom Jun 17 '14 at 19:05
  • haha! the class names can be manually entered, but can be definitely automated by a script that "pre-processes" the html. I'm more concerned with how something like this can be accomplished with LESS compiling to CSS. – Steve Jun 17 '14 at 19:22
  • It strikes me that this is heavily favouring performance (via flat CSS structures) over maintainability, but is likely to result in enormous CSS files which may negate the gain? From the article "I have a feeling we don't talk about this rendering efficiency stuff very much is because it's not that big of a problem anymore. ... Super-speed, Zero-practicality" – Synchro Jun 18 '14 at 06:38

1 Answers1

0

I'm not sure I understand the question... If you need - instead of dots and whitespaces just write it:

.div-main {
    &-img-null {border: 1px solid #ccc}
    &-a-link   {color:  blue}
}

I guess you can use plain regex search & replace to convert one format to another.

seven-phases-max
  • 11,765
  • 1
  • 45
  • 57
  • Why to write "Salt" when you need "Sugar"? Additionally, `tag` identifiers do not really make sense if you switch to this convention (e.g. `.div-main-a-link` -> `.main-link`) and what you will probably come to in the end is something like [`BEM`](http://www.integralist.co.uk/posts/maintainable-css-with-bem/). – seven-phases-max Jun 17 '14 at 21:49
  • That BEM markup is hideous! Putting a really long class name that's dependent on the hierarchical position of the tag on nearly every tag looks like a maintainability disaster. What happened to semantic markup? – Synchro Jun 18 '14 at 06:43