Question

目前我的css设置如下：

.options {
    position: absolute;
    height: 50px;
    width: 50px;
    border: 3px solid black;
    margin-left: 14%;
    top: 0;
}

#opt1 {
    margin-top: 5.4%;
}

#opt2 {
    margin-top: 12.4%;
}

#opt3 {
    margin-top: 19.4%;
}

#opt4 {
    margin-top: 26.4%;
}

#opt5 {
    margin-top: 33.4%;
}

当我真的只改变CSS中的一个元素时，那是很多代码。在Javascript中执行此操作会更好吗？或者运行它的CSS性能更好？我想坚持最佳实践，我不确定这是否是一种可以接受的方式来写这个或者我是否应该改变一些东西。在此先感谢，我对此很陌生。

编辑：为何选票？我说了一些令人难以置信的愚蠢话吗？

Edit2：谢谢您的解释。

Answer 1

在不了解项目背景的情况下：你的方式很好。

我在这种情况下所做的是每个项目只使用一行，使代码更具可读性：

#opt1 { margin-top:  5.4%; }
#opt2 { margin-top: 12.4%; }
...

我没有看到任何使用JavaScript来设置项目样式的理由。

在另一个答案中提出了内联样式，如果有意义取决于您的项目：您是否需要其他内容（JS）的ID？您是否希望将所有CSS代码放在一个文件中，或者使用内联CSS可以使您的项目更具可读性？

作为结论：没有几行代码，因为每个元素都有另一个边距值。无论方法如何，您都必须以某种形式编写该代码。

Answer 2

我不完全确定您对此代码的关注是什么，但假设#optX { margin-top .. }规则仅适用于您网页上的单个元素，请将其作为一次性内联样式写入元素本身：

<div id="opt1" style="margin-top: 5.4%">

当它甚至无法重复使用时，没有理由将所有内容放入外部CSS文件中。

包含许多类似的CSS属性时，最佳实践是什么？

2 个答案: