嵌入式內容

Question

獨特的樣式我有一個將被嵌入到幾千個不同的網站的一些HTML標記& CSS樣式。我希望本節只使用我自己的樣式表，而忽略原始網站的CSS。

除了使用唯一的前綴的所有類和id的，是那裏不是在某些地區適用的網站廣泛CSS規則，只有用我自己的造型的方法嗎？

Answer 1

FYI !important聲明用戶CSS總是會戰勝CSS作者和用戶代理者（資源：the cascade on Sitepoint），但是這不是你競爭用。

有沒有辦法僅適用你的CSS，而完全忽視了頁面的其餘部分，據我所知（在CSS中的C是有原因的;））。但是，不過，這裏有一堆應該幫助的東西：

• !important是非常強大的。只有其他聲明與此修改器有（如有的AS需要的時候不知道，因爲它是爲那些可怕的HTML電子郵件雖然）仍然適用
• 同爲內聯樣式機會
• id有很強的特異性。與412類和沒有id選擇器具有較低的特異性比一個與1號和無級（這就是爲什麼它根據基於它OOCSS和CSS棉短絨是一種不好的做法。情況因人而異）
• 一個好的技巧，允許人爲添加CSS特異性爲.c.c { prop:val}：.c {}的特異性的兩倍和完全相同的範圍。想象一下id;）（你也可以在元素的每個祖先都有一個id，但是你不能在同一元素上有2個id）
• initial和unset'd很好，如果它被支持IE瀏覽器...甚至會更好：all屬性，但它的IE11 +，而不是在Safari
• 所以你必須仔細閱讀MDN您要重啓並應用它的默認值每個屬性。還是在這裏SO閱讀本驚人回答一個相關的問題：https://stackoverflow.com/a/18464285/137626

不要忘了媒體查詢內聲明的，可以適用於客戶端的網站：您（或您的客戶端）將不會看到他們，直到他們調整了他們的瀏覽器。
我很在意沒有一般規則和默認的分辨率，然後具體的人不太多的特殊性，但在一個給定的項目，去年MQ（320或1600+），我真的不關心了，如果它」對我來說更方便（即更快），因爲我知道我以後不需要重寫它。永遠。

編輯：不要忘記考慮假:before和:after。 Normalize.css現在聲明爲*, *:before, *:after { (-prefix-)box-sizing: border-box }，如果您也使用它們，這可能會令人驚訝。最好不要使用它們，因爲它們不能在樣式屬性中設置樣式（與MQ相同的問題）。
消滅任何風格，這些假點可以有，這樣的代碼：

high-specificity-selector *:before, 
high-specificity-selector *:after { 
    content: none !important 
} 

應該足夠：沒有內容，不假。
/EDIT

如果你對你的項目（數千個網站，哇），你也可以自動測試應用在野外客戶的網站的CSS，與測試驗證相當嚴重：

• 您的小部件的一組元素上的一堆屬性的CSS值。資源：http://csste.st/tools/
• 相較於德初始屏幕截圖小工具的渲染強大PhantomCSS（基於CasperJS，本身基於PhantomJS在WebKit的卡斯帕測試，但也有克隆的壁虎/ SlimerJS或IE/TrifleJS測試。 ）