如何在需求變更時修改CSS？

假設我被要求生成幾張有表格的頁面。原始要求是所有表格都是500px。如何在需求變更時修改CSS？

我會寫我的CSS如下：

table 
{ 
    width: 500px; 
}

這將全線適用於所有表。現在，如果他們改變了這個要求，那麼一些表格就是600px。什麼是修改CSS的最佳方式？我是否應該給表格類

table.SizeOne 
{ 
    width: 500px; 
} 

table.SizeTwo 
{ 
    width: 600px; 
}

或者是否有更好的方法來處理這種變化？

來源

2010-06-17 DaveDev

這看起來像是完美的方式來做到這一點。我這樣做，這是什麼類和id是:) – Kyle 2010-06-17 12:22:21

這似乎是一個很好的方法，雖然你可能想給他們更有意義的名字;） – ChrisF 2010-06-17 12:23:04

RE我已經使用的CSS名稱，它只是爲了爲例。我生產的任何真正的CSS都被命名得更有意義。謝謝大家:-) – DaveDev 2010-06-18 09:44:52

您的建議確實需要您爲所有表格添加一個類，現有的表以及新的寬表;儘管你說「幾頁」，因此人們會認爲只有幾張桌子。

如果你可以考慮500px的表作爲標準和600px的作爲例外，然後繼續設置默認很可能會更加有用：

table 
{ 
    width: 500px; 
} 

table.Wide /* or a more semantic class name */ 
{ 
    width: 600px; 
}

來源

2010-06-17 12:35:59 e100

或者有3.一個默認的「表」，然後新的叫做「table.SizeOne」和「table.SizeTwo」。（也許使用更好的名字）。 – Johan 2010-06-17 13:15:20

我會給他們與有意義的名稱而不是SizeOne和SizeTwo的類，但是，這是最好的方法。

來源

2010-06-17 12:23:09

你是對的 - 這只是爲了舉例。我生成的任何真正的CSS都具有反映它的名稱，而不是它的顯示方式。 – DaveDev 2010-06-18 09:43:22

我個人喜歡使用以我的工作內容命名的類，例如導航或內容。如果您使用類名稱來指定大小，那麼感覺就像是關於執行內聯樣式的方式。一個進來看着css的人不會真正知道他們在做什麼。

來源

2010-06-17 12:24:35

我在大多數情況下都是這樣做的，但是如果與描述性的「id」結合使用類名來指示大小並沒有那麼差。然後可以使用'＃search-result .page-wide'和'＃search-result .column-wide'。這是非常明確和描述性的。 – 2010-06-18 08:53:40

你是對的 - 這只是爲了舉例。我生成的任何真正的CSS都具有反映它的名稱，而不是它的顯示方式。 – DaveDev 2010-06-18 09:43:52

那麼有道理，班級的想法是我喜歡的方式。我會做兩個類而不是覆蓋所有表，因爲我已經運行了更多的重構問題，以避免在稍後添加的程序的新區域中使用泛型選擇器。 – 2010-06-18 12:30:38

-5

我會寫：

table 
{ 
    width: 500px; 
}

，並使用版本控制類似於SVN。你的建議讓事情變得非常複雜。或者沒有版本控制：

table 
    { 
     /*width: 500px;*/ 
     width: 600px; 

    }

在我看來，添加大量類會失敗CSS的對象。

來源

2010-06-17 12:31:12 matpol

OP只需要*一些*表格就是新的寬度。其他人仍然在老。 – ChrisF 2010-06-17 12:32:42

哎呀 - 不要自己 - 總是正確地閱讀問題 – matpol 2010-06-18 09:05:13

您可以進一步定義類，這些類使用body類（爲body標籤指定的類）重寫基本設置。例如，如果你的表一般寬度設置爲100，在一個特定的頁面（與bodyclass「第2頁」），你需要有寬度爲50像素，可以做到像

table{ 
width: 100px; 
} 

.page2 table { 
width :50px; 
}

所以第二類將在bodyclass =「page2」的唯一頁面以及其他任何寬度將爲100的頁面上遍歷前者。

根據段落設置正文的類名是一個好習慣。

