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

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

我们有一个css类“textField”

所以我们应该在html页面上使用

style='width:100px'

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

例：

size100 { 
   width: 100px
} 

size200 { 
   width: 200px
} 

并使用

class=“textField size100”

？我知道名称

size100

不是一个好方法，如果这是一个好方法，我应该使用什么名称来代替

---

有更好的方法吗？

最好使用以下非表示性类名：

text-medium
text-small
text-large

然后把规则放在下面：

.text-medium {width: 200px;}

主要原因是:

这是可以理解的

它不取决于大小

如果我们需要更改大小或使其响应，您只需要更改CSS中的值，而不是规则名称！：）

---

另一种方法是在表单中使用网格系统，如在引导框架中使用：

检查上面的链接，他使用不同列大小的类，您可以在所有表单中使用它

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

---

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

我将使用您提到的多个类。class=“textField small”，class=“textField medium”

---

这样，您只需编写一次输入样式，并且只需更改所需的内容。如果您想在将来更改边框（或颜色、背景等），您可以在一个位置更改边框，而无需更新大量不同的类

正确的方法是添加宽度：100px；到元素本身。通过创建大量的“实用程序/帮助程序类”，您真正要做的只是将html弄乱，而不是样式，而是类名称。这是唯一的文本字段吗？还是多个文本字段的宽度存在差异？或者是某种形式的特定风格？这不是对“最佳实践”的讨论，而是个人对设计政策的偏好。我发现少即是多的方法是最好的。通过制定设计策略，您会做得最好。决定什么对页面的显示方式很重要，什么是必要的。只要你保持CSS的组织性和一致性，你就不会有混乱的问题。我知道你在问CSS，但如果你的目的是将特定容器中的所有标签设置为相同的宽度，那么还有一个JS/jQuery解决方案……你可以用一行jQuery代码

$（“#containingDIV span，#containingDIV label”）.width（100）；

或者，互联网上有一个autowidth.js文件，它将自动调整宽度，并使用容器中最宽的标签。谢谢，这将对我帮助很大

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

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