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

Question

我和老板讨论了从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
} 

并使用CCD_ 2？我知道size100这个名字不是一个好的做法，如果这是一个好方法，我应该用什么名字来代替？

有更好的方法吗？

Answer 1

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

text-medium
text-small
text-large

然后制定这样的规则：

.text-medium {width: 200px;}

主要原因是：

1. 这是可以理解的
2. 它不取决于大小
3. 如果我们需要更改大小或使其响应，您只需要更改CSS中的值，而不是规则名称！：）

Answer 2

另一种方法是在表单中使用网格系统，就像在bootstrap框架中使用的一样：http://getbootstrap.com/css/#forms-控制尺寸

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

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

其中，输入lg=大，输入sm=小。

Answer 3

我会像您提到的那样使用多个类。class="textField small"，class="textField medial"。。。

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

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