2014年CSS報(bào)告——考察如何使用CSS

ctriptech 發(fā)布于2019-08-28 18:07 / 3315人閱讀

摘要：常用的選擇器會(huì)有類選擇器和元素選擇器，比如說(shuō)這樣的選擇器就很常見(jiàn)。我猜，大多數(shù)網(wǎng)站都用元素選擇器來(lái)重置瀏覽器自帶的屬性。這些在一些特定的網(wǎng)站中都通常用來(lái)設(shè)置網(wǎng)站的基本樣式，也將導(dǎo)至這些元素選擇器至少多次被選中。

CSS主要是將一個(gè)HTML結(jié)構(gòu)變成一個(gè)正確顯示的頁(yè)面。CSS是一種允滿怪癖和有很多不可預(yù)測(cè)的行為的語(yǔ)言，因此，通常情況之下，開發(fā)人員（后端程序開發(fā)人員）最討討厭使用他來(lái)做任務(wù)。

過(guò)去幾年，市場(chǎng)上明顯出現(xiàn)很多框架和工具，用來(lái)幫助大家少寫CSS代碼和減少編寫CSS時(shí)產(chǎn)生的錯(cuò)誤。而Sass和LESS這樣的預(yù)處理器更是普遍的運(yùn)用于Bootstrap、Foundation、Bourbon、Susy和Unsemantic等框架之中。

瀏覽器也發(fā)生了很多變化，在現(xiàn)代瀏覽器中使用CSS3的一些樣式規(guī)則不再需要添加瀏覽器特定的前綴。在前些年，最佳實(shí)踐是，瀏覽器的前綴要不要取決于站點(diǎn)對(duì)瀏覽器的支持。

這個(gè)調(diào)查來(lái)自于8000多個(gè)網(wǎng)站，并且下載了他們的CSS文件，做為分析如何書寫CSS和使用CSS的數(shù)據(jù)。我認(rèn)為這對(duì)于如何向前推動(dòng)相關(guān)組織、思考和管理更大的CSS項(xiàng)目是非常有用的。以及可以看看網(wǎng)絡(luò)是如何演變的。

方法

我想具有廣泛的代表性樣本應(yīng)該與那些大型網(wǎng)站開發(fā)團(tuán)隊(duì)、常時(shí)間存在的網(wǎng)站和一批具有熱情的業(yè)余愛(ài)好者在不斷更新的屬性。

我首先在Alexa網(wǎng)站上搜集了1000個(gè)網(wǎng)站，這些網(wǎng)站都是流行的大網(wǎng)站。他們提供了一個(gè)CSV報(bào)告，報(bào)告了排名前100萬(wàn)流量的網(wǎng)站，所以我選擇了前1000名。

我為隨機(jī)抽樣制定了一個(gè)郵件列表，這個(gè)列表包括了過(guò)去的、潛在客戶、員工、愛(ài)好者以及來(lái)自其他世界的各地人民。但我認(rèn)識(shí)，只是隨機(jī)抽取Alexa列表中的前百萬(wàn)流量的網(wǎng)站，即使這些來(lái)自于大型網(wǎng)站，可是與全世界大約2.71億域名注冊(cè)商相比，我希望我的郵件列表能得到一個(gè)更好的樣品，其中能包括MVPs，個(gè)人網(wǎng)站和其他網(wǎng)站。

最后我的列表中包括了10400個(gè)具有代表性的網(wǎng)站，從這些域名中我下載了他們主頁(yè)中的CSS樣式文件：

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

從10400個(gè)網(wǎng)站首頁(yè)中，我總共收集了大約28000個(gè)CSS樣式文件。這是貫穿一個(gè)CSS解析器節(jié)點(diǎn)模塊，讓我節(jié)省大約包括選擇器、屬性和屬性值（比如：span.important，font-weight,bold）870萬(wàn)條記錄。這些都保存在Postgres，并為閱讀提供了大量的索引。

總結(jié)數(shù)據(jù) 屬性

屬性	情況
聲明獨(dú)特的CSS屬性	1528
排在前五的屬性	color，width，display，content，background-color
常見(jiàn)50個(gè)屬性占總額的百分比	85%
有效的樣式屬性（根據(jù)CSS規(guī)范）	79(不包括特定的前綴，使用這個(gè)數(shù)字最高)
許多獨(dú)特風(fēng)格樣式屬性（有效，其他）	372
不識(shí)別樣式屬性	83個(gè)錯(cuò)誤，大約210個(gè)未知屬性
帶*的Hack	在59個(gè)屬性中使用了70808次，最常見(jiàn)的是* zoom
強(qiáng)調(diào)Hack	48個(gè)屬性使用2127次,最常見(jiàn)的是_font-family
帶瀏覽器前綴	609000或大約7%

