声明需要一些更正的元素的内联样式或新类

时间:2018-08-05 15:31:09

标签: html css

我有定义基本类的外部样式表。这些课程在大多数情况下都能胜任。但是,有时某个特定元素只需稍作调整(通常只需调整1),例如print_r(json_decode($_POST));而不是margin-top:0(在类中定义)

对于这种特殊情况,最好使用内联样式,但有人告诉我要使用外部样式表。

仅使用1条规则(在我的情况下为60px)或设置margin-top:0

来定义新类是否更好?

我不关心可读性,因为手工编写的代码通常非常简洁。

示例:

html:

margin inline?

css:

<section class="section-centered clear-margin"></section>

VS

html:

.section-centered{
//stuff here
margin:60px;
}
.clear-margin{
margin-top:0
}

1 个答案:

答案 0 :(得分:0)

简短答案:使用外部样式

长答案:内联 VS 外部

有两个主要问题要解决

性能

假设您在html中添加了小的更正内联样式的10个元素。实际上,这不会对您的性能造成任何损害,在某些情况下,它可能会增加您的初涂效果。实际上,小的内联更改不会增加页面加载。但是,如果添加的内部样式块仅是绘制应用程序的骨架,这将使您的用户更好地了解页面完全加载后的预期结果。

通过仅向像div这样的元素中添加这样的较小更改,您将简化css引擎为该特定div进行查找所需的工作。今天,这确实不明显。

可维护性

向文档添加内联样式时,还将添加更多工作。理论上当然。假设您必须在五个月后进行一些小的设计更改。除了检查元素,调整更改并更新css文件之外,您还必须深入html文件中以找到内联样式并进行相应的更新。这是您实现目标并继续前进的又一步骤。

这还会给您的标记增加更多的干扰,使您难以阅读和理解以进行更改。

现在,仅添加一行内联css最有可能是实现目标的最短工作量。但是从长远来看,它会咬人。

结论

由于这里的主要问题是可维护性,或多或少是主观的,因此没有直接正确的答案。

个人而言,我总是喜欢在外部添加样式。这使我更加专心,并使我更容易调试和稍后进行更改。

此外,我建议您先探索一下您的选项,而不是创建仅添加1个style属性的新类。在大多数情况下,您可以创建一个选择器组合来精确定位您的元素,而不是创建一个新类。