Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Is it considered bad practice to use HTML in Jade?

Is it considered bad practice to use HTML in Jade?

Problem

Jade looks like a cool templating engine and I think I'll be using it for my next project. However, some of the syntax doesn't make sense to me.

What do you get by doing this:

ul
  li
    a(href="#book-a") Book A 

instead of:

  • Book A

I understand you save some typing, but it seems less readable to me. I noticed on Jade's live demo that regular Html passes right through the translation. So would it be considered bad practise to do something like this:

#{book.name}

Problem courtesy of: n0pe

Solution

Background

Actually jade/pug syntax allows plain HTML (or any other plain text) through the use of 3 syntaxes, as you can see in the reference on the project's site.

dot syntax (also known as "Block in a Tag")

ul.
  
  • Book A
  • Book B
  • pipe syntax (also known as "Piped Text")

    ul
      | 
  • Book A
  • |
  • Book B
  • tag syntax (also know as "Inline in a Tag"), "Simply place some content after the tag", can also do the trick

    ul
      li Book A
    

    which will render

    • Book A

    The Question

    Back to your question, your sample

    #{book.name}

    could be written as simple as

    .someClass
      h3= book.name
    

    Which is a lot more readable I think, so in that case you should consider a bad practice writing raw HTML, but not always.

    IMO

    IMO, common sense is the best good practice. Maybe i would consider using a raw chunk of HTML to insert a widget on the page, i.e. a youtube video or a custom google map

    
    
    
    

    As said above, here doesn't makes sense to use the attribute syntax. The result is nearly the same, and is quicker leaving the raw html.

    iframe(width="425", height="350", frameborder="0", scrolling="no", marginheight="0", marginwidth="0" src="https://maps.google.es/maps/ms?msa=0&msid=217708588685721440865.0004d1d4faefdd11adf39&ie=UTF8&ll=43.167638,-7.838262&spn=1.010793,0.991384&t=m&output=embed")
    
    iframe(width="420", height="315", src="http://www.youtube.com/embed/_Vkm2nMM3-Q", frameborder="0", allowfullscreen)
    
    Solution courtesy of: laconbass

    Discussion

    View additional discussion.



    This post first appeared on Node.js Recipes, please read the originial post: here

    Share the post

    Is it considered bad practice to use HTML in Jade?

    ×

    Subscribe to Node.js Recipes

    Get updates delivered right to your inbox!

    Thank you for your subscription

    ×