在這篇文章中，我想跟你分享 20 條由 CSS 社區(qū)推薦的約定和最佳實(shí)踐。有些建議可能比較適合新手，而有些則更高級(jí)一些，但我希望每個(gè)人都可以在本篇文章中收獲自己不知道的知識(shí)。01、謹(jǐn)慎使用外邊距屬性與其它的屬性不同，垂直方向上的外邊距相遇時(shí)將會(huì)發(fā)生折疊。這意味著如果一個(gè)元素的下邊距遇到了另一個(gè)元素的上邊距，那么二者中較大的一個(gè)將被留下。下面是一個(gè)簡(jiǎn)單的例子。???? .square { width: 80px;????????height:?80px;????} .red { background-color: #F44336;????????margin-bottom:?40px;????}????.blue?{????????background-color:?#2196F3;????????margin-top:?30px; }其實(shí)上述兩個(gè)元素在垂直方向上的距離并不是 70px， 而是 40px， 藍(lán)色正方形的 margin 沒有被計(jì)算在內(nèi)。有很多的方法消除這種默認(rèn)的行為，但最好的方法是只使用一個(gè)方向上的 margin 屬性，比如說 margin-bottom 。02、利用盒子模型布局盒子模型自然有其存在的理由。float 和 inline-block 當(dāng)然也可以工作，但它們都是樣式化文檔的基礎(chǔ)工具，而不是整個(gè)網(wǎng)站。從某種意義來說， Flexbox 是為更容易更精確創(chuàng)建我們想要的布局而設(shè)計(jì)的。Flexbox 模型提供的一系列屬性給了開發(fā)者更大的靈活性，而且你一旦熟悉了它們，那創(chuàng)建任何響應(yīng)式布局都是輕而易舉的事。瀏覽器對(duì) Flexbox 的支持也已經(jīng)接近完美，所以已經(jīng)沒有什么理由能夠阻止你使用 Flexbox 了。.container?{????????display:?flex;????????/*?Don't?forget?to?add?prefixes?for?Safari?*/????????display:?-webkit-flex; }03、執(zhí)行 CSS 重置盡管這些年來情形已經(jīng)有所好轉(zhuǎn)，但是各瀏覽器的默認(rèn)行為還是存在很多分歧。解決這個(gè)問題最好的辦法就是使用一個(gè) CSS 重置文件為所有元素重新設(shè)置默認(rèn)樣式。這可以讓你在一個(gè)純凈的樣式環(huán)境下工作，并且在所有瀏覽器中產(chǎn)生相同的結(jié)果。有很多的庫做這個(gè)工作做的非常不錯(cuò)，比如 normalize.css, minireset, 和 ress， 糾正了瀏覽器間的不一致。如果你不想使用庫，你也可以自己制作一個(gè)簡(jiǎn)單的 CSS 重置，像下面這樣。?*?{????????margin:?0;????????padding:?0;????????box-sizing:?border-box; }這可能看上去比較苛刻，但是消除了默認(rèn)的 margin 和 padding 我們將更容易的擺放我們的元素，而不用擔(dān)心它會(huì)占用額外的空間。box-sizing: border-box 是一個(gè)很受用的屬性，我們將在下面介紹這個(gè)屬性。04、為所有元素使用 Border-box許多初學(xué)者不知道 box-sizing 屬性，但它的確很重要。了解它的最好辦法就是看看它的兩個(gè)可選值。content-box(default) - 當(dāng)我們?yōu)樵卦O(shè)置了寬度和高度，但那只是內(nèi)容的尺寸。所有的 padding 和 border 都在不包含在內(nèi)容當(dāng)中，也就是在內(nèi)容的外部。舉例來說，如果我們有一個(gè) div它的寬度為 100px， padding 為 10px, 那么它的實(shí)際寬度為 120px。border-box - padding和 border 被包含在 寬度和高度當(dāng)中。如果一個(gè) div 的寬度為 100px ，而被設(shè)置了 box-sizing: border-box， 那么它的寬度將始終是 100px， 無論你添加多少 padding 和 border 。為所有元素設(shè)置 border-box 將有利于樣式化，而且你在也不用做乏味的數(shù)學(xué)運(yùn)算了。05、圖像作為背景當(dāng)你為自己的站點(diǎn)添加圖片時(shí)，尤其是你想做響應(yīng)式設(shè)計(jì)的時(shí)候，利用一個(gè) div 標(biāo)簽并為其設(shè)置 background 屬性，而不是使用 元素。似乎額外的工作并沒有起到任何作用，但實(shí)際上這更利于你對(duì)圖片設(shè)置樣式，保持它們?cè)械某叽缁蛘吒鶕?jù)比例變化，這需要借助 background-size，background-size 還有一些其它的屬性。????????

Img?element

????????????????????????

Div?with?background?image

????????????????img?{????????width:?300px;????????height:?200px;????}????div?{????????width:?300px;????????height:?200px;????????background:?url('');????????background-position:?center?center;????????background-size:?cover;????}????section{????????float:?left;????????margin:?15px; }這種技術(shù)的一個(gè)缺點(diǎn)是你頁面的可訪問性可能略有打擊，因?yàn)槟愕膱D片不會(huì)被屏幕閱讀器和引擎正確抓取。這個(gè)問題可以被 object-fit 解決，但它還不被所有瀏覽器支持。06、更好的 Table 邊框HTML 中的 table 沒什么意思。它們非常古怪，難以設(shè)計(jì)成響應(yīng)式的，而且很難與整體風(fēng)格一致。比如說，你想為 table 和其中的元素添加上邊框，你可能會(huì)得到下面的結(jié)果。正如你所見到的，它有很多重復(fù)的邊框而且看起來不是很好，有一個(gè)非常快速且簡(jiǎn)單的去除雙邊框的方法，就是將 border-collapse: collapse 添加到 table.這樣看起來就好多了。07、更好的注釋方式CSS 可能不是一門編程語言但它的代碼仍然需要被記錄，所以一些簡(jiǎn)單的注釋將會(huì)對(duì)你的同事或者未來的自己很有幫助！對(duì)于 CSS 中的一些比較大的模塊，比如主要模塊或者媒體查詢，使用風(fēng)格化的注釋并且在其后留下一些空行。????/*---------------????????#Header????---------------*/????header?{?}????header?nav?{?}????/*---------------????????#Slideshow????---------------*/.slideshow { }設(shè)計(jì)中的一些細(xì)節(jié)或那些不是特別重要的模塊，可以用單行注釋。/*???Footer?Buttons???*/????.footer?button?{?}.footer button:hover { }另外，值得注意的是，CSS 中沒有 // 注釋，所以當(dāng)你需要注釋的時(shí)候你需要使用 /* */ 符號(hào)。/* Do */ p { padding: 15px;/*border: 1px solid #222;*/ }/* Don't */ p {padding: 15px;// border: 1px solid #222; }08、命名連接當(dāng) class 或者 id 不止一個(gè)單詞的時(shí)候，需要使用 - 符號(hào)連接， ?CSS 對(duì)大小寫不敏感，所以駱駝命名法不是一個(gè)好的選擇。很久以前，下劃線不被支持所以破折號(hào)成為了默認(rèn)約定。/* Do */.footer-column-left { }/* Don't */.footerColumnLeft { }.footer_column_left { }09、不要重復(fù)設(shè)置CSS 的許多屬性值都是從 DOM 樹中的上一級(jí)繼承下來的，因此命名為層疊樣式表。讓我們以 font 為例 - 它幾乎總是繼承自父節(jié)點(diǎn)，你不需要為頁面中的每一個(gè)元素設(shè)置該屬性。你只需要為 或者 設(shè)置 font 樣式，然后讓它一級(jí)一級(jí)流傳下去就可以了。下面是一個(gè)很好的例子。html {font: normal 16px/1.4 sans-serif; }當(dāng)然，在任何一個(gè)子元素中你都可以按照自己的需求改變這一樣式。我要說的就是能使用繼承獲得的屬性就不要再去一一指定了。10、CSS 動(dòng)畫與變換不要通過直接更改元素的寬度和高度去動(dòng)畫元素，或者是更改 left/right/top/bottom。最好的辦法是使用 transform() 屬性因?yàn)樗峁┝烁訄A滑的過渡效果而且可以讓你的意圖在閱讀代碼時(shí)更加易于理解。下面是一個(gè)例子，我們想動(dòng)畫一個(gè) ball，讓它往右滑動(dòng)。不要去改變 left 的值，最好是使用 translateX() 。.ball {left: 50px;transition: 0.4s ease-out; }/* Not Cool*/.ball.slide-out {left: 500px; }/* Cool*/.ball.slide-out {transform: translateX(450px); }transform 以及它的所有方法(translate, rotate, scale 等)擁有幾乎一致的瀏覽器兼容性，你可以自由使用它們。11、不要 DIY, 使用庫CSS 社區(qū)非常的龐大而且不斷出現(xiàn)新的庫。庫被提供于各種用途，從小片段到完善的框架，用于構(gòu)建響應(yīng)式程序，而且它們當(dāng)中大部分都是開源的。所以下次當(dāng)你碰到 CSS 問題的時(shí)候，在你想自己動(dòng)手去解決問題的時(shí)候，最好先去 Github 或者 CodePen 找找是否已經(jīng)存在可用的解決方案。12、保持選擇器的特指度低不是所有 CSS 選擇器都是生而相等的，當(dāng)新手開發(fā)者書寫 CSS 代碼的時(shí)候通常期望它們寫的選擇器能夠覆蓋之前所有已存在的樣式。但是事情并不總像我們想的那樣，就像下面這個(gè)例子：a{color: #fff;padding: 15px; }a#blue-btn {background-color: blue; }a.active {background-color: red; }我們想為所有按鈕添加 .active 類使其變?yōu)榧t色，但這是不起作用的，因?yàn)榘粹o已經(jīng)被一個(gè) id 選擇器設(shè)置了 background-color，而 id 選擇器具有更高的特指度。它們之間的規(guī)則就像下面這樣：ID (#id) > Class (.class) > Type (比如 header)。特指度是可以堆疊的，所以 a#button.active 的特指度是高于 a#button 的。使用特指度高的選擇器將使你不斷的使用更高的去覆蓋那些原本存在的選擇器，這將最終導(dǎo)致 !important 效果。13、不要使用 !important很認(rèn)真的告訴你，不要使用 !important。即時(shí)的一個(gè)快速修復(fù)在將來可能導(dǎo)致大量的重寫。相反，找出你 CSS 選擇器不工作的原因，并且嘗試去修復(fù)它。只有在一種情景中使用 !important 是可以接受的，那就是你想覆蓋那些在 HTML 中定義的行內(nèi)樣式。而且書寫行內(nèi)樣式也是一種非常糟糕的方式，建議停止使用。14、使用 text-transform在 HTML 中，當(dāng)你使用大寫字母的時(shí)候可能是出于某種語義目的，比如說你想強(qiáng)調(diào)一個(gè)單詞的重要性。

