2014年CSS報告——考察如何使用CSS

時間 2020-01-20

標籤 2014年 css 報告考察如何使用欄目 CSS 简体版

原文原文鏈接

CSS主要是將一個HTML結構變成一個正確顯示的頁面。CSS是一種允滿怪癖和有不少不可預測的行爲的語言，所以，一般狀況之下，開發人員（後端程序開發人員）最討討厭使用他來作任務。php

過去幾年，市場上明顯出現不少框架和工具，用來幫助你們少寫CSS代碼和減小編寫CSS時產生的錯誤。而Sass和LESS這樣的預處理器更是廣泛的運用於Bootstrap、Foundation、Bourbon、Susy和Unsemantic等框架之中。css

瀏覽器也發生了不少變化，在現代瀏覽器中使用CSS3的一些樣式規則再也不須要添加瀏覽器特定的前綴。在前些年，最佳實踐是，瀏覽器的前綴要不要取決於站點對瀏覽器的支持。html

這個調查來自於8000多個網站，而且下載了他們的CSS文件，作爲分析如何書寫CSS和使用CSS的數據。我認爲這對於如何向前推進相關組織、思考和管理更大的CSS項目是很是有用的。以及能夠看看網絡是如何演變的。git

方法

我想具備普遍的表明性樣本應該與那些大型網站開發團隊、常時間存在的網站和一批具備熱情的業餘愛好者在不斷更新的屬性。github

我首先在Alexa網站上搜集了1000個網站，這些網站都是流行的大網站。他們提供了一個CSV報告，報告了排名前100萬流量的網站，因此我選擇了前1000名。web

我爲隨機抽樣制定了一個郵件列表，這個列表包括了過去的、潛在客戶、員工、愛好者以及來自其餘世界的各地人民。但我認識，只是隨機抽取Alexa列表中的前百萬流量的網站，即便這些來自於大型網站，但是與全世界大約2.71億域名註冊商相比，我但願個人郵件列表能獲得一個更好的樣品，其中能包括MVPs，我的網站和其餘網站。shell

最後個人列表中包括了10400個具備表明性的網站，從這些域名中我下載了他們主頁中的CSS樣式文件：bootstrap

cat domains.txt | xargs -I % wget http://% -r -A '*.css*' -H --follow-tags=link

從10400個網站首頁中，我總共收集了大約28000個CSS樣式文件。這是貫穿一個CSS解析器節點模塊，讓我節省大約包括選擇器、屬性和屬性值（好比：span.important，font-weight,bold）870萬條記錄。這些都保存在Postgres，併爲閱讀提供了大量的索引。後端

總結數據

屬性

屬性	狀況
聲明獨特的CSS屬性	1528
排在前五的屬性	color，width，display，content，background-color
常見50個屬性佔總額的百分比	85%
有效的樣式屬性（根據CSS規範）	79(不包括特定的前綴，使用這個數字最高)
許多獨特風格樣式屬性（有效，其餘）	372
不識別樣式屬性	83個錯誤，大約210個未知屬性
帶*的Hack	在59個屬性中使用了70808次，最多見的是* zoom
強調Hack	48個屬性使用2127次,最多見的是_font-family
帶瀏覽器前綴	609000或大約7%

使用CSS屬性的分佈接近一個典型的帕累託分佈。彷佛那些古怪的屬性遞減，並在圖的末尾上。而經常使用的50個屬性應該是任何初學者的首要任務。瀏覽器

輸入錯誤和無效的樣式規則也是很是有趣的。使人感到吃驚的，這些規則類型，檢查，在瀏覽器中是沒有效果的，由於他離開樣式表，並不會在生產中起效。我最容易拼錯的屬性有bototm、foat和heith等。

選擇器

選擇器	狀況
最經常使用的五個選擇器	body，textarea，h1，pre,h2
最長的選擇器	.ClientAreaContainer .element-columns-alpha-outer .element-columns-\|alpha-inner .element-column-right-alpha-outer .element-column-right-alpha-inner .element-column-right-alpha-content:first-child .ContentEditor > p .h2Grey221個字符
選擇器中包括一個#id佔比	13.7%
選擇器中包括一個.class佔比	84.1%
選擇器中包括一個:pseudo-selector佔比	20.4%
選擇器中包括一個::pseudo-element-selector佔比	0.3%
選擇器中僅使用元素的佔比	7.5%

CSS選擇器一般較短，也存在一些明顯的異常。簡潔的選擇器常被認爲是好的，作爲總體佈局中的一個元素來講，應該分層。BEM系統對這方面作過詳細的闡述。通常來講，很長的選擇器和特殊的選擇器都會被禁止重用，以及一組從新的CSS風格會被認爲是一個全局的CSS。

經常使用的選擇器會有類選擇器和元素選擇器，好比說body這樣的選擇器就很常見。我猜，大多數網站都用元素選擇器來重置瀏覽器自帶的屬性。這些在一些特定的網站中都一般用來設置網站的CSS基本樣式，也將導至這些元素選擇器至少屢次被選中。

漸進加強

使用前綴

	box-shadow	border-radius	transition
沒有前綴	79438	103599	43442
-webkit	58840	49747	41117
-moz	40702	47633	31886
-o	1981	5594	27054
-ms	823	4576	11371

對於能自動更新版本的現代瀏覽器，再也不須要特定的瀏覽器前綴。而在全部CSS3屬性中仍是依舊頻繁的使用瀏覽器的前綴：-webkit，-moz，-o和-ms，以保證瀏覽器對其正確的渲染。

