我应该如何严格地将样式与html代码分开?

时间:2018-04-26 06:51:34

标签: html css code-separation

在干净的html代码和干净的CSS代码之间划分优先顺序的最常用或最常用的方法是什么?

我认为有两种可能的方法......

您可以使用与样式相关的最小标记来获取HTML代码。缺点是css往往有点乱,当你为不同的对象添加类似的样式时(在这种方法中缺少合适的类),可能有点多余。

另一种方法导致更简洁的css代码,你有不同样式的预定义类,想想w3.css或bootstrap。这次的缺点是你最终可能会得到一个很大程度上依赖于标签的class属性的html代码,有时是几个类的组合;这意味着html标记并没有真正与样式分离。

我意识到没有明确的答案,两个选项之间的界限是浮动的。但是,鉴于您没有使用任何预编译框架,首选方法是什么?

编辑: 问题不在于内联css。它是关于如何考虑使用预定义的CSS类。例如......如果你向某些div添加类似于“w3-panel”的类,那么你可以在html代码中有效地添加一些余量。如果您通过使用选择器专门针对这些div,则保持html不受样式限制。

前者产生更清晰的css代码,后者产生更清晰的html代码。当没有实现框架时,哪条路由是最被接受的路由(通过向html添加类来强制你进行样式化)?

3 个答案:

答案 0 :(得分:-1)

分离的优点是使维护更容易,如果发现css太乱,请查看SASS或SCSS。如果您使用jQuery来操作CSS,那么如果您在CSS文件中定义了它,则会更容易。 Imho是你可以做的最糟糕的选择是将它混合起来 - CSS中的一些定义和HTML中的其他定义 - 你现在可能会觉得它很有用,但是尝试在几个月后更改网站。

答案 1 :(得分:-1)

这实际上取决于您的申请业务。

如果你把样式放在html文件大小的同一个文件中会增加,当你添加每个类型的新css时它会变得混乱,但是因为你的css和html在同一个文件中并且css编写和使用得很好,页面加载时间最小,因为html在同一个文件中找到css。

如果您将样式放在单独的css文件中,它将具有良好的可读性和可访问性,您将拥有单独的样式和标记图层。但是每次加载页面时,包含的css文件也会加载,因此会增加页面加载时间。

如果您的应用程序或html页面是一次,即将来没有太多的补充,并且将保持相同,然后不需要separe css文件。

如果您的应用程序正在增长或html页面经常更新,那么您应该是单独的css文件。

答案 2 :(得分:-1)

就个人而言,我认为最好从一开始就尽可能地分割代码。 (用于标记的HTML,用于样式的CSS等)。

临(+)

  • 更容易进行问题排查
  • 您可以扩展并稍后引入支持工具,例如SASS for CSS等。
  • 任务可以在人与人之间分配。
  • 让其他程序员更容易理解文件的设置。

NEG( - )

  • 有点精力要守纪律,真正保持编码分裂。
  • 您有时需要更大的显示器才能将分割代码并行显示。