Employees MUST wear a helmet!

如果出于某種目的你將一組文本都設(shè)置成大寫，可以在 HTML 中正常書寫文本，然后利用 CSS 轉(zhuǎn)換其大小寫。它們看起來都是一樣的，但是如果不在上下文中，你的內(nèi)容將更有意義。Star Wars: The Force Awakens .movie-poster { text-transform: uppercase;}這同樣適用于大寫或者小寫的字符串 - text-transform 屬性可以將它們處理的很好。15、Em， Rem 和 Pixel人們?cè)趯?duì)元素和文本設(shè)置尺寸應(yīng)該用 em，rem 還是 px 有很多的爭(zhēng)論。事實(shí)是，這三者都是可行的，有自己的優(yōu)點(diǎn)和缺點(diǎn)。所有的開發(fā)者和項(xiàng)目都是不同的，所以不應(yīng)該有什么嚴(yán)格的規(guī)則說明什么時(shí)候該用哪一種。下面是一些提示和良好的做法：em - 1 em 的大小與直接父元素的字體大小有關(guān)。通常用于媒體查詢，em 對(duì)響應(yīng)式設(shè)計(jì)而言是非常棒的 ，但是將每個(gè)元素的 em 值轉(zhuǎn)換為 px 的比例是非常難以計(jì)算的，因?yàn)槟憧赡芤?DOM 樹上逐級(jí)跟蹤元素。rem - 以 元素中的 font-size 為基準(zhǔn)， rem 將比例化頁面中的標(biāo)題和段落變得很容易。保持 中默認(rèn)的 font-size 并且為其它的元素設(shè)置 rem 是一種非常棒的方法。px - 像素是最精確的控制方式，但是在 響應(yīng)式設(shè)計(jì)中它并不友好，因?yàn)樗粫?huì)隨屏幕大小變化而自動(dòng)縮放。它們是可靠的，易于理解的，并且在值和實(shí)際結(jié)果之間呈現(xiàn)出良好的視覺聯(lián)系。下面我要說的是，不要害怕嘗試。去使用它們并且找出哪一種是你最喜歡的。有時(shí)候 em 和 rem 很省事，尤其對(duì)于響應(yīng)式界面。16、在大項(xiàng)目中使用預(yù)處理器你可能已經(jīng)聽說過它們了 - Sass, Less, PostCSS, Stylus 。預(yù)處理器是 CSS 發(fā)展的下一階段。它們提供的功能諸如變量， CSS 函數(shù)，選擇器嵌套以及其它一些非常酷的東西。這使得 CSS 代碼非常易于管理，尤其在大項(xiàng)目中。舉個(gè)簡(jiǎn)單的例子，下面是使用了 CSS 變量和函數(shù)的 Sass 代碼片段。$accent-color: #2196F3; a { padding: 10px 15px; background-color: $accent-color; } a:hover { background-color: darken($accent-color,10%); }使用 CSS 預(yù)處理器的唯一缺點(diǎn)是，它們需要編譯成真正的 CSS 代碼，但是如果你已經(jīng)決定在你的項(xiàng)目中使用一個(gè)構(gòu)建腳本，那么這就不再是你應(yīng)該煩惱的問題了。如果你想了解更多關(guān)于預(yù)處理器的知識(shí)，請(qǐng)查看目前最受歡迎的兩個(gè)系統(tǒng)的教程 - Sass 和 Less。17、Autoprefixers為各個(gè)瀏覽器添加前綴算得上是書寫 CSS 代碼最惱人的問題了。它們不一致，你永遠(yuǎn)無法精確的你需要哪一個(gè)，而且如果你真的去一個(gè)個(gè)適配并將它們都放到樣式表中，你會(huì)發(fā)現(xiàn)這是一場(chǎng)噩夢(mèng)。感謝上天，有很多工具可以自動(dòng)的幫你實(shí)現(xiàn)這一過程，甚至可以讓你指定你需要支持的瀏覽器 ：在線工具：Autoprefixer文本編輯器插件 - Sublime Text, Atom庫 - Autoprefixer18、在項(xiàng)目中使用精簡(jiǎn)代碼為了提高網(wǎng)站或app的頁面加載速度我們需要總是使用精簡(jiǎn)代碼 . 代碼的精簡(jiǎn)版本會(huì)移除掉空白和重復(fù)的部分,這樣會(huì)削減文件的大小. 當(dāng)然,這樣的話你的 CSS 代碼將會(huì)變得非常難以閱讀,所以最好總是提供一個(gè) .min 的精簡(jiǎn)版本和一個(gè)常規(guī)的發(fā)展版本.有很多不同的方法去精簡(jiǎn) CSS 代碼 :

