CSS 和 Sass (SCSS) 規範

CSS and Sass (SCSS) style rules

ID and class naming

ID和class(類)名總是使用可以反應元素目的和用途的名稱，或其他通用名稱。代替表象和晦澀難懂的名稱。

應該首選具體和反映元素目的的名稱，因為這些是最可以理解的，而且發生變化的可能性最小。

通用名稱只是多個元素的備用名，他們兄弟元素之間是一樣的，沒有特別意義。
區分他們，使他們具有特殊意義，通常需要為“幫手”。

儘管class(類)名和ID 的語義化對於計算機解析來說沒有什麼實際的意義，
語義化的名稱通常是正確的選擇，因為它們所代表的資訊含義，不包含表現的限制。

不推薦

css 程式碼:
.fw-800 {
font-weight:800;
}
.red {
color: red;
}

推薦

css 程式碼:
.heavy {
font-weight:800;
}
.important {
color: red;
}

合理的避免使用ID

一般情況下ID不應該被應用於樣式。
ID的樣式不能被複用並且每個頁面中你只能使用一次ID。
使用ID唯一有效的是確定網頁或整個站點中的位置。
儘管如此，你應該始終考慮使用class，而不是id，除非只使用一次。

不推薦

css 程式碼:
#content .title {
font-size:2em;
}

推薦

css 程式碼:
.content .title {
font-size:2em;
}

另一個反對使用ID的觀點是含有ID選擇器權重很高。
一個只包含一個ID選擇器權重高於包含1000個class(類)名的選擇器，這使得它很奇怪。

css 程式碼:
//這個選擇器權重高於下面的選擇器
#content .title {
color: red;
}
// than this selector!
html body div.content.news-content .title.content-title.important {
color: blue;
}

CSS選擇器中避免標籤名

當構建選擇器時應該使用清晰，準確和有語義的class(類)名。不要使用標籤選擇器。如果你只關心你的class(類)名
，而不是你的程式碼元素，這樣會更容易維護。

從分離的角度考慮,在表現層中不應該分配html標記/語義。
它可能是一個有序列表需要被改成一個無序列表，或者一個div將被轉換成article。
如果你只使用具有實際意義的class(類)名，
並且不使用元素選擇器，那麼你只需要改變你的html標記，而不用改動你的CSS。

不推薦

css 程式碼:
div.content > header.content-header > h2.title {
font-size:2em;
}

推薦

css 程式碼:
.content >.content-header >.title {
font-size:2em;
}

儘可能的精確

很多前端開發人員寫選擇器鏈的時候不使用直接子選擇器（注：直接子選擇器和後代選擇器的區別）。
有時，這可能會導致疼痛的設計問題並且有時候可能會很耗效能。
然而，在任何情況下，這是一個非常不好的做法。
如果你不寫很通用的，需要匹配到DOM末端的選擇器，你應該總是考慮直接子選擇器。

考慮下面的DOM:

css 程式碼:
<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將應用於有title類的全部三個元素。
然後，要解決content類下的title類和 teaser類下的title類下不同的樣式，這將需要更精確的選擇器再次重寫他們的樣式。

不推薦

css 程式碼:
.content .title {
font-size:2rem;
}

推薦

css 程式碼:
.
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    CSS 和 Sass (SCSS) 規範
      
                

CSS and Sass (SCSS) style rules


ID
 and class naming

ID和class(類)名總是使用可以反應元素目的和用途的名稱，或其他通用名稱。代替表象和晦澀難懂的名稱。

應該首選具體和反映元素目的的名稱 

  
 

    

    
    Bootstrap CSS 編碼規範之Less 和 Sass 中的巢狀
      
                Less 和 Sass 中的巢狀避免不必要的巢狀。這是因為雖然你可以使用巢狀，但是並不意味著應該使用巢狀。只有在必須將樣式限制在父元素內（也就是後代選擇器），並且存在多個需要巢狀的元素的時候，才使用巢狀。// Without nesting.table > thead  

  
 

    

    
    html、css和js註釋的規範用法
      ont   alt   推薦   pan   文件   strong   服務   可用   如何   成為專業的前端工程師！！！
 
 
html註釋：
 
<!--註釋內容-->
 
css註釋：
 
//註釋內容 單行註釋（不推薦使用，因為有的瀏覽器可能不兼容，沒有效果）/*註釋內容*/ 多 

  
 

    

    
    在寫HTML和CSS時的黃金規範
      意思   disabled   書寫   組成   Language   doctype   復用   docs   nbsp   黃金定律：

不管有多少人共同參與同一項目，一定要確保每一行代碼都像是同一個人編寫的。

 
HTML規範


語法

用兩個空格來代替制表符（tab） -- 這是唯一能保證在所 

  
 

    

    
    sass/scss 和 less的區別
      沒有   嵌套   shee   footer   less   前端開發   繼承   靈活   樣式   一. Sass/Scss、Less是什麽?
