BBC嚴(yán)格的CSS編碼規(guī)範(fàn)詳解

本文探討B(tài)BC的CSS編碼規(guī)範(fàn)，其嚴(yán)格程度在業(yè)界聞名，強(qiáng)調(diào)最佳實(shí)踐、無CSS/JS支持下的可讀性以及W3C標(biāo)準(zhǔn)的遵守。

核心要點(diǎn)：

• BBC的CSS規(guī)範(fàn)以最佳實(shí)踐為核心，注重代碼可讀性，即使在禁用CSS和JavaScript的情況下也能保證網(wǎng)頁內(nèi)容的可訪問性，並嚴(yán)格遵循已發(fā)布的W3C建議。
• 規(guī)範(fàn)包含具體規(guī)則，例如禁止使用!important，強(qiáng)制要求頁面背景顏色，以及使用壓縮的外部樣式表。內(nèi)聯(lián)樣式被禁止，外部CSS文件不能使用@import加載，以避免潛在的瀏覽器緩存問題。
• 儘管對(duì)新手開發(fā)者來說可能具有挑戰(zhàn)性，但這些指南提供了完善的文檔，有助於避免基本的可用性錯(cuò)誤。該規(guī)範(fàn)還通過清晰的命名約定、供應(yīng)商前綴的使用以及關(guān)於CSS文件註釋和組織的建議，促進(jìn)了簡(jiǎn)潔、高效和易於維護(hù)的代碼。

通用CSS原則:

BBC使用XHTML 1.0 Strict作為內(nèi)容載體，指南規(guī)定網(wǎng)頁內(nèi)容必須在不啟用CSS或JavaScript的情況下可讀。許多開發(fā)者為了快速添加最新的jQuery小部件而忽略了這一點(diǎn)。大多數(shù)瀏覽器（或Web Developer Toolbar等擴(kuò)展程序）允許禁用CSS和腳本。如果內(nèi)容不可讀，那麼Google和屏幕閱讀器也無法讀取它。根據(jù)指南，所有CSS都必須符合已發(fā)布的W3C建議。這可能會(huì)導(dǎo)致一些問題，因?yàn)樗坪跖懦斯?yīng)商前綴屬性，例如-moz-border-radius和-webkit-box-shadow。然而，BBC網(wǎng)站確實(shí)謹(jǐn)慎地使用了它們。 !important被禁止，因?yàn)樗鼤?huì)覆蓋用戶樣式。這有點(diǎn)苛刻，因?yàn)樗鼘?duì)IE6修復(fù)很有用。話雖如此，當(dāng)應(yīng)該解決級(jí)聯(lián)問題的根本原因時(shí)，我也曾濫用它來進(jìn)行快速而簡(jiǎn)陋的修改。最後，如果你已經(jīng)放棄了IE6，請(qǐng)為仍在IE5.5中進(jìn)行測(cè)試的BBC編碼人員考慮一下！ IE5.5中的CSS尤其糟糕：它試圖解析屬性，但卻慘遭失敗。

CSS實(shí)現(xiàn):

所有CSS都以壓縮的外部樣式表的形式實(shí)現(xiàn)，儘管當(dāng)某個(gè)規(guī)則對(duì)特定頁面必需時(shí)，HTML頭部中的CSS是允許的。內(nèi)聯(lián)樣式被禁止。這很好。任何被發(fā)現(xiàn)使用內(nèi)聯(lián)樣式的編碼人員都應(yīng)該吊銷其Web開發(fā)許可證！有趣的是，外部CSS文件不能使用@import加載，因?yàn)樗鼤?huì)影響瀏覽器緩存。是這樣嗎？我懷疑在現(xiàn)代瀏覽器中情況已不再如此。

排版和顏色:

必須在所有font-family屬性的末尾添加一個(gè)通用的字體名稱（serif、sans-serif、cursive或monospace）。同樣，這是開發(fā)人員經(jīng)常忘記的事情：並非每個(gè)人的電腦上都有Arial或Helvetica。我喜歡這個(gè)雙重否定規(guī)則：> 排版大小不得使用在所有瀏覽器中不可調(diào)整大小的單位，例如px和pt，打印樣式表除外。

BBC建議使用em、%或關(guān)鍵字值，並且在任何一級(jí)瀏覽器中將大小增加兩步後，文本必須保持可讀性。我敢打賭，這將是一場(chǎng)測(cè)試噩夢(mèng)！最後，開發(fā)人員必須定義頁面背景顏色。在我的一臺(tái)電腦上，默認(rèn)背景色設(shè)置為令人作嘔的綠色後，我就把這條規(guī)則紋在了我的額頭上。

開發(fā)者天堂還是地獄？

如果您在該行業(yè)工作了一段時(shí)間，您可能已經(jīng)吸收了BBC制定的許多指南。但是，新的開發(fā)者如何應(yīng)對(duì)呢？積極的一面是，這些期望是有據(jù)可查的，它可以幫助編碼人員避免基本的可用性錯(cuò)誤。然而，開發(fā)本身就足夠艱難了——大多數(shù)人難以應(yīng)付為24種相互關(guān)聯(lián)的技術(shù)定義的多個(gè)規(guī)則和規(guī)章。您的公司是否執(zhí)行嚴(yán)格的編碼指南？它們是鐵板一塊還是相當(dāng)靈活？它們是合理的還是荒謬的？它們是否定期更新，或者您仍在為Netscape 3.0編寫代碼？指南是否有助於或阻礙您的日常開發(fā)任務(wù)？我還想聽取BBC任何開發(fā)人員的意見……您是否嚴(yán)格遵守規(guī)則，或者在經(jīng)理不在時(shí)偷偷使用了!important？

