CSS和Sass開(kāi)發(fā)規(guī)范的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)CSS和Sass開(kāi)發(fā)規(guī)范的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的泗陽(yáng)網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

ID and class naming
ID和class(類(lèi))名總是使用可以反應(yīng)元素目的和用途的名稱(chēng)，或其他通用名稱(chēng)。代替表象和晦澀難懂的名稱(chēng)。
應(yīng)該首選具體和反映元素目的的名稱(chēng)，因?yàn)檫@些是最可以理解的，而且發(fā)生變化的可能性最小。
通用名稱(chēng)只是多個(gè)元素的備用名，他們兄弟元素之間是一樣的，沒(méi)有特別意義。
區(qū)分他們，使他們具有特殊意義，通常需要為“幫手”。
盡管class(類(lèi))名和ID 的語(yǔ)義化對(duì)于計(jì)算機(jī)解析來(lái)說(shuō)沒(méi)有什么實(shí)際的意義，
語(yǔ)義化的名稱(chēng) 通常是正確的選擇，因?yàn)樗鼈兯淼男畔⒑x，不包含表現(xiàn)的限制。
不推薦

.fw-800 {
  font-weight: 800;
}
 
.red {
  color: red;
}

推薦

.heavy {
  font-weight: 800;
}
 
.important {
  color: red;
}

合理的避免使用ID
一般情況下ID不應(yīng)該被應(yīng)用于樣式。
ID的樣式不能被復(fù)用并且每個(gè)頁(yè)面中你只能使用一次ID。
使用ID唯一有效的是確定網(wǎng)頁(yè)或整個(gè)站點(diǎn)中的位置。
盡管如此，你應(yīng)該始終考慮使用class，而不是id，除非只使用一次。

不推薦

#content .title {
  font-size: 2em;
}

推薦

.content .title {
  font-size: 2em;
}

另一個(gè)反對(duì)使用ID的觀(guān)點(diǎn)是含有ID選擇器權(quán)重很高。
一個(gè)只包含一個(gè)ID選擇器權(quán)重高于包含1000個(gè)class(類(lèi))名的選擇器，這使得它很奇怪。

// 這個(gè)選擇器權(quán)重高于下面的選擇器
#content .title {
  color: red;
}
 
// than this selector!
html body div.content.news-content .title.content-title.important {
  color: blue;
}

CSS選擇器中避免標(biāo)簽名

當(dāng)構(gòu)建選擇器時(shí)應(yīng)該使用清晰，準(zhǔn)確和有語(yǔ)義的class(類(lèi))名。不要使用標(biāo)簽選擇器。如果你只關(guān)心你的class(類(lèi))名
，而不是你的代碼元素，這樣會(huì)更容易維護(hù)。
從分離的角度考慮,在表現(xiàn)層中不應(yīng)該分配html標(biāo)記/語(yǔ)義。
它可能是一個(gè)有序列表需要被改成一個(gè)無(wú)序列表，或者一個(gè)div將被轉(zhuǎn)換成article。
如果你只使用具有實(shí)際意義的class(類(lèi))名，
并且不使用元素選擇器，那么你只需要改變你的html標(biāo)記，而不用改動(dòng)你的CSS。
不推薦

div.content > header.content-header > h3.title {
  font-size: 2em;
}

推薦

.content > .content-header > .title {
  font-size: 2em;
}

盡可能的精確
很多前端開(kāi)發(fā)人員寫(xiě)選擇器鏈的時(shí)候不使用直接子選擇器（注：直接子選擇器和后代選擇器的區(qū)別）。
有時(shí)，這可能會(huì)導(dǎo)致疼痛的設(shè)計(jì)問(wèn)題并且有時(shí)候可能會(huì)很耗性能。
然而，在任何情況下，這是一個(gè)非常不好的做法。
如果你不寫(xiě)很通用的，需要匹配到DOM末端的選擇器，你應(yīng)該總是考慮直接子選擇器。

考慮下面的DOM:

<article class="content news-content">
  <span class="title">News event</span>
  <div class="content-body">
    <div class="title content-title">
      Check this out
    </div>
 
    <p>This is a news article content</p>
 
    <div class="teaser">
      <div class="title">Buy this</div>
      <div class="teaser-content">Yey!</div>
    </div>
  </div>
</article>

下面的CSS將應(yīng)用于有title類(lèi)的全部三個(gè)元素。
然后，要解決content類(lèi)下的title類(lèi) 和 teaser類(lèi)下的title類(lèi)下不同的樣式，這將需要更精確的選擇器再次重寫(xiě)他們的樣式。
不推薦

.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;
}

縮寫(xiě)屬性
CSS提供了各種縮寫(xiě)屬性（如 font 字體）應(yīng)該盡可能使用，即使在只設(shè)置一個(gè)值的情況下。
使用縮寫(xiě)屬性對(duì)于代碼效率和可讀性是有很有用的。
不推薦

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;

推薦

color: #f3a;

ID 和 Class（類(lèi)）名的分隔符
使用連字符（中劃線(xiàn)）分隔ID和Class（類(lèi)）名中的單詞。為了增強(qiáng)課理解性，在選擇器中不要使用除了連字符（中劃線(xiàn)）以為的任何字符（包括沒(méi)有）來(lái)連接單詞和縮寫(xiě)。
另外，作為該標(biāo)準(zhǔn)，預(yù)設(shè)屬性選擇器能識(shí)別連字符（中劃線(xiàn)）作為單詞[attribute|=value]的分隔符，
所以最好的堅(jiān)持使用連字符作為分隔符。
不推薦

