当我看到网站的初始代码和示例时,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" />

当前回答

我们已经创建了一个模板驱动的工件生成器,它为任何类型的文本工件——HTML、XML、计算机语言、非结构化文本、DSV等——提供了包含文件的功能(例如,它非常适合处理普通Web或手动页面的页眉和页脚,而无需脚本)。

一旦你有了它,并使用它在你的“head”标签中提供“style”标签,“关注点分离”参数就消失了,取而代之的是“我们必须在对模板的每次更改后重新生成”和“我们必须从它生成的内容中调试模板”。自从第一种计算机语言获得预处理器(或者有人开始使用M4)以来,这些抱怨就一直存在。

总的来说,我们认为CSS文件或“style”标签的元化功能比元素级样式化更简洁,更不容易出错。但这确实需要一些专业判断,所以新手和散漫的人不必费心。

其他回答

使用内联CSS更难维护。

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

使用不同的css文件的好处是

易于维护您的html页面 更改外观和感觉将很容易,您可以在您的页面上支持许多主题。 您的css文件将缓存在浏览器端。因此,你将贡献一点互联网流量,不加载一些kbs的数据,每次一个页面刷新或用户导航你的网站。

我们已经创建了一个模板驱动的工件生成器,它为任何类型的文本工件——HTML、XML、计算机语言、非结构化文本、DSV等——提供了包含文件的功能(例如,它非常适合处理普通Web或手动页面的页眉和页脚,而无需脚本)。

一旦你有了它,并使用它在你的“head”标签中提供“style”标签,“关注点分离”参数就消失了,取而代之的是“我们必须在对模板的每次更改后重新生成”和“我们必须从它生成的内容中调试模板”。自从第一种计算机语言获得预处理器(或者有人开始使用M4)以来,这些抱怨就一直存在。

总的来说,我们认为CSS文件或“style”标签的元化功能比元素级样式化更简洁,更不容易出错。但这确实需要一些专业判断,所以新手和散漫的人不必费心。

内联CSS适用于机器生成的代码,在大多数访问者只浏览站点上的一个页面时也可以,但它不能处理媒体查询以允许不同大小的屏幕具有不同的外观。为此,您需要在外部样式表或内部样式标记中包含CSS。

Code how you like to code, but if you are passing it on to someone else it is best to use what everyone else does. There are reasons for CSS, then there are reasons for inline. I use both, because it is just easier for me. Using CSS is wonderful when you have a lot of the same repetition. However, when you have a bunch of different elements with different properties then that becomes a problem. One instance for me is when I am positioning elements on a page. Each element as a different top and left property. If I put that all in a CSS that would really annoy the mess out of me going between the html and css page. So CSS is great when you want everything to have the same font, color, hover effect, etc. But when everything has a different position adding a CSS instance for each element can really be a pain. That is just my opinion though. CSS really has great relevance in larger applications when your having to dig through code. Use Mozilla web developer plugin and it will help you find the elements IDs and Classes.