不同寬度字段的CSS最佳實踐

我正在和老闆討論如何從HTML頁面中刪除所有樣式，但是我們發現了一個小問題。在我們的表單域中有不同的寬度，我想把事情做好。完成此操作的「正確方式」/最佳實踐是什麼？不同寬度字段的CSS最佳實踐

我們有一個CSS類「文本框」

.textField { 
    background-color: White; 
    border: 1px solid gray; 
    color: Black; 
    font-family: Tahoma; 
    font-size: 11px; 
    font-weight: bold; 
    text-align: left; 
}

所以我們應該留在style='width:100px'在HTML頁面？

我們應該創建另一個類只是寬度和一起使用？

例：

size100 { 
    width: 100px 
} 

size200 { 
    width: 200px 
}

，並使用class="textField size100"？我知道名稱size100不是一個好習慣，如果這是一個好方法，我應該用什麼名字代替？

有沒有更好的方法？

來源

2014-08-28 Shadi

正確的方法是增加寬度：100px;到元素本身。通過創建大量的「實用程序/幫助程序類」，您實際上所做的只是混淆您的html，而不是使用樣式而是使用類名稱 – Luke 2014-08-28 15:34:28

它是唯一的文本字段，還是跨越多個文本字段的寬度有變化？或者某種形式的特定風格？ – Evan 2014-08-28 15:36:15

這不是一個關於「最佳實踐」的討論，更多的是個人對設計政策的偏好。我發現少一點是更好的工作方式。制定出你的設計策略你會做得最好。決定什麼是重要的，以顯示您的網頁，什麼是必要的。只要你保持你的CSS組織和一致，你不應該有混亂的問題。 – gmiley 2014-08-28 15:39:13

這是更好地使用非表象的類名像這樣：

text-medium 
text-small 
text-large

，然後把規則是這樣的：

.text-medium {width: 200px;}

的主要原因是：

這是可以理解的。
它不依賴於大小。
如果我們需要更改大小或使其具有響應性，您只需更改CSS中的值而不是規則名稱！ :)你的形式

來源

2014-08-28 15:36:06

謝謝，它會幫助我很多 – Shadi 2014-08-28 17:57:54

另一種方法是使用一個網格系統，就像在引導框架中使用： http://getbootstrap.com/css/#forms-control-sizes

檢查上面的鏈接，他使用類不同的列的大小，你可以在所有使用它你的形式。

<input class="form-control input-lg" type="text" placeholder=".input-lg">

其中，input-lg = large，input-sm = small。

來源

2014-08-28 15:43:33 user3632930

我會使用你提到的多個類。

.textField { 
    background-color: White; 
    border: 1px solid gray; 
    color: Black; 
    font-family: Tahoma; 
    font-size: 11px; 
    font-weight: bold; 
    text-align: left; 
} 

.textField.small { 
    width:100px; 
} 

.textField.medium { 
    width:200px; 
}

這樣，你寫的輸入風格一次，只改變需要什麼類=「文本框小」的class =「文本框中」，......。如果你想在將來改變邊界（或顏色，背景等），你可以在一個地方改變它，而無需更新一堆不同的類

來源

2014-08-28 16:43:42 Zach

不同寬度字段的CSS最佳實踐

回答

相關問題