如何修改和調試由第三方提供的CSS

-2

我是一個完整的開發人員。但是，像許多全堆棧我更喜歡後端。在我的職業生涯中，我發現開發人員往往傾向於以某種方式外包CSS工作。基本上有兩種方式 - 通過招聘代理或專門處理CSS。在我看來，創建和改進一些基本的東西是很典型的，但是如果我們遇到一個複雜的CSS問題 - 我們只需致電機構或我們的前端專家。如何修改和調試由第三方提供的CSS

我的問題是關於使用其他人創建的CSS項目的策略。只要人們需要找到一個應該用於某個元素的類，這不是什麼大問題。但是當人們開始修改它時 - 泥土的大球開始震動。

在後端很容易。如果你嚴重破壞它不會編譯。如果你以一種更微妙的方式破壞某些東西 - 它很快就會清晰可見並且很容易調試，因爲它會向你顯示一步一步執行的內容。但是當我開始修改CSS時 - 天啊！ - 流行的場景是，我有一些工作在一個普通的html文檔上，但是當我把它放在一些更大結構的元素中時，它就停止工作。然後一小時一小時，我出汗嘗試本地化導致它的CSS行。

你知道任何方法，任何策略，使它容易嗎？

來源

2015-10-12 Landeeyo

你可以通過瀏覽器調試它是否屬於Chrome瀏覽器的一部分「firebug」或「開發工具」....不確定你的意思是如果外包或不外包，那不是一個直接的技術問題 – jpganz18

基本上，一個站點的CSS是一個框架，並且您在問如何理解另一個開發人員編寫的框架。我相信你知道那裏沒有魔術，特別是如果框架總是變化的話。但無論如何，調試Web前端代碼的一個非常重要的部分是使用瀏覽器中的開發人員工具，即「檢查員」。在那裏你可以實時調試HTML和CSS，修改內容並查看是什麼原因造成的。 – Roope

@Roope我當然知道提及的工具並使用它們，儘管通過大量CSS搜索仍然是一個問題。那麼，我想知道一些魔術技巧:)。 – Landeeyo

有一種方法可以修改第三方CSS，要修改的類將它們寫入您的css文件，並在與第三方css類發生衝突的每個屬性之後應用！important。

例如：

在第三方CSS還有一類：

.demo{ 
    width:100px; 
    color:#666666; 
}

現在要改變它的寬度和字體顏色，讓你在你的CSS這樣

.demo{ 
     width:80px!important; 
     color:#ff0000!important; 
    }

寫

希望這會幫助你，讓我知道任何問題，我可以嘗試通過提供一些解決方案來解決這個問題。謝謝

來源

2015-10-12 14:55:59 CreativePS

我聽說過！重要，這當然很有用。不過，我正在尋找一種方法來找出究竟是什麼破壞了我們的代碼，而不是重寫它。 – Landeeyo

查找破解的代碼，最好的方法是使用螢火蟲，我不認爲有任何自動化工具可以降低破壞代碼的CSS類的結果。另外，我還會手動檢查 – CreativePS

我強烈勸阻使用'！important'，因爲它會破壞內置於CSS的特定引擎。相反，應用相同的選擇器或更具體的選擇器。請記住，當兩個選擇器相同時，最後一個實例將優先，因此，在具有相同選擇器的第三方樣式表之後應用樣式表也可以覆蓋不需要的樣式。 – War10ck

如何修改和調試由第三方提供的CSS

回答

相關問題