Light TableのHTML構造 ref: http://qiita.com/kurogelee/items/ea05816a25b6c19397fa

file0.css

body
    #loader //"起動時の画面。起動後はopacity: 0;"
    #wrapper
        #canvas
            #multi //"中心部分"
                .tabsets
                    .tabset
                    .tabset
                    ...
                span.button.fullscreen //"フルスクリーン時の閉じるボタン"
                #statusbar-container
            #side //"左サイドバー"
                .content
                .vertical-grip
            #right-bar
                .vertical-grip
                .content
                    .command.selector
                    .clients //"Show connect barで表示される部分"
                    .navigate
                    .docs-serch.filter-list
            #bottombar
                .horizontal-grip
                .content
    .popup //"アプリ終了確認時のみ存在"
        div
            div
                div
                    h2
                    p
                    ul.buttons
                        li.button //"Discard changes"
                        li.button //"cancel"

file1.css

#side > .content
    .workspace //"Workspaceの表示があるときのみ存在"
        .wstree
            ul.buttons
            ul.root //"メインの箇所。左サイドバーほぼ全体"
                .tree-root //"ツリー表示の部分全体"
                    ul.opened
                        li //"ディレクトリ1"
                            input.rename //"rename時のテキストフィールド"
                            .tree-item
                                p //"ファイル名表示部分。ディレクトリの場合、p.folder"
                                div
                                    ul.sub //"開いているとき、ul.sub.opened"
                                        li //"上のliの構造と同じになる"
                        li //"ディレクトリ2"
                        ...
        .recent

file2.css

#right-bar > .content
    .command.selector
        .selector
            .filter-list
                input.search
                ul
                    li //"選択されている場合、li.selected"
                        p //"コマンド名と説明の表示"
                        p
                        p.binding //"ショートカットキーがあるときのみ存在"
                    ...
        .options //"syntaxの選択のようなオプション表示があるときに中身がある"
            h2
            div

    .clients //"選択表示のときは、.clients.selecting"
        .list //"接続済みリスト"
            h2.toggle.add.button
            ul
                li
                    div
                        h2 //"タイトル"
                        .details
                            table
                            span.button
                            span.button.unset
                ...
        .connector //"選択表示"
            h2.toggle.button
            ul
                li
                    h2 //"タイトル"
                    p
                ...

    .navigate //"Navigate"
        .filter-list
            input.search
            ul
                li
                    h2
                    p
                ...

    .docs-search.filter-list //"search docs"
        input.search
        .types
        ul.results
            li
            ...

file3.css

#bottombar > .content
    ul.console //"Consoleの表示があるときのみ存在"
        li
            table
                tr
                    td.loc
                        em.file
                    td
                        pre
        li.error //"エラー出力の場合"
            pre
        ...

file4.css

#statusbar-container
    #find-bar
        input.find
        input.replace
        button
    ul#statusbar
        li
            span.pos //"右端の行数/列数"
        li.left
            .log
                span.load-wrapper
                    span.img
                span.message
        li
            span.console-toggle //"エラーがあるとき、span.console-toggle.error.dirty"

file5.css

.list //"タブ群"
    ul
        li //"タブ1つ。編集中（未保存）のとき、li.dirty"
            span.file-name
            span.tab-close
        ...
.items
    .content //"Welcomeタブ"
        #intro
            h1
                img
            p
            p
    .content //"エディタのタブ"
        .CodeMirror.CodeMirror-wrap
            div
                textarea //"エディタの現在のカーソル部分の入力欄"
            .CodeMirror-hscrollbar
            .CodeMirror-vscrollbar
            .CodeMirror-scrollbar-filler
            .CodeMirror-gutter-filler
            .CodeMirror-scroll
                .CodeMirror-sizer
                    div
                        .CodeMirror-lines
                            div
                                .CodeMirror-measure
                                .CodeMirror-measure
                                div
                                .CodeMirror-cursors
                                    .CodeMirror-cursor
                                .CodeMirror-code
                                    div //"エディタの1行。アクティブのときは、.CodeMirror-activeline"
                                        .CodeMirror-gutter-wrapper //"行番号"
                                            .CodeMirror-linenumber.CodeMirror-gutter-elt
                                        pre //"1行の内容"
                                            span
                                                span
                                                ...
                                                span.CodeMirror-widget //"インラインの結果がある場合"
                                                    span.inline-result.result-mark
                                                        span.truncated
                                                        span.full
                                    ...
                div
                .CodeMirror-gutters
                    .CodeMirror-gutter.CodeMirror-linenumbers
    .content //"Pluginsタブ"
        .plugin-manager //"Availableを表示しているときは、.plugin-manager.server"
            .tabs
                button
                button
                input
            ul.server-plugins //"Available"
                li
                    span.install
                    span.source
                        a
                    h1 //"タイトル"
                        span.version
                    h3 //"by..."
                    p
            ul.plugins //"Installed"
    .content //"Search resultsタブ"
        .search-results
            ul.res //"検索結果"
                li
                    p.path
                        span.file
                    p.entry
                        span.line
                        pre
                    p.entry
                    ...
                ...
            .searcher
                p
                input.search
                div
                    input.replace
                    button.replace
                input.loc
    .content //"Versionタブ"
        #version-info
            .info
            .CodeMirror.CodeMirror-wrap
    .content //"consoleタブ"
        ul.console
            li
    .content //"browserタブ"
        #browser
            .frame-shade
            iframe //"ブラウザ本体"
            nav
                button
                button
                input.url-bar
                button
    .content //"Docsタブ"
        .docs
            .frame-shade
            iframe
.vertical-grip