当我看到网站的初始代码和示例时,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" />
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.
快速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>元素,我们现在有了替代方案。
使用内联样式违反了关注点分离原则,因为您实际上是在同一个源文件中混合了标记和样式。在大多数情况下,它也违反了DRY(不要重复自己)原则,因为它们只适用于单个元素,而一个类可以应用于其中的几个元素(甚至可以通过CSS规则的魔力进行扩展!)
此外,如果站点包含脚本,明智地使用类是有益的。例如,一些流行的JavaScript库(如JQuery)严重依赖类作为选择器。
最后,使用类可以增加DOM的清晰度,因为可以有效地使用描述符告诉您其中给定节点是哪种元素。例如:
<div class="header-row">It's a row!</div>
表达能力比:
<div style="height: 80px; width: 100%;">It's...something?</div>
页面内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一次性交付的。
实现此功能后,可以在需要的地方手动编码单独的一次性样式。
Personally, I think the hatred of inline css is just ridiculous. Hardcore cult behaviour, people just sheepishly repeat "Separation of concerns!". Yes, there are times where if there is a repeating element and you will need repeated styling to use a class targeted from a CSS file, but most of the time it improves speed of development and CLARITY OF CODE to put the style inline, it's great if I can look at the code and see that there is a custom margin height, it helps me picture the HTML document as a whole, instead of some named class that gives me little insight into which styles will be applied.
所以在这里我要做一个逆向的人,我要说内联css是伟大的,那些对你使用它大喊大叫的人只是在遵循他们被告知的东西,而实际上并没有给予任何原始的、公正的考虑。