1. 首頁
  2. 問答
  3. 設計簡單的CSS自定義HTML指南

設計簡單的CSS自定義HTML指南

2009-09-22 27 views
1

我正在做一個Saas項目，我們希望每個客戶都能夠上傳「他的」網站的CSS頁面。 （儘管實際上，所有客戶的網站都使用虛擬主機託管）。設計簡單的CSS自定義HTML指南

在設計頁面的html時有什麼好的指導，以便可以應用css 後驗。

來源

2009-09-22 flybywire

回答

7

您可以看看代碼CSS Zen Garden，它專門設計爲可風化的。

通常，您應該使用最自然的HTML元素作爲所需的功能。列表應該是列表，導航鏈接et.c.

使用div標籤分隔邏輯分區中的內容爲了使元素易於定位，請在其上設置適當的類和標識符。

爲了讓鏈接真正風格化，你可以簡單地添加文本週圍的跨度標籤：通過添加一個

<a href="#"><span>text</span></a>

這種方式很容易通過「sliding doors」技術給它就像看一個動態按鈕，錨定標記的背景和跨度標記的另一個背景。如果鏈接不是樣式的，span標籤完全不影響佈局。

來源

2009-09-22 08:23:47 Guffa

1

不要這樣做。

客戶將擰緊設計，並會打電話給您重設。

更好地製作一個BIG自定義部分，其中只有很多選項只能生成有效值。允許上傳圖片，在提交時檢查其大小限制。

自定義CSS也可能是攻擊的來源。我們昨天談到了它。

Is it safe to allow users to edit css?

無論如何，只能爲相對簡單的頁面來進行這種定製的，之前的所有，只是頁面。我們在這裏談論一個SaaS應用程序，它通常有一個非常複雜的用戶界面試圖模仿經典的桌面軟件。我懷疑客戶將能夠正確定製分別複雜的CSS。那麼，不是沒有聘請專業的程序員，會一直呼喚你回去清理事情。簡單地提供高級設置屏幕會更容易。

來源

2009-09-22 08:13:02

+0

謝謝。這裏每個客戶只能自定義在他自己的域（www.customer1.com，www.customerx.net）下可查看的頁面，所以我不認爲存在css漏洞，不是嗎？ – flybywire 2009-09-22 09:04:20

+0

是的，我也不會擔心css攻擊，只要清楚這種攻擊的責任在於客戶。 – 2009-09-22 09:06:19

1

有些可能是公然明顯：

  • 名稱所有的類，有一個一致的和明顯的命名方案的ID，但不要去命名的一切，你可以讓更小的對象是兒童是無名對象，如果他們都是一樣的。

  • 切出JavaScript改變頁面外觀的任何東西。用戶將打破它。

  • 不要使用CSS重置樣式表。這會讓事情變得複雜。如果用戶打算處理CSS，讓他們處理跨瀏覽器問題。

  • 所有的HTML將是valid，不是嗎？

來源

2009-09-22 08:56:41 squeeks

1

基本上，開始了與合理的語義（和有效的！）HTML，並且一定要使用相當廣泛的內容（不要讓一切DIV）和類的陣列（撒上寬鬆的地方似乎是適當的。使用各種元素可以獲得更具可讀性的CSS和HTML，這對於易於定型非常重要。

然後，不要害怕添加額外元素只是爲了使樣式更容易。一個表格表示某種類型的網格（即，不僅僅是一個普通的文本表格），並且您希望特定的數據單元成爲關注的焦點，然而，儘管可以簡單地設置一個類td，你最好在td中嵌套一個新的元素（並在其上設置類）。像這樣的額外嵌套元素大大減少了對跨瀏覽器甚至可能不支持的複雜CSS選擇器的需求。一個元素擁有多個類比擁有多個含義的單個類更好;而且對於一個班級來說，在任何地方都有相同的意義（即不要依賴於其他班級）。

您的html將是一個API的種類，所以保持它的理解是很重要的。 Javascript會讓事情變得棘手，所以如果你需要的話，我會盡量讓JavaScript不要使用css的方式 - 確保JavaScript對dom所做的任何修改都與你的「API」一致 - 不要硬編碼特定的佈局覆蓋到的JavaScript。如果javascript需要創建一個彈出窗口來顯示額外的信息，比方說，然後只需在適當的位置添加一個<div class="js-extrainfo-pop>...</div>到文檔，讓css決定如何設置彈出窗口的樣式，而不是處理z-indexes，display：absolute等。在JavaScript中。這樣，客戶端CSS只需要學習一個API - 你的html結構 - 而不是圍繞一個JS-疣。 DOM是一個可管理的界面，JavaScript比較複雜。

最後，大多數客戶可能只希望對基本佈局進行微小的修改;所以不要害怕在必要時使用表格。如果不使用表格，通過css應用基於網格的佈局是非常棘手的（通常是不可能的）。至少，您需要使用與table-tbody-tr-td結構平行的語法結構，並讓人們通過css的display：table- *規則來設置表格的樣式（這在各處並不受支持好）。如果您確定需要網格，請使用表格並停止擔心。真正的css「英雄」無論如何都會覆蓋你的任何「隱式」佈局，並且從合理的基點開始，將使初始未被設計的頁面看起來更加明顯，並且將幫助客戶做出他們自己的樣式選擇。

綜上所述，

  1. 確保您的HTML足夠詳細（有疑問時使用額外的嵌套元素或一個額外的類）。
  2. 你的HTML應該從語義上「顯而易見」如果只是爲了可讀性
  3. 不要害怕在一個特定類型的佈局的強烈暗示。
  4. 確保您的API「乾淨」 - 不要通過包含樣式敏感的javascript來引入複雜性。

來源

2009-09-22 09:04:56

0

簡短提示：我認爲語義是這種方法的關鍵。我見過很多網站傾向於命名他們的類如floatleft,width100px或right_column。這意味着你在HTML中表示你期望網站的樣子。爲CSS類提供語義，如側欄或小部件，這使得HTML和CSS代碼更具可讀性。

也許看看HTML5以及這將引入的新標籤？好的blogpost可以在Woork找到：CSS code structure for HTML5

來源

2009-09-22 09:30:50

相關問題

 相關問題