Being a UX designer, my goal is to streamline my workflow. I aim to transition from HTML to well-structured CSS to LESS as efficiently as possible. The concept is to input HTML, generate CSS, compile it to LESS, style it, and then recompile it back to CSS for deployment.
Here is the HTML code:
<header>
<nav>
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</nav>
<header>
The CSS output is generated using
header { }
header nav { }
header nav ul { }
header nav ul li { }
header nav ul li a { }
Next, the LESS version is created using a compiler (which is exactly what I am looking for).
header{
**declarations**
nav{
**declarations**
ul{
**declarations**
li{
**declarations**
a{
**declarations**
}
}
}
}
}
Finally, when development is complete and ready for deployment, the CSS can be recompiled using a tool like (just one example, there are many similar tools available).
I understand the importance of considerations such as mixins vs concatenating rules with tools like Cleancss, but my main focus is on nesting. Repeating specificity rules repeatedly is my primary concern as it can be quite tedious and confusing.
To remove unused CSS, tools like unused-css.com can be utilized.
Does anyone have a tool that can help with this task? Is anyone interested in collaborating on this?
Your thoughts, suggestions, and ideas are greatly appreciated. Automating this particular task could greatly benefit many of us, so I urge you to carefully consider my proposal before dismissing it.
Thank you in advance, and I look forward to hearing your input.