避免CSS设计中的内联样式

将内容与设计分离使站点管理更容易

笔记本电脑与CSS字在屏幕上。学习CSS,网页开发
hardik pethani / Getty Images

层叠样式表已经成为样式和布局网站的标准方式。设计师使用样式表告诉浏览器一个网站应该如何显示在外观和感觉方面,包括颜色,间距,字体和更多的因素。

CSS样式有两种部署方式:

  • 内联-在网页本身的编码,在一个单独的,一个元素一个元素的基础上
  • 在一个独立的CSS文档中,该网站被链接到
CSS的例子
CSS。 杰里米·吉拉德

CSS的最佳实践

“最佳实践”是设计和建设网站的方法,已被证明是最有效的,并为所涉及的工作提供最多的回报。后在CSS在网页设计中的应用帮助网站的外观和功能尽可能好。随着其他web语言和技术的发展,独立的CSS样式表已经成为首选的使用方法。

以下CSS的最佳实践可以在以下几个方面改进你的网站:

  • 将内容与设计分离CSS的主要目标之一是将设计元素从HTML中移除,并将它们放在另一个位置供设计者维护。这种做法还有助于将设计人员与开发人员分开,以便每个人都能专注于自己的专业领域。为了维护网站的外观,设计师不必是开发者。
  • 使得维护简单网页设计中最容易被忽视的元素之一是维护。不像印刷材料,一个网站从来都不是“一个完成”的。内容、设计和功能可以而且应该随着时间的推移而发展。将CSS放在一个中心位置,而不是分散在整个网站中,这使得维护工作更加容易。
  • 使您的网站可访问:使用CSS样式可以帮助搜索引擎和禁用个人与您的网站交互。
  • 保持您的网站当前较长时间通过使用CSS的最佳实践,你遵循的标准已经被证明是稳定的,但足够灵活,以适应web设计环境的变化。

内联样式不是最佳实践

内联样式虽然有目的,但通常不是维护网站的最佳方式。它们违背了每一个最佳实践:

  • 内联样式不能将内容与设计分开内联样式与嵌入字体和其他现代开发者所诟病的笨拙设计标签完全相同。样式只影响它们所应用的特定的、独立的元素;虽然这种方法可能给予您更细粒度的控制,但它也使设计和开发的其他方面(如一致性)更加困难。
  • 内联样式会导致维护问题当你处理样式表时,弄清楚一个样式被设置在哪里可能是困难的。当你处理一种混合物内联、嵌入和外部样式,你有很多地方要查。如果你在一个网页设计团队工作,或者必须重新设计或维护别人建立的网站,那么你将会有更多的麻烦。一旦你找到了样式并改变了它,你必须在每个页面的每个元素上都这样做。这大大增加了时间和工作预算。
  • 内联样式不那么容易访问虽然现代的屏幕阅读器或其他辅助设备可能能够有效地处理内联属性和标签,但一些旧的设备不能,这可能会导致一些奇怪的网页显示。额外的字符和文本也会影响搜索引擎机器人对您的页面的查看方式,因此您的页面在搜索引擎优化方面表现不佳。
  • 内联样式会让你的页面变大如果你想让网站上的每个段落都以某种方式出现,你可以在外部样式表中用六行左右的代码来实现。然而,如果你使用内联样式,你必须将这些样式添加到网站的每个段落。如果你有五行CSS,那就是五行乘以网站上的每个段落。带宽和加载时间很快就会累积起来。

替代内联样式的是外部样式表

与其使用内联样式,不如使用外部样式表。它们提供了CSS最佳实践的所有好处,并且易于使用。采用这种方式,你的网站上使用的所有样式都在一个单独的文档中,然后用一行代码链接到一个网络文档。外部样式表影响它们所附的任何文件。如果你有一个20页的网站,每个页面都使用相同的样式表——这是典型的做法——你可以简单地在一个地方编辑这些样式来改变每一个页面。在一个地方改变样式比在网站的每个页面上搜索代码要方便得多。这种灵活性使长期的站点管理更加容易。

这个页面有用吗?