使用CSS屬性的分布接近一個(gè)典型的帕累托分布。似乎那些古怪的屬性遞減，并在圖的末尾上。而常用的50個(gè)屬性應(yīng)該是任何初學(xué)者的首要任務(wù)。

輸入錯(cuò)誤和無(wú)效的樣式規(guī)則也是非常有趣的。令人感到吃驚的，這些規(guī)則類型，檢查，在瀏覽器中是沒(méi)有效果的，因?yàn)樗x開樣式表，并不會(huì)在生產(chǎn)中起效。我最容易拼錯(cuò)的屬性有bototm、foat和heith等。

選擇器

選擇器	情況
最常用的五個(gè)選擇器	body，textarea，h1，pre,h2
最長(zhǎng)的選擇器	.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個(gè)字符
選擇器中包括一個(gè)#id占比	13.7%
選擇器中包括一個(gè).class占比	84.1%
選擇器中包括一個(gè):pseudo-selector占比	20.4%
選擇器中包括一個(gè)::pseudo-element-selector占比	0.3%
選擇器中僅使用元素的占比	7.5%

CSS選擇器通常較短，也存在一些明顯的異常。簡(jiǎn)潔的選擇器常被認(rèn)為是好的，做為整體布局中的一個(gè)元素來(lái)說(shuō)，應(yīng)該分層。BEM系統(tǒng)對(duì)這方面做過(guò)詳細(xì)的闡述。一般來(lái)說(shuō)，很長(zhǎng)的選擇器和特殊的選擇器都會(huì)被禁止重用，以及一組重新的CSS風(fēng)格會(huì)被認(rèn)為是一個(gè)全局的CSS。

常用的選擇器會(huì)有類選擇器和元素選擇器，比如說(shuō)body這樣的選擇器就很常見(jiàn)。我猜，大多數(shù)網(wǎng)站都用元素選擇器來(lái)重置瀏覽器自帶的屬性。這些在一些特定的網(wǎng)站中都通常用來(lái)設(shè)置網(wǎng)站的CSS基本樣式，也將導(dǎo)至這些元素選擇器至少多次被選中。

漸進(jìn)增強(qiáng) 使用前綴

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

對(duì)于能自動(dòng)更新版本的現(xiàn)代瀏覽器，不再需要特定的瀏覽器前綴。而在所有CSS3屬性中還是依舊頻繁的使用瀏覽器的前綴：-webkit，-moz，-o和-ms，以保證瀏覽器對(duì)其正確的渲染。

許多IDE，CSS框架和在線生成器都可以幫你自動(dòng)生成瀏覽器前綴。這樣開發(fā)者就可以擺脫這種額外的工作與不習(xí)慣。如果你想確保哪些屬性還需要依賴于前綴來(lái)工作，可以通過(guò)CanIuse查詢。

我看見(jiàn)許多年長(zhǎng)的前輩們還是在使用和_這樣的瀏覽器Hack來(lái)解決IE某些版本的兼容問(wèn)題。早在2008年P(guān)aul Lrish就提出替代方案，即使用IE條件樣式來(lái)替代這些Hack。而在當(dāng)你趕時(shí)間的時(shí)候，很容易忽略這些方法，以至于和_這樣的Hack持續(xù)在使用。

顏色 最常用的幾種顏色：

十六進(jìn)制代碼提供了16 6的顏色，而常見(jiàn)的顏色都很可能是灰色。R==G==B。灰色將占大多數(shù)字體顏色，邊框顏色和各種盒子陰影顏色。而品牌顏色(brand colors)在網(wǎng)站中我唯一不希望看到的是排在前十名的灰色。

在2014年11月,Bootstrap中提供的變量$brand-primary的值是#428bca，在Brand中使用的是藍(lán)色，隨后很多項(xiàng)目都使用這個(gè)顏色，也這表明了這個(gè)框架是多么的流行。

顏色單位

單位	數(shù)量	所占百分比
Hex	1113681	99.6%
rgb/rgba	49789	0.4%
hsl/hsla	121	0.001%

大多數(shù)都認(rèn)為rgb是rgba和hsl是hsla。他們通常不透明度就是灰度的變體。這也是有道理的，因?yàn)槠渲饕獌?yōu)勢(shì)就是這些格式提供了alpha的透明通道。

平均下來(lái)文件中聲明了169種顏色。有幾個(gè)下載下來(lái)的頁(yè)面文件，顏色的格式使用了變量，保持了網(wǎng)站主題的一致性。

單位

單位名稱	數(shù)量	所占百分比
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大小屬性中有大量的可用選項(xiàng)。每個(gè)單位都有自己的利與弊:有一些適應(yīng)于響應(yīng)式布局，有一些適用于打印樣式中。大部分都是使用絕對(duì)單位px和相對(duì)單位%。必須要指出的時(shí)，瀏覽器對(duì)那些更深?yuàn)W的單位支持度并不普遍。

