Che*_*hiz 163 css inline-styles
当我看到网站入门代码和示例时,CSS总是在一个单独的文件中,名称类似于"main.css","default.css"或"Site.css".但是,当我编写一个页面时,我经常试图将CSS与DOM元素内联,例如在图像上设置"float:right".我觉得这是"糟糕的编码",因为在例子中很少这样做.
我知道如果样式将应用于多个对象,那么遵循"不要重复自己"(DRY)并将其分配给每个元素引用的CSS类是明智的.但是,如果我不在另一个元素上重复CSS,为什么不在编写HTML时内联CSS呢？
问题:使用内嵌CSS被认为是坏的,即使它只会用在那个元素上？如果是这样,为什么？
示例(这很糟糕吗？):
<img src="myimage.gif" style="float:right" />
Dav*_*vid 201
当您想要使网站看起来不同时,必须更改100行代码.这可能不适用于您的示例,但如果您使用内联css等
<div style ="font-size:larger; text-align:center; font-weight:bold">
在每个页面上表示页眉,它将更容易维护
<div class="pageheader">
如果在单个样式表中定义了页眉,那么如果要更改页眉在整个站点中的显示方式,可以在一个位置更改css.
但是,我会成为一个异教徒,并说在你的例子中,我认为没有问题.您的目标是单个图像的行为,可能必须在单个页面上查看,因此将实际的css放在样式表中可能会有点过分.
vij*_*had 65
拥有不同的css文件的优点是
Kzq*_*qai 25
或者:<style>标签不再只是头部了!
假设您正在调试,并希望修改您的page-css,使某个部分看起来更好.不是以快速,肮脏和不可维护的方式创建你的样式,你可以做我现在做的事情并采取分阶段的方法.
永远不要创建你的css内联,我的意思是: <element style='color:red'>甚至<img style='float:right'>它非常方便,但是后来在真实的css文件中没有反映实际的选择器特异性,如果你保留它,你会后悔维护负载.
<style>相反的原型您将使用内联css的位置,而是使用页内<style> 元素.试试吧!它适用于所有浏览器,因此非常适合测试,但允许您在需要时随时将此类css优先移动到全局css文件中!(*只要知道选择器只有页面级别的特异性,而不是站点级别的特异性,所以要小心过于笼统)就像你的css文件一样干净:
<style>
.avatar-image{
float:right
}
.faq .warning{
color:crimson;
}
p{
border-left:thin medium blue;
// this general of a selector would be very bad, though.
// so be aware of what'll happen to general selectors if they go
// global
}
</style>
有时你甚至不是问题,而且你正在处理别人的内联css,你必须重构它.这是页面的另一个很好的用途<style>,因此您可以直接剥离内联css并在重构时立即将它放在类或id或选择器的页面上.如果您对选择器的使用非常谨慎,那么您可以将最终结果移动到最后的全局css文件,只需复制和粘贴即可.
将每一位css立即转移到全局css文件有点困难,但是对于页内<style>元素,我们现在有了替代方案.
Dan*_*eld 20
除了其他答案...... 国际化.
根据内容的语言 - 您经常需要调整元素的样式.
一个明显的例子是从右到左的语言.
假设你使用了你的代码:
<img src="myimage.gif" style="float:right" />
现在说你希望你的网站支持rtl语言 - 你需要:
<img src="myimage.gif" style="float:left" />
所以现在,如果你想支持这两种语言,就无法使用内联样式为float赋值.
使用CSS,可以使用lang属性轻松处理
所以你可以这样做:
img {
float:right;
}
html[lang="he"] img { /* Hebrew. or.. lang="ar" for Arabic etc */
float:left;
}
iss*_*eng 16
内联CSS将始终优先于任何链接样式表CSS.如果您去写一个正确的级联样式表,并且您的属性未正确应用,这可能会给您带来巨大的麻烦.
它还会在语义上损害您的应用程序:CSS是关于将表示与标记分离.当你把两者纠缠在一起时,事情变得更加难以理解和维护.这与将数据库代码与服务器端的控制器代码分离的原理类似.
最后,假设您有20个图像标记.当你决定将它们漂浮在左边时会发生什么？
Syl*_*ain 11
使用内联CSS更难维护.
对于您想要更改的每个属性,使用内联CSS要求您查找相应的HTML代码,而不是只查看明确定义且希望结构良好的CSS文件.
这仅适用于手写代码.如果你生成代码,我认为在这里使用内联样式是可以的,特别是在元素和控件需要特殊处理的情况下.
DRY是手写代码的一个很好的概念,但在机器生成的代码中,我选择"Demeter法则":"什么属于一起,必须保持在一起".操作生成Style标签的代码比在另一个"远程"CSS文件中第二次编辑全局样式更容易.
你问题的答案:这取决于......
小智 8
除了其他答案之外，另一个问题是它违反了 MDN 推荐的内容安全策略，https://infosec.mozilla.org/guidelines/web_security#content-security-policy
他们使用的理由是内联javascript是有害的、XSS 等，但这并不能证明为什么内联样式也应该被禁用。也许有人可以评论为什么，但在那之前，我只会依赖权威并声称：这是避免内联样式的安全最佳实践。
小智 6
按照你喜欢的方式编码，但如果你将其传递给其他人，最好使用其他人所做的。有 CSS 的原因，还有内联的原因。我两者都用，因为这对我来说更容易。当你有很多相同的重复时，使用 CSS 是很棒的。然而，当你有一堆具有不同属性的不同元素时，这就成了一个问题。对我来说，一个例子是当我在页面上定位元素时。每个元素都有不同的 top 和 left 属性。如果我把所有这些都放在 CSS 中，那真的会让我在 html 和 css 页面之间来回混乱。因此，当您希望所有内容都具有相同的字体、颜色、悬停效果等时，CSS 非常有用。但是当所有内容都有不同的位置时，为每个元素添加 CSS 实例确实很痛苦。但这只是我的意见。当您必须深入研究代码时，CSS 在大型应用程序中确实具有很大的相关性。使用 Mozilla Web 开发人员插件，它将帮助您找到元素 ID 和类。
我认为，即使您希望为一个元素使用某种样式，也必须考虑是否可能要在不同页面的同一元素上应用相同样式。
一天，有人可能会要求更改或在每个页面上的同一元素上添加更多的样式更改。如果您在外部CSS文件中定义了样式，则只需在其中进行更改，并将其反映在所有页面的同一元素中，从而省去您的麻烦。:-)