我知道把所有样式都放在CSS文件中是最好的做法,因为这样更加整洁。
但是,样式是内联还是在CSS中真的很重要吗?
以下为编辑内容
我的计划是将样式放在我的主页面中,所有其他页面都将使用主页面……我相信正确的术语不是“INLINE”,而是“嵌入式”?
我知道把所有样式都放在CSS文件中是最好的做法,因为这样更加整洁。
但是,样式是内联还是在CSS中真的很重要吗?
以下为编辑内容
我的计划是将样式放在我的主页面中,所有其他页面都将使用主页面……我相信正确的术语不是“INLINE”,而是“嵌入式”?
来自经验丰富者而非“理论派”的一些想法:
对于大型应用程序,将所有样式存储在一个CSS文件中是难以维护的。你需要在文件中执行文本搜索以找到所需的样式,或者要滚动很长时间,而当进行更新时可能会忽视相关的样式。
如果某些样式特定于页面而不是全局使用,则更易于维护它们位于标签内的
使用内联CSS:
内联:
<div style="width:100px; height:100px;"></div>
<div style="width:100px; height:100px;"></div>
外部样式表或者在头部嵌入css类[内嵌样式]:
<div class="big"></div>
<div class="big"></div>
根据您的编辑:看起来这不是像我上面示例中的内联CSS,而是与使用外部文件相同的想法,因此如果您想这样做,请继续进行,它是一样的。
将样式存储在一个文档中有助于您控制整个项目。此外,代码量更少,维护和应用更改更加方便。
不过,如果你只需要查看一个地方而不是所有的标题/内联内容,那么只需更改CSS会更容易。
另外一件事,如果没有任何内联的CSS / JavaScript,你的标记看起来会更加清晰。
对于维护来说,使用 CSS 文件会更容易一些...是否真的重要取决于您认为什么是重要的...为什么不使用 CSS 文件呢?
@Etienne,这种做法有一个缺点,如果你想要部署任何变更到生产环境,你必须建立构建并推送它。
如果你将一切都保持为CSS,你只需要推送CSS文件的更改并使负载均衡器缓存失效即可。
我认为这是值得一提的好点。
何时最好使用内联样式
在某些情况下,内联样式是最佳解决方案,例如当一些样式通过服务器端代码(例如WordPress插件)从用户输入动态创建,仅应用于单个HTML元素时,将其插入到外部CSS文件中只会引起问题:
真实用例:
想象一种情况,用户想要上传一张图片并将其用作 HTML 元素的背景。旧规则只需使用 style="background-image:URL()"
。但是,根据新规则,一些代码必须创建并保存一个外部文件,仅使用代码 style="background-image:URL()"
,为其创建 CSS 类,在 HTML 组件中编写它,并使用一行代码加载此 CSS 文件。完全没有意义。还要考虑到每次用户更新图像时都必须执行此操作。
最终结果:
何时最好使用外部 CSS 文件
除上述情况外的所有其他情况,简而言之,当样式固定且永远不会更改时,应将其放入外部 CSS 文件中。