這次帶給大家CSS與Sass開發規範，使用CSS與Sass開發規範的注意事項有哪些，以下就是實戰案例，一起來看一下。
ID and class naming
ID和class(類別)名稱總是使用可以反應元素目的和用途的名稱，或其他通用名稱。代替表象和晦澀難懂的名稱。
應該首選具體和反映元素目的的名稱，因為這些是最可以理解的，而且變化的可能性最小。
通用名稱只是多個元素的備用名，他們兄弟元素之間是一樣的，沒有特別意義。
區分他們，使他們具有特殊意義，通常需要為「幫手」。
儘管class(類別)名稱和ID 的語意化對於電腦解析來說沒有什麼實際的意義，
語意化的名稱通常是正確的選擇，因為它們所代表的資訊意義，不包含表現的限制。
不建議
.fw-800 {
font-weight: 800;
}
.red {
color: red;
}推薦
.heavy {
font-weight: 800;
}
.important {
color: red;
}合理的避免使用ID
一般情況下ID不應該被套用到樣式。
ID的樣式不能被重複使用並且每個頁面中你只能使用一次ID。
使用ID唯一有效的是確定網頁或整個網站中的位置。
儘管如此，你應該始終考慮使用class，而不是id，除非只使用一次。
不推薦
#content .title {
font-size: 2em;
}推薦
.content .title {
font-size: 2em;
}另一個反對使用ID的觀點是含有ID選擇器權重很高。
一個只包含一個ID選擇器權重高於包含1000個class(類別)名稱的選擇器，這使得它很奇怪。
// 这个选择器权重高于下面的选择器
#content .title {
color: red;
}
// than this selector!
html body p.content.news-content .title.content-title.important {
color: blue;
}CSS選擇器中避免標籤名稱
當建置選擇器時應該使用清晰， 準確且有語意的class(類別)名稱。不要使用標籤選擇器。 如果你只關心你的class(類別)名稱
，而不是你的程式碼元素，這樣會比較容易維護。
從分離的角度考慮,在表現層中不應該分配html標記/語義。
它可能是一個有序列表需要被改成一個無序列表，或者一個p將被轉換成article。
如果你只使用具有實際意義的class(類別)名，
並且不使用元素選擇器，那麼你只需要改變你的html標記，而不用改變你的CSS。
不推薦
p.content > header.content-header > h2.title {
font-size: 2em;
}推薦
.content > .content-header > .title {
font-size: 2em;
}盡可能的精確
很多前端開發人員寫選擇器鏈的時候不使用直接子選擇器（註：直接子選擇器和後代選擇器的區別）。
有時，這可能會導致疼痛的設計問題並且有時可能會很耗性能。
然而，在任何情況下，這是一個非常不好的做法。
如果你不寫很通用的，需要匹配到DOM末端的選擇器， 你應該總是考慮直接子選擇器。
考慮下面的DOM:
<article class="content news-content"> <span class="title">News event</span> <p class="content-body"> <p class="title content-title"> Check this out </p> <p>This is a news article content</p> <p class="teaser"> <p class="title">Buy this</p> <p class="teaser-content">Yey!</p> </p> </p> </article>
下面的CSS將會套用到有title類別的全部三個元素。
然後，要解決content類別下的title類別 和 teaser類別下的title類別下不同的樣式，這將需要更精確的選擇器再次重寫他們的樣式。
不推薦
.content .title {
font-size: 2rem;
}推薦
.content > .title {
font-size: 2rem;
}
.content > .content-body > .title {
font-size: 1.5rem;
}
.content > .content-body > .teaser > .title {
font-size: 1.2rem;
}縮寫屬性
CSS提供了各種縮寫屬性（如font 字體）應該盡可能使用，即使在只設定一個值的情況。
使用縮寫屬性對於程式碼效率和可讀性是有很有用的。
不推薦
css 代碼:
border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
推薦
css 代碼:
border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
0 和單位
省略「0 ”值後面的單位。不要在0值後面使用單位，除非有值。
不推薦
css 代碼:
padding-bottom: 0px; margin: 0em;
推薦
css 代碼:
padding-bottom: 0; margin: 0;
十六進位表示法
#在可能的情況下，使用3個字元的十六進位表示法。
顏色值允許這樣表示，
3個字元的十六進位表示法更簡短。
總是使用小寫的十六進位數字。
不推薦
color: #FF33AA;
推薦
color: #f3a;
ID 和 Class（类） 名的分隔符
使用连字符（中划线）分隔ID和Class（类）名中的单词。为了增强课理解性，在选择器中不要使用除了连字符（中划线）以为的任何字符（包括没有）来连接单词和缩写。
另外，作为该标准，预设属性选择器能识别连字符（中划线）作为单词[attribute|=value]的分隔符，
所以最好的坚持使用连字符作为分隔符。
不推荐
.demoimage {}
.error_status {}推荐
#video-id {}
.ads-sample {}Hacks
避免用户代理检测以及CSS“hacks” – 首先尝试不同的方法。通过用户代理检测或特殊的CSS滤镜，变通的方法和 hacks 很容易解决样式差异。为了达到并保持一个有效的和可管理的代码库，这两种方法都应该被认为是最后的手段。换句话说，从长远来看，用户代理检测和hacks
会伤害项目，作为项目往往应该采取阻力最小的途径。也就是说，轻易允许使用用户代理检测和hacks 以后将过于频繁。
声明顺序
这是一个选择器内书写CSS属性顺序的大致轮廓。这是为了保证更好的可读性和可扫描重要。
作为最佳实践，我们应该遵循以下顺序（应该按照下表的顺序）：
结构性属性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表现性属性：
background, border etc.
font, text
不推荐
.box {
font-family: 'Arial', sans-serif;
border: 3px solid #ddd;
left: 30%;
position: absolute;
text-transform: uppercase;
background-color: #eee;
right: 30%;
isplay: block;
font-size: 1.5rem;
overflow: hidden;
padding: 1em;
margin: 1em;
}推荐
.box {
display: block;
position: absolute;
left: 30%;
right: 30%;
overflow: hidden;
margin: 1em;
padding: 1em;
background-color: #eee;
border: 3px solid #ddd;
font-family: 'Arial', sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
}声明结束
为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。
不推荐
css 代码:
.test {
display: block; height: 100px
}推荐
css 代码:
.test {
display: block;
height: 100px;
}属性名结束
属性名的冒号后使用一个空格。出于一致性的原因，
属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。
不推荐
css 代码:
h3 {
font-weight:bold;
}推荐
css 代码:
h3 {
font-weight: bold;
}选择器和声明分离
每个选择器和属性声明总是使用新的一行。
不推荐
css 代码:
a:focus, a:active {
position: relative; top: 1px;
}推荐
css 代码:
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}规则分隔
规则之间始终有一个空行（双换行符）分隔。
推荐
css 代码:
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}CSS引号
属性选择器或属性值用双引号（””），而不是单引号（”）括起来。
URI值（url()）不要使用引号。
不推荐
css 代码:
@import url('//cdn.com/foundation.css');
html {
font-family: 'open sans', arial, sans-serif;
}
body:after {
content: 'pause';
}推荐
css 代码:
@import url(//cdn.com/foundation.css);
html {
font-family: "open sans", arial, sans-serif;
}
body:after {
content: "pause";
}选择器嵌套 (SCSS)
在Sass中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。
如果你需要指定一些子元素的样式属性，而父元素将不什么样式属性，
可以使用常规的CSS选择器链。
这将防止您的脚本看起来过于复杂。
不推荐
css 代码:
// Not a good example by not making use of nesting at all
.content {
display: block;
}
.content > .news-article > .title {
font-size: 1.2em;
}不推荐
css 代码:
// Using nesting is better but not in all cases
// Avoid nesting when there is no attributes and use selector chains instead
.content {
display: block;
> .news-article {
> .title {
font-size: 1.2em;
}
}
}推荐
css 代码:
// This example takes the best approach while nesting but use selector chains where possible
.content {
display: block;
> .news-article > .title {
font-size: 1.2em;
}
}嵌套中引入 空行 (SCSS)
嵌套选择器和CSS属性之间空一行。
不推荐
css 代码:
.content {
display: block;
> .news-article {
background-color: #eee;
> .title {
font-size: 1.2em;
}
> .article-footnote {
font-size: 0.8em;
}
}
}推荐
css 代码:
.content {
display: block;
> .news-article {
background-color: #eee;
> .title {
font-size: 1.2em;
}
> .article-footnote {
font-size: 0.8em;
}
}
}上下文媒体查询(SCSS)
在Sass中，当你嵌套你的选择器时也可以使用上下文媒体查询。
在Sass中，你可以在任何给定的嵌套层次中使用媒体查询。
由此生成的CSS将被转换，这样的媒体查询将包裹选择器的形式呈现。
这技术非常方便，
有助于保持媒体查询属于的上下文。
第一种方法这可以让你先写你的手机样式，然后在任何你需要的地方
用上下文媒体查询以提供桌面样式。
不推荐
css 代码:
// This mobile first example looks like plain CSS where the whole structure of SCSS is repeated
// on the bottom in a media query. This is error prone and makes maintenance harder as it's not so easy to relate
// the content in the media query to the content in the upper part (mobile style)
.content-page {
font-size: 1.2rem;
> .main {
background-color: whitesmoke;
> .latest-news {
padding: 1rem;
> .news-article {
padding: 1rem;
> .title {
font-size: 2rem;
}
}
}
> .content {
margin-top: 2rem;
padding: 1rem;
}
}
> .page-footer {
margin-top: 2rem;
font-size: 1rem;
}
}
@media screen and (min-width: 641px) {
.content-page {
font-size: 1rem;
> .main > .latest-news > .news-article > .title {
font-size: 3rem;
}
> .page-footer {
font-size: 0.8rem;
}
}
}
推荐
css 代码:
// This is the same example as above but here we use contextual media queries in order to put the different styles
// for different media into the right context.
.content-page {
font-size: 1.2rem;
@media screen and (min-width: 641px) {
font-size: 1rem;
}
> .main {
background-color: whitesmoke;
> .latest-news {
padding: 1rem;
> .news-article {
padding: 1rem;
> .title {
font-size: 2rem;
@media screen and (min-width: 641px) {
font-size: 3rem;
}
}
}
}
> .content {
margin-top: 2rem;
padding: 1rem;
}
}
> .page-footer {
margin-top: 2rem;
font-size: 1rem;
@media screen and (min-width: 641px) {
font-size: 0.8rem;
}
}
}嵌套顺序和父级选择器(SCSS)
当使用Sass的嵌套功能的时候，
重要的是有一个明确的嵌套顺序，
以下内容是一个SCSS块应具有的顺序。
当前选择器的样式属性
父级选择器的伪类选择器 (:first-letter, :hover, :active etc)
伪类元素 (:before and :after)
父级选择器的声明样式 (.selected, .active, .enlarged etc.)
用Sass的上下文媒体查询
子选择器作为最后的部分
The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.
Recommended
css 代码:
.product-teaser {
// 1. Style attributes
display: inline-block;
padding: 1rem;
background-color: whitesmoke;
color: grey;
// 2. Pseudo selectors with parent selector
&:hover {
color: black;
}
// 3. Pseudo elements with parent selector
&:before {
content: "";
display: block;
border-top: 1px solid grey;
}
&:after {
content: "";
display: block;
border-top: 1px solid grey;
}
// 4. State classes with parent selector
&.active {
background-color: pink;
color: red;
// 4.2. Pseuso selector in state class selector
&:hover {
color: darkred;
}
}
// 5. Contextual media queries
@media screen and (max-width: 640px) {
display: block;
font-size: 2em;
}
// 6. Sub selectors
> .content > .title {
font-size: 1.2em;
// 6.5. Contextual media queries in sub selector
@media screen and (max-width: 640px) {
letter-spacing: 0.2em;
text-transform: uppercase;
}
}
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是CSS與Sass開發規範的詳細內容。更多資訊請關注PHP中文網其他相關文章！