(以下為FAQ部分，與原文保持一致，不再進(jìn)行偽原創(chuàng))

What are the key differences between BBC’s CSS coding standards and other popular standards like Google or WordPress?

The BBC’s CSS coding standards are designed to ensure consistency and readability across all their digital content. They emphasize the use of lowercase, hyphen-separated class and ID names, and discourage the use of ID selectors for styling. On the other hand, Google’s style guide encourages the use of meaningful or generic ID and class names, and WordPress’s standards recommend specific naming conventions for classes and IDs. Each of these standards has its own unique approach, but all aim to promote clean, efficient, and maintainable code.

How does the BBC’s CSS coding standards handle vendor prefixes?

The BBC’s CSS coding standards recommend using vendor prefixes for CSS properties that are not yet standardized or fully supported across all browsers. This ensures that the CSS code will work correctly across different browsers, even if they interpret certain CSS properties differently. This is a common practice in many CSS coding standards, including those of Google and Mozilla.

BBC在CSS中使用速記屬性的立場(chǎng)是什麼？ BBC的CSS編碼標(biāo)準(zhǔn)在可能的情況下鼓勵(lì)使用速記屬性。這是為了保持代碼簡(jiǎn)潔且易於閱讀。但是，他們還警告開發(fā)人員充分了解速記屬性的含義，因?yàn)槿绻徽_使用，有時(shí)會(huì)導(dǎo)致意外結(jié)果。

BBC的CSS編碼標(biāo)準(zhǔn)如何在CSS中評(píng)論？ BBC的CSS編碼標(biāo)準(zhǔn)建議使用註釋來解釋代碼的目的和功能。他們建議使用註釋將CSS文件的各節(jié)分開，並為複雜或不尋常的代碼提供上下文。這符合編碼標(biāo)準(zhǔn)的最佳實(shí)踐，因?yàn)樵u(píng)論可以極大地提高代碼的可讀性和可維護(hù)。

BBC訂購(gòu)CSS屬性的指南是什麼？

> BBC的CSS編碼標(biāo)準(zhǔn)沒有為CSS屬性指定特定順序。但是，他們確實(shí)建議將相關(guān)屬性分組在一起以提高可讀性。在許多CSS編碼標(biāo)準(zhǔn)中，這是一種常見的做法，因?yàn)樗勾a更易於理解和維護(hù)。

BBC的CSS編碼標(biāo)準(zhǔn)如何處理CSS選擇器？ BBC的CSS編碼標(biāo)準(zhǔn)建議使用ID選擇器上的類選擇器進(jìn)行造型，因?yàn)樗鼈兏`活，可以重複使用。他們還不鼓勵(lì)使用過度特定的選擇器，因?yàn)樗鼈兛梢允勾a更難維護(hù)並可能導(dǎo)致不必要的複雜性。

在CSS中，BBC對(duì)使用的立場(chǎng)是什麼？ BBC的CSS編碼標(biāo)準(zhǔn)不鼓勵(lì)使用！他們建議使用更多特定的選擇器或重新排序CSS規(guī)則。在許多CSS編碼標(biāo)準(zhǔn)中，這是一個(gè)常見的建議，因?yàn)橹匾氖褂猛ǔ？赡苁荂SS架構(gòu)差的標(biāo)誌。

> BBC的CSS編碼標(biāo)準(zhǔn)如何使用媒體查詢的使用？ BBC的CSS編碼標(biāo)準(zhǔn)建議使用媒體查詢使網(wǎng)站響應(yīng)迅速並確保其在不同設(shè)備上正確顯示。他們建議將媒體查詢放置在CSS文件的末尾，並根據(jù)視口寬度將其從最小到最大的組織。

。

BBC的CSS文件組織指南是什麼？ BBC的CSS編碼標(biāo)準(zhǔn)建議以邏輯和一致的方式組織CSS文件。他們建議將CSS文件的不同部分與註釋分開，並將相關(guān)屬性分組在一起。這可以大大提高代碼的可讀性和可維護(hù)性。

BBC的CSS編碼標(biāo)準(zhǔn)如何處理CSS動(dòng)畫和過渡？ BBC的CSS編碼標(biāo)準(zhǔn)建議使用CSS動(dòng)畫並謹(jǐn)慎使用過渡，因?yàn)樗鼈冇袝r(shí)會(huì)導(dǎo)致性能問題，因此建議使用CSS動(dòng)畫和過渡。他們建議僅在必要時(shí)使用它們，並在添加動(dòng)畫或過渡後始終測(cè)試網(wǎng)站的性能。 >

以上是您是否遵守嚴(yán)格的BBC風(fēng)格的CSS編碼標(biāo)準(zhǔn)？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！