.demoimage {}
.error_status {}

推薦

#video-id {}
.ads-sample {}

Hacks

避免用戶(hù)代理檢測(cè)以及CSS“hacks” – 首先嘗試不同的方法。通過(guò)用戶(hù)代理檢測(cè)或特殊的CSS濾鏡，變通的方法和 hacks 很容易解決樣式差異。為了達(dá)到并保持一個(gè)有效的和可管理的代碼庫(kù)，這兩種方法都應(yīng)該被認(rèn)為是最后的手段。換句話(huà)說(shuō)，從長(zhǎng)遠(yuǎn)來(lái)看，用戶(hù)代理檢測(cè)和hacks
會(huì)傷害項(xiàng)目，作為項(xiàng)目往往應(yīng)該采取阻力最小的途徑。也就是說(shuō)，輕易允許使用用戶(hù)代理檢測(cè)和hacks 以后將過(guò)于頻繁。

聲明順序

這是一個(gè)選擇器內(nèi)書(shū)寫(xiě)CSS屬性順序的大致輪廓。這是為了保證更好的可讀性和可掃描重要。

作為最佳實(shí)踐，我們應(yīng)該遵循以下順序（應(yīng)該按照下表的順序）：

結(jié)構(gòu)性屬性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表現(xiàn)性屬性：
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;
}

聲明結(jié)束

為了保證一致性和可擴(kuò)展性，每個(gè)聲明應(yīng)該用分號(hào)結(jié)束，每個(gè)聲明換行。

不推薦

css 代碼:
.test {
  display: block; height: 100px
}

推薦

css 代碼:

.test {
  display: block;
  height: 100px;
}

屬性名結(jié)束

屬性名的冒號(hào)后使用一個(gè)空格。出于一致性的原因，
屬性和值（但屬性和冒號(hào)之間沒(méi)有空格）的之間始終使用一個(gè)空格。

不推薦

css 代碼:

h4 {
  font-weight:bold;
}

推薦

css 代碼:
h4 {
  font-weight: bold;
}

選擇器和聲明分離

每個(gè)選擇器和屬性聲明總是使用新的一行。

不推薦

css 代碼:

a:focus, a:active {
  position: relative; top: 1px;
}

推薦

css 代碼:

h2,
h3,
h4 {
  font-weight: normal;
  line-height: 1.2;
}

規(guī)則分隔

規(guī)則之間始終有一個(gè)空行（雙換行符）分隔。

推薦

css 代碼:

html {
  background: #fff;
}
 
body {
  margin: auto;
  width: 50%;
}

CSS引號(hào)

屬性選擇器或?qū)傩灾涤秒p引號(hào)（””），而不是單引號(hào)（”）括起來(lái)。
URI值（url()）不要使用引號(hào)。

不推薦

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中你可以嵌套選擇器，這可以使代碼變得更清潔和可讀。嵌套所有的選擇器，但盡量避免嵌套沒(méi)有任何內(nèi)容的選擇器。
如果你需要指定一些子元素的樣式屬性，而父元素將不什么樣式屬性，
可以使用常規(guī)的CSS選擇器鏈。
這將防止您的腳本看起來(lái)過(guò)于復(fù)雜。

不推薦

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;
    }
  }
}

上下文媒體查詢(xún)(SCSS)

在Sass中，當(dāng)你嵌套你的選擇器時(shí)也可以使用上下文媒體查詢(xún)。
在Sass中，你可以在任何給定的嵌套層次中使用媒體查詢(xún)。
由此生成的CSS將被轉(zhuǎn)換，這樣的媒體查詢(xún)將包裹選擇器的形式呈現(xiàn)。

這技術(shù)非常方便，
有助于保持媒體查詢(xún)屬于的上下文。

第一種方法這可以讓你先寫(xiě)你的手機(jī)樣式，然后在任何你需要的地方
用上下文媒體查詢(xún)以提供桌面樣式。

不推薦

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;
    }
  }
}

嵌套順序和父級(jí)選擇器(SCSS)

當(dāng)使用Sass的嵌套功能的時(shí)候，
重要的是有一個(gè)明確的嵌套順序，
以下內(nèi)容是一個(gè)SCSS塊應(yīng)具有的順序。

當(dāng)前選擇器的樣式屬性
父級(jí)選擇器的偽類(lèi)選擇器 (:first-letter, :hover, :active etc)
偽類(lèi)元素 (:before and :after)
父級(jí)選擇器的聲明樣式 (.selected, .active, .enlarged etc.)
用Sass的上下文媒體查詢(xún)
子選擇器作為最后的部分
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;
    }
  }
}

關(guān)于“CSS和Sass開(kāi)發(fā)規(guī)范的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站名稱(chēng)：CSS和Sass開(kāi)發(fā)規(guī)范的示例分析
文章轉(zhuǎn)載：http://www.rwnh.cn/article10/jipcdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、電子商務(wù)、網(wǎng)站收錄、搜索引擎優(yōu)化、用戶(hù)體驗(yàn)、域名注冊(cè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

CSS和Sass開(kāi)發(fā)規(guī)范的示例分析