CSS-reset&規範

weixin_33807284發表於2017-12-03
CSS

css reset 是什麼？css 預編譯器是什麼？ 後編譯器(post css)是什麼？

css reset 即重置瀏覽器標籤的樣式表

現在所使用的主流瀏覽器對一些標籤的預設屬性上並沒有做到統一，所以我們偶爾會發現，某個頁面在chrome瀏覽器上很正常，到了firefox上面卻有意想不到的偏差。當然程式設計人員不喜歡這樣的相容性問題的，而reset.css就是解決預設樣式不相容問題的辦法之一。

* {
padding: 0;
margin: 0;
} /*這是最簡化的CSS Reset，會帶來效能問題*/
css 預編譯器

CSS 前處理器定義了一種新的語言，其基本思想是，用一種專門的程式語言，為 CSS 增加了一些程式設計的特性，將 CSS 作為目標生成檔案，然後開發者就只要使用這種語言進行編碼工作。
CSS 前處理器為 CSS 增加一些程式設計的特性，無需考慮瀏覽器的相容性問題”，例如你可以在 CSS 中使用變數、簡單的邏輯程式、函式（如右側程式碼編輯器中就使用了變數$color）等等在程式語言中的一些基本特性，可以讓你的 CSS 更加簡潔、適應性更強、可讀性更佳，更易於程式碼的維護等諸多好處。
目前主流的前處理器裡最常用的三種有：Sass，Less ，Stylus 。

後編譯器(post css)

PostCSS是一個使用JavaScript外掛來轉換CSS的工具。它將CSS轉換成抽象語法樹(AST)，也就是JavaScript可以操作的一種資料形式。基於JavaScript的PostCSS外掛可以執行不同的程式碼操作。PostCSS本身並沒有改變你的CSS，它請允許外掛執行和轉換你的程式碼。
實際上，對於CSS的操作，PostCSS外掛並沒有任何限制。只要你有想得到的，你都可以寫一個PostCSS外掛來實現。
http://www.w3cplus.com/preprocessor/postcss-and-crazy-things-you-can-do-with-it.html

列舉CSS編碼規範

參考：
  1. Google HTML/CSS Style Guide
  2. 編碼規範 by @mdo
  3. 命名參考seesparkbox
  4. html編碼規範參考
  5. css編碼規範參考
