綱要 =============================== 計劃佈局，劃分整體結構 內容區域，從整體到局部，局部中的通用部分，根據上下文應用樣式 公共頭部（public header）、尾部（public footer） 公共容器（public container/inner center ...
綱要
- 計劃佈局，劃分整體結構
- 內容區域，從整體到局部，局部中的通用部分，根據上下文應用樣式
- 公共頭部（public-header）、尾部（public-footer）
- 公共容器（public-container/inner-center）
- css文件，html結構，多考慮
- 不要讓內聯元素與塊級元素處於同一級別下
- reset.css、common.css、index.css
- 需要浮動的元素，父元素統統進行清理，給予統一的類clearfix
- 寬高度：使用偶數單位。
- 良好的代碼規範和命名
- 不超過三級命名
- 巧妙屬性和元素配合，還有沒有更好的方案
- 活用overflow，針對一些圖片、文字超出隱藏的情況。
- text-overflow，超出的文字部分，省略號顯示。
a標簽可以嵌套任何p，h，div等標簽（按照新的規範）一般見於同一組標題、圖片文字組合等鏈接同一個地方的，那麼大一塊地方都需要鏈接樣式去跳轉，這樣做比較方便。
<a href="#" class="title"> <h4>Voluptate cillum fugiat.</h4> <p class="comment">Cheese, tomato, mushrooms, onions.</p> </a>
- 相容和細節的處理（放大100%以上，才能看出端倪）
- 反思HTML結構是否合理
- 調試錯誤的時候，讓錯誤的視覺效果極大化，更容易看出問題。
- css Hack處理
- 反思HTML結構是否合理
整體結構
- page-content
- header
- section-feature（可增/刪）
- section-main
- section-postscript（可增/刪）
- footer
- 公共部分
- inner-center
or
- page-content
- header
- section-feature（可增/刪）
- section-name-1
- section-name-2
- ...
- footer
- 公共部分
- inner-center/public-container
section-main
無邊欄設計
section.section-main>.inner-center 左邊欄設計
section.section-main>.inner-center
aside.aside-left
main.main>.content雙邊欄設計
section.section-main>.inner-center
aside.aside-left
main.main>.content
aside.aside-right特定需求
- 響應式設計
- 百分比設計
- 固定寬度設計
代碼規範
命名約定與應用
常見class關鍵詞
- 佈局類：header, footer, container, main, content, aside, page, section
- 包裹類：wrap, inner
- 區塊類：region, block, box
- 結構類：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
- 列表類：list, item, field
- 主次類：primary, secondary, sub, minor
- 大小類：s, m, l, xl, large, small
- 狀態類：active, current, checked, hover, fail, success, warn, error, on, off
- 導航類：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
- 交互類：tips, alert, modal, pop, panel, tabs, accordion, slide, --scroll, overlay,
- 星級類：rate, star
- 分割類：group, seperate, divider
- 等分類：full, half, third, quarter
- 表格類：table, tr, td, cell, row
- 圖片類：img, thumbnail, original, album, gallery
- 語言類：cn, en
- 論壇類：forum, bbs, topic, post
- 方向類：up, down, left, right
- 其他語義類：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
- 圖片命名與圖標命名，index-header-logo,index-footer-logo.
約定規則
- 關鍵詞間以中劃線
-連接 以中劃線連接，如.item-img - 使用兩個中劃線表示特殊化，如.item-img.item-img--small表示在.item-img的基礎上特殊化
- 狀態類直接使用單詞，參考上面的關鍵詞，如.active, .checked
- 圖標以icon-為首碼（字體圖標採用.icon-font.i-name方式命名）。
- 模塊採用關鍵詞命名，如.slide, .modal, .tips, .tabs，特殊化採用上面兩個中劃線表示，如.imgslide--full, .modal--pay, .tips--up, .tabs--simple
- js操作的類統一加上js-首碼
- 不要超過四個class組合使用，如.a.b.c.d
- 一個類名，不要超過三個單詞的連接。
- 主體結構命名前加上該頁的命名，如index-banner，index-main。
實踐應用
通過添加首碼修飾關鍵詞
public-header,article-header，index-banner,index-panel通過層級關係特殊化類，一般子元素接著父元素的最後一個單詞（繼承式）
ul.card-list li.list-item a.item-img-link>img.item-img h3.item-tt>a.item-tt-link p.item-text <ul> <li> <a href="#"><img src="" alt=""></a> <h3><a href="#"></a></h3> <p></p> </li> </ul>
