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
}

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

有更好的方法吗？

Answer 1

最好使用这样的非表示类名称：

text-medium
text-small
text-large

然后按照这样的规则：

.text-medium {width: 200px;}

主要原因是：

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

Answer 2

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

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

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

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

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

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

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

3 个答案: