使用CSS創建抽象

我不確定它是否是正確的標題，如果不是，請隨時更改它。我不是以英語爲母語，所以我會盡我所能與PIC的幫忙解釋：使用CSS創建抽象

enter image description here

讓我們假設一下，我有一個純HTML文件。該文件使用按鈕並使用一些UI庫（如Yahoo Pure）。但是不是使用Pure類，而是使用我自己的類，我們稱其爲myButton，它使用純CSS（或任何其他）。但是如何？

這裏我試圖創建一個抽象層，以便我的css文件可以使用一些不同的UI庫（無論是bootstrap，純粹還是基礎）&代碼仍然可以工作。

如果沒有這個解決方案，我會做這樣的（我最初的代碼會）：

<html> 
    <head> 
     <link rel="stylesheet" href="http://yahoo-pure.com/pure-min.css"> 
    </head> 
    <body> 
     <button class="pure-button" type="button">Some Button</button> 
    </body> 
</html>

那麼，如果我有我的心臟的變化，決定使用引導：

<html> 
    <head> 
     <link rel="stylesheet" href="http://twitter-bootstrap.com/bootstrap.css"> 
    </head> 
    <body> 
     <button class="btn" type="button">Some Button</button> 
    </body> 
</html>

所以我必須在這裏做兩個更改，一個是源代碼css文件（不是一個大問題），另一個是按鈕類（如果代碼很大，則是一個非常大的問題）。（想象的變化要我做，如果我利用電網的其他&東西）

如果我能夠做這樣的事：

<html> 
    <head> 
     <link rel="stylesheet" href="my-magic-stylesheet.css"> 
    </head> 
    <body> 
     <button class="myButton" type="button">Some button</button> 
    </body> 
</html>

所以，當我覺得從引導切換至Pure，我只在my-magic-stylesheet.css &內部進行更改，它應該仍然有效。我的HTML文件是指my-magic-stylesheet.css和my-magic-stylesheet.css可以指我指定的任何庫。

我想到的一個解決方案是，這非常簡單，我寫了一個python腳本。首先我記下不同的類和它們各自的UI庫。然後我會寫一個CSS，其中我將使用泛型類名稱，如myButton。然後，我會將這個CSS以UI庫的名稱作爲另一個輸入提供給我的腳本。該腳本將通過運行css文件&進行相應的更改。（如更改myButton爲btn如果另一個腳本輸入是bootstrap）

但是，有沒有更好的方法呢？可能沒有使用python腳本？或者你想到的任何解決方案？我也是像LESS/SASS這樣的CSS工具的新手。我可以使用它們來解決我的問題嗎？

來源

2013-08-18 avi

你應該把這個樣式表放在最後一個你想要的樣式表中，優先級爲 – Hushme

也許這樣做：class ='pure-button btn'？ – gen

@Hushme - 不，不會解決我的問題。我也必須對類名進行更改 – avi

使用LESS：

.myButton { 
    .btn; 
    .pure-button; 
}

在這裏，你還需要有許多的類名，但至少一次人工處理。

來源

2013-08-18 17:42:11 gen

嗯......有趣的問題。我認爲你錯過了一個非常重要的觀點。如果你從一個框架跳轉到框架，你不會只改變這些類的名字，而是你的html標記。所以，即使你找到了一個很好的解決方案btn喜歡的問題，你可能沒有發現網格定義的問題。即bootstrap可能需要兩個新的div標籤包裝和基礎可能只需要一個。所以，我認爲在你的情況下最好的辦法是模塊化一切。即創建各種數量的組件。每個組件都會有三個（或者所需的框架數量）模板。我的意思是在你的情況下，HTML標記看起來更重要，然後是CSS本身。最後，你需要做的是在頂部導入框架庫並使用正確的模板。你不必處理CSS類覆蓋或類似的東西。如果你去那裏，這是一個地獄。

來源

2013-08-18 19:25:03 Krasimir

使用CSS創建抽象

回答

相關問題