文本和字體

有一種網(wǎng)格排版，可以幫助網(wǎng)站感覺(jué)很清爽，并且更易于閱讀。層次有助于設(shè)計(jì)和用戶讀取內(nèi)容。從大量的網(wǎng)站中的樣式聲明中可以發(fā)現(xiàn)，大約有31種不同的字體大小聲明。

每個(gè)網(wǎng)站都有相當(dāng)多的字體大小變量。無(wú)法弄清楚有多少字體用于主頁(yè)或有多少特殊情況用于其他地方。一些漂亮的網(wǎng)站似乎都集中了大約20種字體。我的觀點(diǎn)是，一般選擇字體大小比較少。它通過(guò)加粗來(lái)加強(qiáng)設(shè)計(jì)的凝聚力。這樣更易于開發(fā)人員和設(shè)計(jì)人員之間有一個(gè)良好的切換過(guò)程。

響應(yīng)式設(shè)計(jì)

自從2014年Ethan Marcotte首次提出響應(yīng)式設(shè)計(jì)的概念，到目前為止使用CSS媒體查詢制作的響應(yīng)式設(shè)計(jì)的網(wǎng)站已席卷了64%的網(wǎng)站。

IE9也開始支持媒體查詢，他讓你可根據(jù)視窗尺寸，方向和高寬比提供不同樣式，使用響應(yīng)式設(shè)計(jì)更具有意義。

最常見(jiàn)的查詢條件是min-width或max-width，代表了89%的媒體查詢。下面是最常見(jiàn)的寬度，讓開發(fā)者在寫樣式時(shí)有一個(gè)較好的參考：

曲線在990px范圍最寬，有許多使用的是960px，970px，980px，990px，992px，1000px和1024px。其中綠色線表示的領(lǐng)域，代表斷點(diǎn)使用較少的。

不同的人選擇的在設(shè)備上顯示的斷點(diǎn)是不一樣的，這得根據(jù)他們自身的選擇。但代表智能手機(jī)，平板和桌面的斷點(diǎn)似乎越來(lái)越得到更多人的共識(shí)。僅供參考的斷點(diǎn)是768px，992px和1200px。而在Bootstrap中默認(rèn)的斷點(diǎn)是智能設(shè)略寬度。這里還有一些其他設(shè)備下的斷點(diǎn)寬度。

框架的使用 常用的框架

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

很難確定使用的框架。我使用搜索文件名，注釋和獨(dú)特的類名，才整理出上面的相關(guān)數(shù)據(jù)。這份報(bào)告中有關(guān)于框架的使用有點(diǎn)唐突魯莽，但可以說(shuō)明的是，Bootstrap是處于絕對(duì)領(lǐng)先地位。大概只有10%的網(wǎng)站可以識(shí)別使用了框架。

Assets

通過(guò)CSS可以下載特定的資源，通常可以看到的是background-image。在我們研究中，下面是最常見(jiàn)的文件格式：

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

這些結(jié)果是一個(gè)好的跡象。.png文件在網(wǎng)絡(luò)上一般建議使用非攝影圖像。它提供了alpha透明度，有良好的壓縮率和瀏覽器對(duì)其廣泛的支持度。我確信.jpg文件在網(wǎng)絡(luò)上越來(lái)越普遍，但一般用在的src屬性中，而不是在CSS中使用。

顏色名稱

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

總結(jié)

仔細(xì)閱讀相關(guān)數(shù)據(jù)之后，然做了一些總結(jié)：

人們使用CSS較為草率

維護(hù)良好的樣式規(guī)范可以解決很多常見(jiàn)問(wèn)題

現(xiàn)代的CSS特性被廣泛使用

一個(gè)公司能做的最好的是有一個(gè)對(duì)CSS審查的工作（尤其是越來(lái)越多的人參與編寫CSS時(shí)）。這將有助于確定過(guò)去的錯(cuò)誤，并將工具集成到你的工作流中，以防止錯(cuò)誤繼續(xù)發(fā)生。詳細(xì)可以閱讀CSS審查相關(guān)文章。

保持一個(gè)有順序的CSS和保持代碼干凈是一樣的重要，這樣更有利于代碼的測(cè)試。我認(rèn)為不好的CSS可以延緩開發(fā)人員的進(jìn)度。為了給他們提供更多的時(shí)間去專注的做更有意義的事情，應(yīng)該讓你的團(tuán)隊(duì)保持CSS的清潔，并且更好的組織你的CSS代碼。

本文根據(jù)Alex McPherson的《The 2014 CSS Report:Examining how CSS is being used in the wild》所譯
譯文出處：2014年CSS報(bào)告——考察如何使用CSS