不同宽度字段的 CSS 最佳实践答案

【问题标题】：CSS best practices for fields with different widths不同宽度字段的 CSS 最佳实践
【发布时间】：2014-08-29 00:43:42
【问题描述】：

我正在和我的老板讨论从我们的 HTML 页面中删除所有样式，但我们发现了一个小问题。在我们的表单字段中有不同的宽度，我想做正确的事情。实现此目的的“正确方法”/最佳实践是什么？

我们有一个 CSS 类“textField”

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

所以我们应该在 html 页面上保留style='width:100px'？

我们应该创建另一个仅具有宽度的类并一起使用吗？

例如：

size100 { 
   width: 100px
} 

size200 { 
   width: 200px
}

并使用class="textField size100"?我知道名称 size100 不是一个好习惯，如果这是一个好方法，我应该改用什么名称？

有没有更好的办法？

【问题讨论】：

正确的方法是添加 width: 100px;到元素本身。通过创建大量“实用程序/帮助程序类”，您实际上所做的只是使您的 html 变得混乱，而不是样式而是类名
它是同类中唯一的文本字段，还是多个文本字段的宽度存在差异？还是特定形式的样式？
这不是对“最佳实践”的讨论，更多的是个人对设计政策的偏好。我发现了一种“少即是多”的最佳工作方式。你最好制定你的设计策略。决定什么对你的页面的显示方式很重要，什么是必要的。只要你的 CSS 有条理和一致，你就不应该有混乱的问题。
我知道你在问 CSS，但是如果你的目的是将特定容器中的所有标签设置为相同的宽度，那么还有一个 JS/jQuery 解决方案......你可以消除 css只需一行 jquery 代码$('#containingDIV span,#containingDIV label').width(100); 或者，有一个 autowidth.js 文件漂浮在互联网上，它会自动调整容器中最宽标签的宽度。

标签： html css

【解决方案1】：

最好使用像这样的非显示类名：

text-medium
text-small
text-large

然后把规则写成这样：

.text-medium {width: 200px;}

主要原因是：

可以理解。
它不依赖于大小。
如果我们需要更改大小或使其具有响应性，您只需要更改 CSS 中的值而不是规则名称！ :)

【讨论】：

谢谢，对我有很大帮助

【解决方案2】：

另一种方法是在表单中使用网格系统，就像在引导框架中使用的那样： http://getbootstrap.com/css/#forms-control-sizes

查看上面的链接，他使用不同列大小的类，你可以在所有形式中使用它。

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

其中，input-lg = 大，input-sm = 小。

【讨论】：

【解决方案3】：

我会像你提到的那样使用多个类。 class="textField small", class="textField medium", ...

.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;
 }

这样您只需编写一次输入样式，然后只更改需要的内容。如果您将来想更改边框（或颜色、背景等），您可以在一个地方更改它，而无需更新一堆不同的类

【讨论】：