2016-01-21 48 views
0

背景:HTML使用圖層並將CSS文件應用於特定圖層有沒有辦法?

市場上有不同的工具和組件,可以幫助開發人員/設計人員在不費力的情況下創建可接受的HTML界面。問題是這些工具中的每一個都有自己的css設置,並且它們並不都能很好地結合在一起。例如,對於來自一個供應商的用戶ASP.NET控件和來自另一個供應商的特殊按鈕集合,由於css初始化和框模型等原因,必須做許多專業工作才能使得兩者在同一頁面上一起工作。

我的問題:

A - 層和帆布的概念在HTML5已實施,但我看到,它主要用於圖形(和遊戲)的發展。是否有可能在HTML5中創建多個圖層,其中每個圖層可以與唯一集(1個或多個)css文件相關聯,從而阻止將css設置應用於另一圖層?通過這種方式,可以將可視化組件分組到多個圖層,並毫無問題地使用它

我的理解是,這是不可能的。

B - 您是否看到了更好的方法來解決上述背景中所述的混合來自不同組件的css文件的問題?

謝謝。

+0

你能給這個衝突的CSS的一些例子 案件? – renanlf

+0

@renanlf,雖然我不想命名第三方名稱,但請帶上Bootstrap框架以及一些面向ASP.NET的UI控件的主要供應商。如果您想將WYSIWYG設計工具與任何其他UI控件庫一起使用,也是如此。 – NoChance

+1

我認爲你最好的選擇是嘗試_「範圍」_的CSS樣式。如果_Package A_中的所有內容都有一個領先的'.pa'類,並且_Package B_中的所有內容都有一個領先的'.pb'類,那麼您可以在元素中添加'.pa'或'.pb'來表示要使用哪個包的CSS, '

'。 – hungerstar

回答

1

A - 你說得對。這是不可能的!

B - 您可以將VendorA組件封裝在某個類vendor-a的div中,然後將此VendorA .css文件中的所有CSS類別與.vendor-a class作爲前綴。

例: Supose你有vendorA.css對按鈕的風格,是相互矛盾的:

button { ... } 

你將不得不前綴是:

.vendor-a button { ... } 

並在您的HTML,你將有在包裝組件:

<div class="vendor-a"> 
    <!-- Vendor A component goes inside --> 
</div> 
+0

Thx。對於這個建議。我很抱歉,分層的方法將無法正常工作。另一件會影響結果的是CSS Rest和box模型......不確定爲什麼W3C沒有把所有這些排在第一位! – NoChance

相關問題