提高CSS文件可維護性的五種方法

来源:http://www.cnblogs.com/iflygofy/archive/2016/01/29/5168337.html
-Advertisement-
Play Games

當完成一項前端的工作之後，許多人都會忘記該項目的結構與細節。然而代碼並不是馬上就能完全定型，在餘下的時間里還有不斷的維護工作，而這些工作也許不會是你自己完成。所以，結構優良的代碼能很大程度上優化它的可維護性。下麵列出五種提高CSS文件可維護性的方法，也就是一種較好的CSS樣式指南。1.分解你的樣式對


     當完成一項前端的工作之後，許多人都會忘記該項目的結構與細節。然而代碼並不是馬上就能完全定型，在餘下的時間里還有不斷的維護工作，而這些工作也許不會是你自己完成。所以，結構優良的代碼能很大程度上優化它的可維護性。下麵列出五種提高CSS文件可維護性的方法，也就是一種較好的CSS樣式指南。

1.分解你的樣式
對於小項目，在寫代碼之前，按頁面結構或頁面內容將代碼分為幾塊並給予註釋。例如，可以分別將 全局樣式、佈局、字體樣式、表單、評論和其他分為幾個不同的塊來繼續工作。
而對於較大的工程，這樣顯然不會有什麼效果。此時，就需要將樣式分解到幾個不同的樣式表文件。下麵的master stylesheet 就是這一方法的例子，它的工作主要是導入其他樣式文件。使用這一方法不僅能優化樣式結構，而且有利於減少一些不必要的伺服器請求。而分解文件的方法就有許多種，master stylesheet 使用了最常見的一種。
/*------------------------------------------------------------------
[Master Stylesheet]
Project: Smashing Magazine
Version: 1.1
Last change: 05/02/08 [fixed Float bug, vf]
Assigned to: Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use: Magazine
-------------------------------------------------------------------*/
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/* @import "debugging.css"; */
同時對於大型項目，你也可以加上CSS文件的升級標誌或者一些診斷措施，這裡不再詳述。

2.建立CSS文件索引
為了能夠迅速的瞭解整個CSS文件的結構，在文件開頭建立文件索引是一個不錯的選擇。一種可行的方法是建立樹形的索引：結構上的id 和 class 都可以成為該樹的一個分支。如下：
/*------------------------------------------------------------------
[Layout]
* body
Header / #header
Content / #content
- Left column / #leftcolumn
- Right column / #rightcolumn
- Sidebar / #sidebar
- RSS / #rss
- Search / #search
- Boxes / .box
- Sideblog / #sideblog
Footer / #footer
Navigation #navbar
Advertisements .ads
Content header h2
——————————————————————-*/
或者也可以這樣：
/*------------------------------------------------------------------
[Table of contents]
1. Body
2. Header / #header
2.1. Navigation / #navbar
3. Content / #content
3.1. Left column / #leftcolumn
3.2. Right column / #rightcolumn
3.3. Sidebar / #sidebar
3.3.1. RSS / #rss
3.3.2. Search / #search
3.3.3. Boxes / .box
3.3.4. Sideblog / #sideblog
3.3.5. Advertisements / .ads
4. Footer / #footer
-------------------------------------------------------------------*/
另一種方式可以只是先簡單的將內容列舉出來，也不需要縮進。下麵的一個例子中，如果你需要跳至RSS部分你只需要簡單的搜索 8.RSS。
/*------------------------------------------------------------------
[Table of contents]
1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar

3.定義你的顏色和版式
CSS 中我們無法使用常量，但是在編寫顏色和版式方面的代碼是我們會經常遇到可以使用很多次的類，在這裡可以將之視為CSS 的常量。

一種可以減小CSS無常量定義確定的方法是在CSS文件頂部的註釋中下一些定義，也就是定義常量。一種最簡單的應用就是創建一個顏色表。這樣你就可以快速的瞭解整個頁面的色彩，從而避免一些反覆修改過程中的錯誤。如果你需要對顏色進行修改，你也可以很快找到它。
/*------------------------------------------------------------------
# [Color codes]
# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */
或者，你也可以選擇描述你佈局當中使用的顏色。對於一個給定的顏色，你可以將用到該顏色的塊羅列出來。當然，你也可以選擇按頁面元素來羅列顏色。
/*------------------------------------------------------------------
[Color codes]
Background: #ffffff (white)
Content: #1e1e1e (light black)
Header h1: #9caa3b (green)
Header h2: #ee4117 (red)
Footer: #b5cede (dark black)
a (standard): #0040b6 (dark blue)
a (visited): #5999de (light blue)
a (active): #cc0000 (pink)
-------------------------------------------------------------------*/
對於版式有同樣的例子。
/*------------------------------------------------------------------
[Typography]
Body copy: 1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;
Headers: 2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif;
Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;
Notes: decreasing heading by 0.4em with every subsequent heading level
-------------------------------------------------------------------*/

4.格式化CSS屬性
當我們編寫代碼的時候，使用一些特殊的編碼風格會對提高CSS代碼的可讀性有很大幫助。許多人都有各自不同的編碼風格。一部分人習慣於將顏色和字體的代碼放在前面，另外一部分則更喜歡將類似浮動和定位的更“重要”的屬性放在前面。類似的，也可以將頁面元素按照它在佈局中的結構進行排序：
body,
h1, h2, h3,
p, ul, li,
form {
border: 0;
margin: 0;
padding: 0;
}
一些開發者用一種更為有意思的方法：他們將屬性按首字母的順序排列。值得註意的是，這樣一種方法可能對某些瀏覽器會產生問題。
不管自己的格式如何，你要確保你已經清晰的定義了這些格式方法。這樣，你的同事在閱讀你的代碼的時候將會感謝你的努力。