Sass (Syntactically Awesome Stylesheets)是一種動態樣式語言，Sass語法屬於縮排語法，比css比多出好些功能(如變量 

  
 

    

    
    scss和sass，less區別?
      
							
							
							



scss和sass，less區別

1.編譯環境不一樣。Sass的安裝需要Ruby環境，是在服務端處理的，而Less是需要引入less.js來處理Less程式碼輸出css到瀏覽器，也可以在開發環節使用Less，然後編譯成css檔案，直接放到專案中。

2 

  
 

    

    
    CSS檔案和樣式命名規範，僅供參考
      
id一個頁面只可以使用一次，class可以多次引用。
我在頁面中用了多個相同id在IE中顯示也正常，id和class好象沒什麼區別，用多個相同id有什麼影響嗎？
頁面存在多個相同的ID影響就是不能通過W3的校驗。
在頁面顯示上，目前的瀏覽器還都允許你犯這個錯誤，用多個相同ID“一般情況下”也能正常顯示。但是 

  
 

    

    
    css和js的命名規範
      
                
               筆者在擼程式碼是也會遇到不知道給元素或變數起什麼名字的問題，中文拼音太俗氣，隨便敲幾個字母又影響程式碼的查讀性。於是總結這些命名規範。有些資料來源於網路

        一 .css命名規範

 1.命名規則說明：   

1）、所有的命名最 

  
 

    

    
    css預編譯語言 sass scss（變量$var, css嵌套規則，@import規則，@extend，@mixin）
      lar   pre   文件   nesting   var   content   sea   一行   如果   什麽是sass

Sass 是對 CSS 的擴展，讓 CSS 語言更強大、優雅。 它允許你使用變量、嵌套規則、 mixins、導入等眾多功能， 並且完全兼容 CSS 語法。 Sass 有助於保 

  
 

    

    
    關於更新發布CSS和JS文件的緩存問題
      版本號   手動更新   解析   瀏覽器緩存   ext   .com   關機   嚴重   新的       在Web應用程序大行天下的今天，我們程序員的工作大都基於B/S架構，B/S架構的優勢就在於可以及時（甚至隨時）更新頁面以及後臺邏輯，而不用通知客戶去手動更新客戶端。在這種環境下，是不是B/S架構 

  
 

    

    
    Less、Sass/Scss
      特性   創建   有著   font   工具   嵌套   watch   不同   nested   CSS 預處理器是一種專門的編程語言，進行Web 頁面樣式設計，然後再編譯成正常的CSS 文件，以供項目使用。CSS 預處理器為CSS 增加一些編程的特性，無需考慮瀏覽器的兼容問題。
在CSS 中使用變 

  
 

    

    
    如何用CSS和jQuery實現一個側滑導航菜單
      his   事件監聽   也有   font   ajax   size   add   tar   出現   為了建立導航菜單，讓我們先看看html結構：<!DOCTYPE html><html lang="en"><head>   <meta charset="U 

  
 

    

    
    常見的CSS和HTML面試題
      ide   介紹   清晰   模擬   arc   adding   http   網頁瀏覽   應該   1. 常用那幾種瀏覽器測試？有哪些內核(Layout Engine)?
瀏覽器：IE，Chrome，FireFox，Safari，Opera。
內核：Trident，Gecko，Presto，Webk 

  
 

    

    
    css和js處理隔行換色的問題
      ron   -o   user   XML   use   type   scala   tex   sha   
 


 



<html>  
    <head>  
        <meta charset="utf-8">  
        <met 

  
 

    

    
    webpack打包js，css和圖片
      調用   dev   pat   str   config   直接   nbsp   gte   相對   1、webpack打包默認配置文件webpack.config.js
2、打包js文件：有這個文件並配置可以直接在cmd上webpack打包，沒有這個文件要在cmd上輸入 webpack main.j 

  
 

    

    
    wordpress插件開發掛載css和js
      blog   ima   class   code   -i   _file__   res   install   mage   
define( ‘CSS‘, plugin_dir_url( __FILE__ ) . ‘css/‘ );//定義css根目錄

define( ‘JS‘, plugin 

  
 

    

    
    《移動Web前端高效開發實戰》筆記2——使用Gulp構建一個ECMAScript 6和Sass應用
      腳本   x文件   node.js   磁盤   clas   res   運行   brush   開發   8.3.1 安裝和配置
運行Gulp需要Node.js環境，請參看第二章內容搭建Node.js環境。使用NPM全局安裝Gulp，命令如下：

npm install gulp-cli –g


然 

  
 

    

    
    html、css和js原生寫一個模態彈出框，順便解決父元素半透明子元素不透明效果
      script   javascrip   z-index   htm   index   彈出   rgb   特性   radi   模態框：
html部分：

<!-- 按鈕 -->
    <button id="box" onclick="pop_box()">彈出框</ 

  
 

    

    
    Shell基礎知識和編程規範
      腳本開發   語句   相對路徑   升級   found   chm   漏洞   環境變量   創建   一，Shell環境查看
1.1 查看系統Shell支持情況

[root@linux-node1 ~]# cat /etc/shells 
/bin/sh
/bin/bash
/sbin/ 

  
 

    

    
    JavaScript動態加載CSS和JS文件
      tel   path   end   js文件   document   ava   style   pen   bsp   
var dynamicLoading = {
  css: function(path){
 if(!path || path.length === 0){
  throw new