來源

2010-06-17 12:32:51

如果你有幾個不同的頁面寬度的佈局，你可能受益於創造一些佈局類，並將其安裝到你的身體（或其他含標籤）：

<body class="wide"> 
    <!-- stuff --> 
    <table>...</table> 
</body>

然後在你的CSS：

table {width:500px} /* defaults for all tables regardless of class */ 
body.wide table {width:600px} /* overrides for specific layouts */ 
body.slim table {width:300px}

它看起來像浪費時間，它會爲只是表，但如果你也不同樣式的圖像，divs等，你可以節省很多的HTML標記。

#wrapper {width:500px;padding:20px 10px} 
body.wide #wrapper {width:600px} 
body.slim #wrapper {width:300px;padding:10px 5px} 

table {width:500px} /* defaults for all tables regardless of class */ 
body.wide table {width:600px} /* overrides for specific layouts */ 
body.slim table {width:300px} 

img {width:500px} 
body.wide img {width:600px} 
body.slim img {width:300px}

你99你的HTML％保持不變（如果你從數據庫中提取這一點，不希望每次使用它的時間去適應它非常有用），你只需要改變身體類。

來源

2010-06-17 12:39:32 Oli

最好的方法是根據他們的父母是誰來修改表格。例如，某些頁面應該有不同的ID，如：

<body id="contacts"> 
    <table> 
    <tr> 
     <td>Content</td> 
    </tr> 
    </table> 
</body>

所以在你的CSS是：

table { 
    width: 500px; 
} 

#contacts table { 
    width: 600px; 
}

這種方法的好處是，你在CSS完全工作，而不需要添加任何東西到您的HTML文件。爲這樣的事情添加類只會讓你的代碼在未來變得難以管理。

如果您的HTML沒有正確編寫級聯的標記，那麼您最好將適當的ID添加到元素中，而不是將這些類添加到表中。對於你將要投入的工作來說，收益要大得多。

來源

2010-06-17 12:39:59 nyousefi

只要不需要在同一頁上同時具有500像素寬和600像素寬的表格，此解決方案就沒有問題。那麼這個解決方案將無法工作。 – 2010-06-17 12:51:52

當然，在這個例子中，我們假設每個頁面有1個表格，但即使使用了多個表格，總體思路也是這樣：首先看看您是否可以通過他們的祖先指定要嘗試設置的元素。如果這不是一個選項，那麼將類或ID添加到表本身。 – nyousefi 2010-06-17 13:17:19

對於上面評論中的解決方案。您應該考慮將其添加到答案中。 – 2010-06-18 08:42:36

這對我來說不像是一個CSS問題，就像它改變需求和CSS ......或者更具體地說，需求在CSS的背景下的可追溯性......

這將適用於所有表的所有表格。現在，如果他們改變了需求，那麼一些表格是600px。

這個要求不僅僅是說「一些表格是600px寬」，如果是這樣，你需要更好的方法來引出需求。

相反，它可能類似於「HR'staff directory'頁面上的表格將爲600px寬。」使CSS規則特別反映！

body#staff-directory table { 
    width:600px; 
}

...或「搜索結果的表將被600px的寬。」：

table.search-results { 
    width:600px; 
}

你可以滾你的眼睛，想象「但是，我有這麼多類似的CSS規則！」但他們已經改變了一次想法，所以當他們再次這樣做時不要感到驚訝！

當客戶再次更改要求並說「HR'staff directory'頁面上的表格將寬度爲600px;搜索結果表格將寬度爲800px並且其他所有其他表格桌子寬500px。「
現在，那些不起眼的，非描述性的CSS屬性「Size1」和「Size2」已經將你擊中了腳。

來源

2010-06-17 12:46:39

因爲我故意希望在我的CSS規則中使用'id'和'class'，所以將其重新捲起。 – 2010-06-17 13:59:04

這是我應該寫的！您可以擁有一種風格並將其應用於多個選擇器，例如 body＃staff-directory table，table.search-results { width：600px; } 這是我如何瘦kCSS應該做的。 – matpol 2010-06-21 08:22:37

如何在需求變更時修改CSS？

回答

相關問題