5.縮進會是你的朋友！
為了讓你的代碼給人感覺更為直觀，你可以使用一行來定義大綱元素的樣式。當指定的選擇器里的屬性超過三個的時候，這種方式將帶來混亂。但是，適度的使用這種方式，你可以很清楚的區分相同類的不同點。
#main-column { display: inline; float: left; width: 30em; }
#main-column h1 { font-family: Georgia, "Times New Roman", Times, serif; margin-bottom: 20px; }
#main-column p { color: #333; }
同時，樣式修改的維護也是個比較麻煩的問題。很多人修改樣式之後就忘記了，結果後來又發現修改的樣式導致了頁面出錯，不得不苦苦尋找。因此，為修改的樣式構建一個特殊的格式就很必要了。一種很簡單的方式是，給修改過的樣式縮進，同時，也可以使用一些註釋（比如"@new"）來做一個標識。
#sidebar ul li a {
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; /* @new */
margin: 3px 0 3px 0;
padding: 3px; /* @new */
}
總的來說，只有建立一個合適的樣式指南才會對樣式表的可讀性有所幫助。記住，移去每一個對你理解文件沒有幫助的樣式指南，避免對過多的元素使用過多的樣式指南。然後，為了一個可讀性可維護性良好的CSS文件而努力吧。
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer
-------------------------------------------------------------------*/
<!-- some CSS-code -->
/*------------------------------------------------------------------
[8. RSS / #rss]
*/
#rss { ... }
#rss img { ... }
定義這樣一個樣式檢索可以很有效的使其他人閱讀學習你的代碼變得容易。在製作大項目的時候，你也可以將檢索列印出來從而在你閱讀代碼的時候方便查閱。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 第九章 企業項目開發--分散式緩存Redis(1)
    註意：本章代碼將會建立在上一章的代碼基礎上，上一章鏈接《第八章 企業項目開發--分散式緩存memcached》 1、為什麼用Redis 1.1、為什麼用分散式緩存（或者說本地緩存存在的問題）？ 見《第八章 企業項目開發--分散式緩存memcached》 1.2、有了memcached，為什麼還要用r
  • 單例模式（Winform窗體的實現）
    在我的設計模式分類當中，我選擇單例模式作為我第一個要寫的設計模式，其一，單例模式簡單、容易理解讓人接受，其二，單例模式很常用，在實際的Winform窗體應用開發中能夠帶來更好的客戶體驗。 單例模式的核心是在應用程式的生命周期中只實例化一次當前類，讓整個應用整個應用程式中只擁有一個當前類實例化的對象，
  • 生成器or建造者模式★★☆☆☆
    一、什麼是生成器模式 對複雜對象的創建過程進行抽象，相同的創建步驟，不一樣的創建過程實現，生成不同表示的對象； 例如創建一臺電腦，對其應用生成器模式進行創建： 創建過程是指創建cpu、創建記憶體、創建顯示器三個步驟，所有品牌電腦的創建過程都是一樣的，可以對其抽象出一個抽象建造者角色Builder； 不
  • SpringMVC通過Redis實現緩存主頁
    這裡說的緩存只是為了提供一些動態的界面沒辦法作靜態化的界面來減少資料庫的訪問壓力，如果能夠做靜態化的話的還是採用nginx來做界面的靜態化，這樣可以承受高併發的訪問能力。 好了，廢話少說直接看實現代碼吧下載地址， 實現機制主要是通過過濾器攔截方案，有兩個地方要註意的 1，Servlet過慮器中使用S
  • REST API註意事項
    RFC一致性 Methods GET: 獲取某個資源，冪等且無副作用。 POST: 創建一個新的資源。 PUT: 替換某個已有的資源。冪等有副作用。 PATCH: 修改某個已有的資源。 DELETE：刪除某個資源。冪等有副作用。 Headers Accept：伺服器需要返回什麼樣的content。
  • 所有的列表都應該考慮排序
    我在監理別的項目時，經常提出這樣的要求，所有的列表都要有排序機制。最近又看到一個數據倉庫項目中所有的維度表都沒有排序欄位。結果報表上所有維度都是按Caption屬性的字母排序。很多維度在用戶那裡都是有業務排序需求的，然而我提出這個問題後，設計者居然說這個不重要，不說了（他們就這水平了）和我沒有關係的
  • CSV文件的規範
    本文講解一種常見的CSV文件標準，設定文件中的行分隔符，列分隔符，如何處理值中的單引號，雙引號，逗號，換行符等。
  • 基於jQuery的分頁功能實現
    第1步：分析問題 我這邊的處理方式是根據傳入的數據條數，和需要顯示的頁碼數，自動生成頁碼。舉個例子，如果傳入的參數為{pageSize:10,totalRow:200} 那麼就一共有20頁。 首次生成的頁碼樣式截圖： 第2步：點擊操作 點擊 2 或者下一頁按鈕的樣式截圖： 第3步：生成新頁面 這裡可
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類