“！important”不應在“keyframes”上使用
!important 在某些瀏覽器中，關鍵幀聲明中的“內部”將被完全忽略，因此，不應在所有瀏覽器中使用它來保持一致。
不兼容的代碼示例：
@keyframes kf {
from { margin-top: 50px; }
50% { margin-top: 150px !important; } /* Noncompliant; ignored */
to { margin-top: 100px; }
}
兼容解決方案：
@keyframes kf {
from { margin-top: 50px; }
50% { margin-top: 150px; }
to { margin-top: 100px; }
}
"calc"操作數應正確隔開
calc是CSS3函數，它提供了在CSS中進行簡單數學運算（加，減，除，乘）的可能性。運算符周圍沒有空格，calc將無效。
更準確地說，在操作員之前，必須有單個空格或換行符以及縮進。在運算符之後，必須有單個空格或換行符。
不兼容的代碼示例：
#div1 {
position: absolute;
width: calc(100%- 100px); /* Noncompliant; no space after the % sign */
}
兼容解決方案：
#div1 {
position: absolute;
width: calc(100% - 100px);
}
“linear-gradient”方向應有效
linear-gradient用CSS3進行了標準化。在此之前，可以使用不同的非標準值來定義漸變的方向。由於這些值不是標準的，因此並非所有瀏覽器都支持它們，因此，在支持CSS3的最新瀏覽器版本中，不應再使用它們來獲得預期的漸變。
當a的第一個參數linear-gradient無效<side-or-corner>時，此規則會引起問題angle。
不兼容的代碼示例：
.foo {
background: -webkit-linear-gradient(to top, #fff, #000);
background: linear-gradient(top, #fff, #000);
}
.bar {
background: linear-gradient(45, #fff, #000);
}
兼容解決方案：
.foo {
background: -webkit-linear-gradient(top, #fff, #000);
background: linear-gradient(to top, #fff, #000);
}
.bar {
background: linear-gradient(45deg, #fff, #000);
}
顏色定義應有效
默認情況下，無效的顏色定義將被解釋爲黑色，這可能會對網站的預期外觀產生意想不到的影響。
此規則提出了一個問題，當一個顏色定義（color，background-color）是無效的。當顏色定義由十六進制字符組成時，它被認爲是有效的：
- 常用：6或8個字符（定義了字母時）
- 速記變體：3或4個字符（定義了字母時）
不兼容的代碼示例：
a {
color: #3c; /* Noncompliant; shorthand should be made of 3 characters */
}
div {
backgr
兼容解決方案：
a {
color: #3cc;
}
div {
background-color: #3cb371ac;
}
CSS文件不能爲空
當CSS文件爲空（即：僅包含空格）時，會引起問題。
字體聲明應至少包含一個通用字體系列
如果用戶瀏覽器中沒有可用的font或font-family聲明中定義的字體名稱，則瀏覽器將使用其默認字體顯示文本。建議始終爲每個聲明定義一個通用字體系列， font或者font-family比依靠默認瀏覽器字體來減少降級的情況。所有瀏覽器都應該實現通用字體匹配這些家庭的名單：Serif，Sans-serif，cursive，fantasy， Monospace。
不兼容的代碼示例：
a {
font-family: Helvetica, Arial, Verdana, Tahoma; /* Noncompliant; there is no generic font family in the list */
}
兼容解決方案：
a {
font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif;
}
“rule”應有效
W3C規範定義了有效的at-rules。只有官方的和特定at-rules於瀏覽器的纔可以用來獲得最終渲染中的預期效果。
不兼容的代碼示例：
@encoding“ utf-8”;
兼容解決方案：
@charset“ utf-8”;
單位應有效
W3C規範定義了units可以與長度一起使用的。不屬於支持列表的單位可能是拼寫錯誤，並且會被用戶視爲UI錯誤。
每當沒有正式支持某個單位時，此規則就會引起問題。
不兼容的代碼示例：
a {
width: 10pixels; /* Noncompliant; "pixels" is not a valid unit */
}
兼容解決方案：
a {
width: 10px;
}
CSS屬性應該有效
W3C規範定義了有效的CSS屬性。僅應使用官方屬性和特定於瀏覽器的屬性來獲得最終渲染中的預期效果。
該規則忽略：
$sass，@less和var(--custom-property)可變語法。- 供應商前綴的屬性（例如
-moz-align-self，-webkit-align-self）。
不兼容的代碼示例：
a {
colour: blue; /* Noncompliant; colour is not part of the specifications */
}
兼容解決方案：
a {
color: blue;
}
較低特異性的選擇器應優先於較高特異性的選擇器
CSS中的指令順序很重要：文件中後面出現的具有相同特異性的指令具有優先權。但是，當具有更高特異性的選擇器（例如p a { color: green;}）出現在選擇器優先於選擇器（例如：）之前時a { color: green;}，優先級將賦予第一個選擇器。即使它正常工作，在閱讀時也很難預期樣式表的行爲，因爲它違反了最後一條指令優先的原則。
不兼容的代碼示例：
p a {
color: green;
}
a {
color: blue;
}
兼容解決方案：
a {
color: blue;
}
p a {
color: green;
}