書寫規範：
  1. tab 用兩個空格表示
  2. css的:後加個空格， {前加個空格
  3. 每條宣告後都加上分號;
  4. 換行，而不是放到一行
  5. 顏色用小寫，用縮寫, #fff
  6. 小數不用寫字首, 0.5s -> .5s；0不用加單位
  7. 儘量縮寫， margin: 5px 10px 5px 10px -> margin: 5px 10px
CSS命名技巧：

語義化:

  1. 語義化標籤優先
  2. 基於功能命名、基於內容命名、基於表現命名
  3. 簡略、明瞭、無後患
<!-- 不好  -->
<div class="left"></div>
<div class="red"></div>
<div class="s"></div>
<a class="link" href="#"></a>
<article class="blue">...</article>
<article class="redBg mt30 bigText">...</article>
<!-- 好 -->
<div class="success"></div>
<div class="theme-color"></div>
<a class="login" href="#"></a>
<article class="movies">...</article>
<article class="news">...</article>

常見命名:

.wrap或.wrapper -- 用於外側包裹
.container或 .ct -- 包裹容器
.header -- 用於頭部
.body -- 頁面 body
.footer -- 頁面尾部
aside、sidebar -- 用於側邊欄
.content -- 和header footer 對應，用於主要內容
.navigation -- 導航元素
.pagination -- 分頁
.tabs > .tab -- tab 切換
.breadcrumbs -- 導航列表、麵包屑
.dropdown -- 下拉選單
.article -- 文章
.main -- 用於主體
.thumbnail -- 頭像，小影象
.media -- 媒體資源
.panel -- 皮膚
.tooltip -- 滑鼠放置上去的提示
.popup -- 滑鼠點選彈出的提示
.button、.btn -- 按鈕
.ad -- 廣告
.subnav -- 二級導航
.menu -- 選單
.tag -- 標籤
.message或者.notice -- 提示訊息
.summary -- 摘要
.logo -- logo
.search -- 搜尋框
.login -- 登入
.register -- 註冊
.username -- 使用者名稱
.password -- 密碼
.banner -- 廣告條
.copyright -- 版權
.modal或者 .dialog -- 彈窗

如何使用偽元素來清楚浮動？補全程式碼

給父容器新增一個空的塊級元素，然後清除左右的浮動。

.clearfix::after {
  content: '';
  display: block;
  clear: both;
  }

實現如下效果，三角符號用偽元素實現

編碼規範的作用是什麼？列舉5條以上編碼規範

作用：

1. 提高可讀性
編碼規範，幫助我們寫出容易理解的程式碼，它為我們提供了最基本的模板，良好的編碼風格，使程式碼具有一定的描述性，可以通過名字來獲取一些需要IDE才能得到的提示，如可訪問性、繼承基類等。
2. 促進團隊協助
編碼規範，要求團隊成員遵守這一統一的全域性決策，這樣成員之間可以輕鬆地閱讀對方的程式碼，所有成員正以一種清晰而一致的風格進行編碼。而且，開發人員也可以集中精力關注他們真正應該關注的問題——自身程式碼的業務邏輯，與需求的契合度等區域性問題。
3. 有助於知識傳遞，加快工作交接
風格的相似性，能讓開發人員更迅速，更容易理解一些陌生的程式碼，更快速地理解別人的程式碼。因為，他和你的程式碼風格是一樣的，你沒有必要對他的一些個性化風格進行揣測。這樣的好處是開發人員可以很快的接手專案組其他成員的工作，快速完成工作交接。
4. 降低維護成本
在沒有規範的情況下，和容易為同一型別的例項起不同的名字。對於以後維護這些程式碼程式設計師來說會產生疑惑。
5. 強調變數之間的關係，降低缺陷引入的機會
命名可以表示一定的邏輯關係，是開發人員在使用時保持警惕，從而一定程度上減少缺陷被引人的機會。
6. 提高程式設計師個人能力
每個程式設計師都應該養成良好的編碼習慣，而編碼規範無疑是教材之一。即便是為了自身發展，作為程式設計師也沒有理由抵制這種規則的存在。你可能沒有認識到，我們正默默地得益於編碼規範。

規範
  1. 為每個 HTML 頁面的第一行新增標準模式（standard mode）的宣告，這樣能夠確保在每個瀏覽器中擁有一致的展現。
<!DOCTYPE html>
<html>
  <head>
  </head>
</html>
  1. 字元編碼
    通過明確宣告字元編碼，能夠確保瀏覽器快速並容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字元實體標記（character entity），從而全部與文件編碼一致（一般採用 UTF-8 編碼）。
<head>
  <meta charset="UTF-8">
</head>

  1. 實用為王
    儘量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價。任何時候都要儘量使用最少的標籤並保持最小的複雜度。

  2. 布林（boolean）型屬性
    布林型屬性可以在宣告時不賦值。XHTML 規範要求為其賦值，但是 HTML5 規範不需要。

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>
  1. 減少標籤的數量
    編寫 HTML 程式碼時，儘量避免多餘的父元素。很多時候，這需要迭代和重構來實現。
<!-- Not so great -->
<span class="avatar">
  <img src="...">
</span>

<!-- Better -->
<img class="avatar" src="...">

編輯器配置

將你的編輯器按照下面的配置進行設定，以避免常見的程式碼不一致和差異：

  • 用兩個空格代替製表符（soft-tab 即用空格代表 tab 符）。
  • 儲存檔案時，刪除尾部的空白符。
  • 設定檔案編碼為 UTF-8。
  • 在檔案結尾新增一個空白行。

參照文件並將這些配置資訊新增到專案的.editorconfig檔案中。例如：Bootstrap 中的 .editorconfig 例項。更多資訊請參考about EditorConfig。

相關文章