如何避免第三方庫帶來的CSS影響？

我有使用一種叫做smDateTimeRangePicker庫角項目，它包括下面的代碼：如何避免第三方庫帶來的CSS影響？

.action { 
    height: 30px; 
    margin-bottom: 0; 
    position: absolute; 
    bottom: 0; 
    width: 100%; }

然而，在我的項目，有一個代碼，其中也包括action類

<div flex class="action cell">

它受上述CSS的影響，如何避免它？

這個問題考慮下面關於這些要點：

沒有可以規避項目和庫之間的CSS影響的方式。
圖書館採用不良做法，必須避免影響項目。這是圖書館的一個錯誤，必須修復。
這種影響通常會發生，所以我需要改變我的項目，以避免衝突

來源

2016-10-07 Stephen

只有這樣，才能讓他們兩個的工作是讓一個'.action'私人和另一個公共 – Era

喜燕姿，使用重要覆蓋的任何規則庫對！動作類 – Laazo

遵循CSS特異性rools來避免這種情況。 https://css-tricks.com/specifics-on-css-specificity/#article-header-id-0 – nmanikiran

重命名你的項目的動作類別的東西是最徹底的方法。否則，你必須採取被認爲是不好的做法的修復！重要的，但是這些仍然可以完成工作。

來源

2016-10-07 06:57:30 SGalea

我不確定的是，如果項目受到第三方的影響，那麼更改項目是一個不錯的選擇？另外，很難重寫css，例如，您爲底部設置哪個值來覆蓋0？ – Stephen

理想情況下，您知道要使用哪個第三方，並確保您之前沒有任何碰撞。在這種情況下重命名是讓良性CSS免受黑客攻擊。爲了正確和未來的可維護性，我會進行重命名。 – SGalea

發生這種情況對我相當頻繁，所以要解決它，我只是一個父類添加到我的網頁或特定部分

<div class="my-unique-class"> 

    --- 
     <div class="action"> 
      --- 
     </div> 
    --- 

</div> 

.my-unique-class .action { 
    height: 30px; 
    margin-bottom: 0; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
}

來源

2016-10-07 07:03:50 Rahul

這段代碼在庫中，所以你不能修改它。 – Stephen

在這種情況下，你需要或者改變你的類，如果可能的話，或者你需要使用CSS特異性來覆蓋特定的CSS – Rahul

你可以通過增加你的CSS規則的特殊性避免這樣一種情況。有多種方法可以這樣做：

添加自定義文件之前所有第三方CSS文件，以便與相同的優先級（你的情況），該CSS規則可以覆蓋在第三方的CSS文件的規則。
上述方案應該在大多數的情況下工作，但也有機會，第三方CSS可能帶有更高的優先級順序，這樣你就可以通過添加類在你的父標籤增加體重你的CSS爲：

.parent > .action { 
 
/* Some CSS Code */ 
 
}

<section class="parent"> 
 
    <div flex class="action cell"></div> 
 
</section>

MDN大約有CSS具體here

來源

2016-10-07 07:41:00

偉大的文章，如果你不能改變你的類名，你可以讓你的STYL es特有的做法：

.action.cell { 

/*your styles here*/ 

}

通過忽略動作和單元格之間的空間，您說這兩個類都在同一個元素上。另外，請確保在第三方樣式表之後加載樣式表，以便將樣式應用到他們的樣式表上。

來源

2016-10-11 19:47:37 user2945945

當你有一個CSS規則時，你可以使用！在分號之前很重要：

background: black !important ;

它將您的規則標記爲「重要」，它不能用任何CSS文件進行更改。

只有內嵌CSS可以覆蓋它：

style="background: blue !important"

來源

2016-10-11 19:58:12 jiwopene

如何避免第三方庫帶來的CSS影響？

回答

相關問題