• 在線工具 - CSS Minifier, CSS Compressor
• 文本編輯插件 - Sublime Text, Atom
• 庫 - Minfiy , CSSO 和 CSSNano

根據(jù)你的工作流程,你可以選用上述一個(gè)選項(xiàng),但是建議你總是使用某種方式自動(dòng)執(zhí)行此過程。19、Can I Use不同的瀏覽器仍然存在著很多不一致的兼容性問題, 利用 caniuse 或者其它類似的服務(wù)檢測(cè)你正在使用的屬性是否被廣泛支持, 是否需要添加前綴, 或者說是否會(huì)在某平臺(tái)下出現(xiàn) bug .僅僅檢測(cè)是否仍然是不夠的, 你仍然需要測(cè)試布局是否會(huì)無緣無故的崩潰. 充分了解用戶經(jīng)常使用的瀏覽器也會(huì)提供很大的幫助, 因此你可以看到好的支持是非常關(guān)鍵的.20、Validate驗(yàn)證 CSS 代碼可能沒有驗(yàn)證 HTML 或者 JavaScript 代碼重要, 但是在一個(gè) CSS 驗(yàn)證器上運(yùn)行你的代碼還是有幫助的, 它會(huì)提示你是否書寫了錯(cuò)誤或者比較糟糕的代碼, 甚至?xí)o出一些比較中肯的建議幫助你改進(jìn)代碼。

總結(jié)

以上是生活随笔為你收集整理的css 样式三元运算_20条书写CSS代码的建议的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。