Skip to content

Instantly share code, notes, and snippets.

@paulirish
Created August 1, 2011 01:38
Show Gist options
  • Save paulirish/1117438 to your computer and use it in GitHub Desktop.
Save paulirish/1117438 to your computer and use it in GitHub Desktop.
whitespace use for html/css readability
<!-- formatting fun #1: tables! -->
<!-- use whitespace to mimic the layout you want. leave off optional end tags for readability -->
<table>
<caption>Selector engines, parse direction</caption>
<thead>
<tr><th>Left to right <th>Right to left
<tbody>
<tr><td>Mootools <td>Sizzle
<tr><td>Sly <td>YUI 3
<tr><td>Peppy <td>NWMatcher
<tr><td>Dojo Acme <td>querySelectorAll
<tr><td>Ext JS
<tr><td>Prototype.js
</table>
<!-- formatting fun #1.5: lists! -->
<h3>Reasons I love not closing all my tags:</h3>
<ul>
<li>Better readability
<ul>
<li>Less visual noise
<li>Angle brackets are gross
<li>Semantic indentation (what??)
</ul>
<li>Better maintainability
<li>Feels good, man.
</ul>
<!--
Mostly I don't close my <li>s. As shown above, a table can look fantastic without end tags. And also, in a string of <p>'s I won't close those either; feels a lot like the English grammar convention of..
"opening a quote and
"splitting it over some paragraphs."
But then again I'm keen on generating markup via jade/slim/markdown as my fingers are quite tired of typing (and my eyes are tired of looking at) angle brackets. :)
-->
/* formatting fun #2: css3 columns! */
/* prefixes in descending length, relevant prop stays adjacent. */
.columned {
-webkit-column-count: 3; -webkit-column-gap: 15px;
-moz-column-count: 3; -moz-column-gap: 15px;
column-count: 3; column-gap: 15px;
}
/* other css formatting ideas at css3please.com and at dropshado.ws/post/2054719546/css-formatting */
@milani
Copy link

milani commented Aug 1, 2011

JSFiddle it;)

@imjared
Copy link

imjared commented Aug 1, 2011

I dig #2, just snagged that for a textexpander snippet

@bcreeves
Copy link

bcreeves commented Aug 1, 2011

I've doing that a lot in my .scss code.

@connor
Copy link

connor commented Aug 3, 2011

Oh yeah - this is great. I've noticed a lot of ppl don't mimick their nesting in their CSS, which I have to do. I'm digging this though - thank you!

@duggi
Copy link

duggi commented Apr 25, 2012

developers always mocked my "fugue" notation for template dev. ha! it's because their IDEs can only voice one instrument at a time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment