前端實戰項目中20個CSS代碼使用注意事項
- php中世界最好的语言原創
- 2018-06-13 14:02:572442瀏覽
這次帶給大家前端實戰專案中20個CSS程式碼使用注意事項，以下就是實戰案例，一起來看一下。
01、謹慎使用外邊距屬性
#與其它的屬性不同，垂直方向上的外邊距相遇時將會發生摺疊。這意味著如果一個元素的下邊距遇到了另一個元素的上邊距，那麼二者中較大的一個將會被留下。下面是一個簡單的例子。
<p class="square red"></p>
<p class="square blue"></p>
.square {
width: 80px;
height: 80px;
}
.red {
background-color: #F44336;
margin-bottom: 40px;
}
.blue {
background-color: #2196F3;
margin-top: 30px;
}
其實上述兩個元素在垂直方向上的距離並不是 70px， 而是 40px， 藍色正方形的 margin 沒有被計算在內。有許多的方法消除這種預設的行為，但最好的方法是只使用一個方向上的 margin 屬性，比如說 margin-bottom 。
02、利用盒子模型佈局
#盒子模型自然有其存在的理由。 float 和 inline-block 當然也可以工作，但它們都是樣式化文件的基礎工具，而不是整個網站。從某種意義來說， Flexbox 是為更容易更精確地創建我們想要的佈局而設計的。
Flexbox 模型提供的一系列屬性給了開發者更大的靈活性，而且你一旦熟悉了它們，那麼創建任何響應式佈局都是輕而易舉的事。瀏覽器對 Flexbox 的支援也已經接近完美，所以已經沒有理由能夠阻止你使用 Flexbox 了。
.container {
display: flex;
/* Don't forget to add prefixes for Safari */
display: -webkit-flex;
}
03、執行CSS 重置
儘管這些年來情形已經好轉，但是各瀏覽器的預設行為還是存在很多分歧。解決這個問題最好的方法就是使用一個 CSS 重設檔案為所有元素重新設定預設樣式。這可以讓你在一個純淨的樣式環境下工作，並且在所有瀏覽器中產生相同的結果。
有很多的函式庫做這個工作做的非常不錯，像是 normalize.css, minireset, 和 ress， 修正了瀏覽器間的不一致。如果你不想使用函式庫，你也可以自己製作一個簡單的 CSS 重置，就像下面這樣。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
這可能看起來比較苛刻，但是消除了預設的 margin 和 padding 我們將更容易的擺放我們的元素，而不用擔心它會佔用額外的空間。 box-sizing: border-box 是一個很受用的屬性，我們將在下面介紹這個屬性。
04、為所有元素使用 Border-box
#許多初學者不知道 box-sizing 屬性，但它的確很重要。了解它的最好方法就是看看它的兩個可選值。
content-box(default) - 當我們為元素設定了寬度和高度，但那隻是內容的尺寸。所有的 padding 和 border 都在不包含在內容當中，也就是在內容的外部。
舉例來說，如果我們有一個 p它的寬度為 100px， padding 為 10px, 那麼它的實際寬度為 120px。
border-box - padding和 border 被包含在 寬度和高度當中。如果一個 p 的寬度為 100px ，而被設定了 box-sizing: border-box， 那麼它的寬度將永遠是 100px， 無論你添加多少 padding 和 border 。
為所有元素設定 border-box 將有利於樣式化，而且你在也不用做乏味的數學運算了。
05、圖像作為背景當你為自己的網站添加圖片時，尤其是你想做響應式設計的時候，利用一個p 標籤並為其設定background 屬性，而不是使用元素。
似乎額外的工作並沒有起到任何作用，但實際上這更利於你對圖片設定樣式，保持它們原有的尺寸或根據比例變化，這需要藉助background-size，background-size還有一些其它的屬性。
<section>
<p>Img element</p>
<img src="" alt="bicycle">
</section>
<section>
<p>p with background image</p>
<p></p>
</section>
img {
width: 300px;
height: 200px;
}
p {
width: 300px;
height: 200px;
background: url('');
background-position: center center;
background-size: cover;
}
section{
float: left;
margin: 15px;
}
這種技術的一個缺點是你頁面的可訪問性可能略有打擊，因為你的圖片不會被螢幕閱讀器和引擎正確抓取。這個問題可以被 object-fit 解決，但它還不被所有瀏覽器支援。
06、更好的 Table 邊框
HTML 中的 table 沒什麼意思。它們非常古怪，難以設計成響應式的，而且很難與整體風格一致。比方說，你想為 table 和其中的元素加上上邊框，你可能會得到下面的結果。
正如你所见到的，它有很多重复的边框而且看起来不是很好，有一个非常快速且简单的去除双边框的方法，就是将 border-collapse: collapse 添加到 table.
这样看起来就好多了。
07、更好的注释方式
CSS 可能不是一门编程语言但它的代码仍然需要被记录，所以一些简单的注释将会对你的同事或者未来的自己很有帮助！
对于 CSS 中的一些比较大的模块，比如主要模块或者媒体查询，使用风格化的注释并且在其后留下一些空行。
/*---------------
#Header
---------------*/
header { }
header nav { }
/*---------------
#Slideshow
---------------*/
.slideshow { }
设计中的一些细节或那些不是特别重要的模块，可以用单行注释。
/* Footer Buttons */
.footer button { }
.footer button:hover { }
另外，值得注意的是，CSS 中没有 // 注释，所以当你需要注释的时候你需要使用 /* */ 符号。
/* Do */
p {
padding: 15px;
/*border: 1px solid #222;*/
}
/* Don't */
p {
padding: 15px;
// border: 1px solid #222;
}
08、命名连接
当 class 或者 id 不止一个单词的时候，需要使用 - 符号连接， CSS 对大小写不敏感，所以骆驼命名法不是一个好的选择。很久以前，下划线不被支持所以破折号成为了默认约定。
/* Do */
.footer-column-left { }
/* Don't */
.footerColumnLeft { }
.footer_column_left { }
09、不要重复设置
CSS 的许多属性值都是从 DOM 树中的上一级继承下来的，因此命名为层叠样式表。让我们以 font 为例 - 它几乎总是继承自父节点，你不需要为页面中的每一个元素设置该属性。
你只需要为 或者
设置 font 样式，然后让它一级一级流传下去就可以了。 下面是一个很好的例子。html {
font: normal 16px/1.4 sans-serif;
}
当然，在任何一个子元素中你都可以按照自己的需求改变这一样式。我要说的就是能使用继承获得的属性就不要再去一一指定了。
10、CSS 动画与变换
不要通过直接更改元素的宽度和高度去动画元素，或者是更改 left/right/top/bottom。最好的办法是使用 transform() 属性因为它提供了更加圆滑的过渡效果而且可以让你的意图在阅读代码时更加易于理解。
下面是一个例子，我们想动画一个 ball，让它往右滑动。 不要去改变 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 社区非常的庞大而且不断出现新的库。 库被提供于各种用途，从小片段到完善的框架，用于构建响应式程序，而且它们当中大部分都是开源的。
所以下次当你碰到 CSS 问题的时候，在你想自己动手去解决问题的时候，最好先去 Github 或者 CodePen 找找是否已经存在可用的解决方案。
12、保持选择器的特指度低
不是所有 CSS 选择器都是生而相等的，当新手开发者书写 CSS 代码的时候通常期望它们写的选择器能够覆盖之前所有已存在的样式。 但是事情并不总像我们想的那样，就像下面这个例子：
a{
color: #fff;
padding: 15px;
}
a#blue-btn {
background-color: blue;
}
a.active {
background-color: red;
}
我们想为所有按钮添加 .active 类使其变为红色，但这是不起作用的，因为按钮已经被一个 id 选择器设置了 background-color，而 id 选择器具有更高的特指度。它们之间的规则就像下面这样：
ID (#id) > Class (.class) > Type (比如 header)。
特指度是可以堆叠的，所以 a#button.active 的特指度是高于 a#button 的。 使用特指度高的选择器将使你不断的使用更高的去覆盖那些原本存在的选择器，这将最终导致 !important 效果。
13、不要使用 !important
很认真的告诉你，不要使用 !important。 即时的一个快速修复在将来可能导致大量的重写。相反，找出你 CSS 选择器不工作的原因，并且尝试去修复它。
只有在一种情景中使用 !important 是可以接受的，那就是你想覆盖那些在 HTML 中定义的行内样式。而且书写行内样式也是一种非常糟糕的方式，建议停止使用。
14、使用 text-transform
在 HTML 中，当你使用大写字母的时候可能是出于某种语义目的，比如说你想强调一个单词的重要性。
<h3>Employees MUST wear a helmet!</h3>
如果出于某种目的你将一组文本都设置成大写，可以在 HTML 中正常书写文本，然后利用 CSS 转换其大小写。 它们看起来都是一样的，但是如果不在上下文中，你的内容将更有意义。
<p class="movie-poster">Star Wars: The Force Awakens</p>
.movie-poster { text-transform: uppercase;}
这同样适用于大写或者小写的字符串 - text-transform 属性可以将它们处理的很好。
15、Em， Rem 和 Pixel
人们在对元素和文本设置尺寸应该用 em，rem 还是 px 有很多的争论。事实是，这三者都是可行的，有自己的优点和缺点。
所有的开发者和项目都是不同的，所以不应该有什么严格的规则说明什么时候该用哪一种。下面是一些提示和良好的做法：
em - 1 em 的大小与直接父元素的字体大小有关。 通常用于媒体查询，em 对响应式设计而言是非常棒的 ，但是将每个元素的 em 值转换为 px 的比例是非常难以计算的，因为你可能要在 DOM 树上逐级跟踪元素。
rem - 以 元素中的 font-size 为基准， rem 将比例化页面中的标题和段落变得很容易。保持 中默认的 font-size 并且为其它的元素设置 rem 是一种非常棒的方法。
px - 像素是最精确的控制方式，但是在 响应式设计中它并不友好，因为它不会随屏幕大小变化而自动缩放。它们是可靠的，易于理解的，并且在值和实际结果之间呈现出良好的视觉联系。
下面我要说的是，不要害怕尝试。去使用它们并且找出哪一种是你最喜欢的。 有时候 em 和 rem 很省事，尤其对于响应式界面。
16、在大项目中使用预处理器
你可能已经听说过它们了 - Sass, Less, PostCSS, Stylus 。预处理器是 CSS 发展的下一阶段。 它们提供的功能诸如变量， CSS 函数，选择器嵌套以及其它一些非常酷的东西。这使得 CSS 代码非常易于管理，尤其在大项目中。
举个简单的例子，下面是使用了 CSS 变量和函数的 Sass 代码片段。
$accent-color: #2196F3;
a {
padding: 10px 15px;
background-color: $accent-color;
}
a:hover {
background-color: darken($accent-color,10%);
}
使用 CSS 预处理器的唯一缺点是，它们需要编译成真正的 CSS 代码，但是如果你已经决定在你的项目中使用一个构建脚本，那么这就不再是你应该烦恼的问题了。
17、Autoprefixers
为各个浏览器添加前缀算得上是书写 CSS 代码最恼人的问题了。它们不一致，你永远无法精确的你需要哪一个，而且如果你真的去一个个适配并将它们都放到样式表中，你会发现这是一场噩梦。
感谢上天，有很多工具可以自动的帮你实现这一过程，甚至可以让你指定你需要支持的浏览器 ：
在线工具： Autoprefixer 文本编辑器插件 - Sublime Text, Atom 库 - Autoprefixer
18、在项目中使用精简代码
为了提高网站或app的页面加载速度我们需要总是使用精简代码 . 代码的精简版本会移除掉空白和重复的部分,这样会削减文件的大小. 当然,这样的话你的 CSS 代码将会变得非常难以阅读,所以最好总是提供一个 .min 的精简版本和一个常规的发展版本.
有很多不同的方法去精简 CSS 代码 :
在线工具 - CSS Minifier, CSS Compressor 文本编辑插件 - Sublime Text, Atom 库 - Minfiy , CSSO 和 CSSNano
根據你的工作流程,你可以選用上述一個選項,但是建議你總是使用某種方式自動執行此過程。
19、Can I Use
不同的瀏覽器仍然存在著很多不一致的兼容性問題, 利用caniuse 或其它類似的服務檢測你正在使用的屬性是否被廣泛支持, 是否需要添加前綴, 或者說是否會在某平台下出現bug .
僅僅檢測是否仍然是不夠的, 你仍然需要測試佈局是否會無緣無故的崩潰. 充分了解使用者經常使用的瀏覽器也會提供很大的幫助, 因此你可以看到好的支援是非常關鍵的.
20、Validate
驗證CSS 程式碼可能沒有驗證HTML 或JavaScript 程式碼重要, 但是在一個CSS 驗證器上運行你的程式碼還是有幫助的, 它會提示你是否書寫了錯誤或比較糟糕的程式碼, 甚至會給出一些比較中肯的建議幫助你改進程式碼。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是前端實戰項目中20個CSS代碼使用注意事項的詳細內容。更多資訊請關注PHP中文網其他相關文章！