当我看到网站的初始代码和示例时,CSS总是在一个单独的文件中,命名为“main.css”,“default.css”或“Site.css”。然而,当我编写一个页面时,我经常试图将CSS与DOM元素放在一起,例如在图像上设置“float: right”。我觉得这是“糟糕的编码”,因为在示例中很少这样做。

我明白,如果样式将应用于多个对象,明智的做法是遵循“不要重复自己”(Don't Repeat Yourself, DRY),并将其分配给每个元素引用的CSS类。然而,如果我不会在另一个元素上重复CSS,为什么不内联CSS,因为我写HTML?

问题是:使用内联CSS被认为是不好的,即使它只用于该元素?如果有,为什么?

例子(这样不好吗?)

<img src="myimage.gif" style="float:right" />

当前回答

内联CSS总是优先于任何链接样式表CSS。如果您编写了一个合适的级联样式表,而您的属性没有正确应用,这会让您非常头疼。

它还在语义上损害了应用程序:CSS是关于将表示与标记分离的。当您将两者纠缠在一起时,事情就变得更加难以理解和维护。这与在服务器端将数据库代码与控制器代码分离的原理类似。

最后,假设您有20个这样的图像标记。当你决定它们应该向左浮动时会发生什么?

其他回答

使用内联CSS更难维护。

对于您想要更改的每个属性,使用内联CSS要求您查找相应的HTML代码,而不是只在定义清晰且结构良好的CSS文件中查找。

快速css原型的html5方法

或者:<style>标签不再只是用于头部!

黑客CSS

假设您正在调试,并希望修改页面css,使某个部分看起来更好。您可以像我现在所做的那样,采用分阶段的方法,而不是快速、肮脏和不可维护的方式来创建您的内联样式。

没有内联样式属性

永远不要创建你的css内联,我的意思是:<element style='color:red'>或甚至<img style='float:right'>这非常方便,但不能在以后的实际css文件中反映实际的选择器特异性,如果你保留它,你会后悔以后的维护负载。

用<style>代替原型

在使用内联css的地方,应该使用in-page <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

有时候你甚至不是问题所在,你在处理别人的内联css,你必须重构它。这是page中<style>的另一个重要用途,这样当重构时,您可以直接剥离内联css并立即将其放在页面的类、id或选择器中。如果你对你的选择器足够小心,你可以把最终的结果移动到全局css文件的末尾,只需要复制和粘贴。

要立即将所有css文件传输到全局css文件中有点困难,但是使用in-page <style>元素,我们现在有了替代方案。

当你想让网站看起来不一样时,不得不修改100行代码。这可能不适用于你的例子,但如果你使用内联css的事情

<div style ="font-size:larger; text-align:center; font-weight:bold">

在每个页面上表示一个页眉,这样维护起来会容易得多

<div class="pageheader">  

如果pageheader定义在一个单独的样式表中,那么如果你想改变整个站点的页面header的外观,你只需在一个地方更改CSS。

然而,我要说的是,在你的例子中,我认为没有问题。您针对的是单个图像的行为,它可能必须在单个页面上显示正确,因此将实际的css放在样式表中可能会过度。

页面内css是目前最流行的,因为谷歌认为它比从单独文件加载的css提供了更好的用户体验。一个可能的解决方案是将css放在一个文本文件中,用php动态加载它,并将它输出到文档头中。在<head>部分包括:

<head> ...

<?php
$codestring = file_get_contents("styles/style1.txt");
echo "<style>" . $codestring . "</style>";
?>

... </head>

将所需的css放在styles/style1.txt中,它将在文档的<head>部分中输出。这样,你就可以使用样式模板style1.txt,它可以被任何和所有页面共享,允许站点范围内的样式更改仅通过一个文件进行。此外,这种方法不需要浏览器从服务器请求单独的css文件(从而最小化检索/呈现时间),因为所有内容都是由php一次性交付的。

实现此功能后,可以在需要的地方手动编码单独的一次性样式。

内联CSS总是优先于任何链接样式表CSS。如果您编写了一个合适的级联样式表,而您的属性没有正确应用,这会让您非常头疼。

它还在语义上损害了应用程序:CSS是关于将表示与标记分离的。当您将两者纠缠在一起时,事情就变得更加难以理解和维护。这与在服务器端将数据库代码与控制器代码分离的原理类似。

最后,假设您有20个这样的图像标记。当你决定它们应该向左浮动时会发生什么?