After accidentally using a CSS selector in an HTML template I started wondering if there is a template language or an extension to one that would allow this syntax, and whether it would be useful. So instead of writing this:
<div id="mydiv">
<div class="first column">1</div>
<div class="second column">2</div>
</div>
We could write it like:
<div#mydiv>
<div.first.column>1</div>
<div.second.column>2</div>
</div>
Does something like this exist?
Maybe you mean something like Jade?
It is an HTML preprocessor.
The following:
doctype 5
html(lang="en")
head
title= pageTitle
script(type='text/javascript')
if (foo) {
bar()
}
body
h1 Jade - node template engine
#container
if youAreUsingJade
p You are amazing
else
p Get on it!
Will be translated to:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade</title>
<script type="text/javascript">
if (foo) {
bar()
}
</script>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container">
<p>You are amazing</p>
</div>
</body>
</html>
Also, it is not exactly what you're asking, but you may like Zen Coding. It is a plugin to code HTML at high-speed. GIF showing what it does:
It's basically:
You should check with your editor if it can support this. FWIW, I use this in VIM and it's awesome.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With