許多IDE，CSS框架和在線生成器均可以幫你自動生成瀏覽器前綴。這樣開發者就能夠擺脫這種額外的工做與不習慣。若是你想確保哪些屬性還須要依賴於前綴來工做，能夠經過CanIuse查詢。

我看見許多年長的前輩們仍是在使用和_這樣的瀏覽器Hack來解決IE某些版本的兼容問題。早在2008年Paul Lrish就提出替代方案，即便用IE條件樣式來替代這些Hack。而在當你趕時間的時候，很容易忽略這些方法，以致於和_這樣的Hack持續在使用。

顏色

最經常使用的幾種顏色：

十六進制代碼提供了16 6的顏色，而常見的顏色都極可能是灰色。R==G==B。灰色將佔大多數字體顏色，邊框顏色和各類盒子陰影顏色。而品牌顏色(brand colors)在網站中我惟一不但願看到的是排在前十名的灰色。

在2014年11月,Bootstrap中提供的變量$brand-primary的值是#428bca，在Brand中使用的是藍色，隨後不少項目都使用這個顏色，也這代表了這個框架是多麼的流行。

顏色單位

單位	數量	所佔百分比
Hex	1113681	99.6%
rgb/rgba	49789	0.4%
hsl/hsla	121	0.001%

大多數都認爲rgb是rgba和hsl是hsla。他們一般不透明度就是灰度的變體。這也是有道理的，由於其主要優點就是這些格式提供了alpha的透明通道。

平均下來文件中聲明瞭169種顏色。有幾個下載下來的頁面文件，顏色的格式使用了變量，保持了網站主題的一致性。

單位

單位名稱	數量	所佔百分比
px	2512781	77.8%
%	458925	14.2%
em	197288	6.1%
rem	51155	1.6%
pt	4471	0.1%
calc()	1789	0.1%
vw	516	<.1%
vh	455	<0.1%
cm	303	<0.1%
ex	158	<0.1%
in	62	<0.1%
mm	29	<0.1%
pc	11	<0.1%
vmin	2	<0.1%
ch	0	0%
vmax	0	0%

在CSS大小屬性中有大量的可用選項。每一個單位都有本身的利與弊:有一些適應於響應式佈局，有一些適用於打印樣式中。大部分都是使用絕對單位px和相對單位%。必需要指出的時，瀏覽器對那些更深奧的單位支持度並不廣泛。

文本和字體

有一種網格排版，能夠幫助網站感受很清爽，而且更易於閱讀。層次有助於設計和用戶讀取內容。從大量的網站中的樣式聲明中能夠發現，大約有31種不一樣的字體大小聲明。

每一個網站都有至關多的字體大小變量。沒法弄清楚有多少字體用於主頁或有多少特殊狀況用於其餘地方。一些漂亮的網站彷佛都集中了大約20種字體。個人觀點是，通常選擇字體大小比較少。它經過加粗來增強設計的凝聚力。這樣更易於開發人員和設計人員之間有一個良好的切換過程。

響應式設計

自從2014年Ethan Marcotte首次提出響應式設計的概念，到目前爲止使用CSS媒體查詢製做的響應式設計的網站已席捲了64%的網站。

IE9也開始支持媒體查詢，他讓你可根據視窗尺寸，方向和高寬比提供不一樣樣式，使用響應式設計更具備意義。

最多見的查詢條件是min-width或max-width，表明了89%的媒體查詢。下面是最多見的寬度，讓開發者在寫樣式時有一個較好的參考：

曲線在990px範圍最寬，有許多使用的是960px，970px，980px，990px，992px，1000px和1024px。其中綠色線表示的領域，表明斷點使用較少的。

不一樣的人選擇的在設備上顯示的斷點是不同的，這得根據他們自身的選擇。但表明智能手機，平板和桌面的斷點彷佛愈來愈獲得更多人的共識。僅供參考的斷點是768px，992px和1200px。而在Bootstrap中默認的斷點是智能設略寬度。這裏還有一些其餘設備下的斷點寬度。

框架的使用

經常使用的框架

框架名稱	數量	所佔百分比
Bootstrap	918	78.2%
Foundation	177	15.1%
960.gs	55	4.7%
Blueprint	14	1.2%
Gumby	10	0.9%

很難肯定使用的框架。我使用搜索文件名，註釋和獨特的類名，才整理出上面的相關數據。這份報告中有關於框架的使用有點唐突魯莽，但能夠說明的是，Bootstrap是處於絕對領先地位。大概只有10%的網站能夠識別使用了框架。

Assets

經過CSS能夠下載特定的資源，一般能夠看到的是background-image。在咱們研究中，下面是最多見的文件格式：

格式	數量	所佔百分比	備註
.png	46441	77.7%
.gif	5669	9.5%
.svg	3986	6.7%
.jpg或.jpeg	3550	5.9%
.htc	101	1.2%	一個HTML組件（我不得不查）
.php	41	0.1%	腳本中聲明
.cur	12	<0.1%	自定義手勢文件

這些結果是一個好的跡象。.png文件在網絡上通常建議使用非攝影圖像。它提供了alpha透明度，有良好的壓縮率和瀏覽器對其普遍的支持度。我確信.jpg文件在網絡上愈來愈廣泛，但通常用在<img>的src屬性中，而不是在CSS中使用。

顏色名稱

如下是CSS中用名稱指定的顏色：antiquewhite, azure, olive, bisque, aliceblue, lightsteelblue, blueviolet, firebrick, lightskyblue, lightseagreen, darkorange, seashell, ghostwhite, papayawhip, cornsilk, navajowhite。我最喜歡我是papayawhip，讓人賞心悅目。