Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Using CSS selectors in HTML templates

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?

like image 867
Kaivosukeltaja Avatar asked Feb 20 '23 05:02

Kaivosukeltaja


1 Answers

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:

zen coding animated gif

It's basically:

  1. Write pseudo-html.
  2. Hit the shortcut.
  3. Get full HTML.
  4. ?????
  5. Profit!

You should check with your editor if it can support this. FWIW, I use this in VIM and it's awesome.

like image 96
Florian Margaine Avatar answered Mar 08 '23 18:03

Florian Margaine