你有没有发现自己处于这样一种情况下,你有一个网站,其中的HTML,CSS和JavaScript都是纠结在一起的,即使是最微小的站点范围内的更改也会变成一场噩梦?

什么 你所经历的就是通常所说的意大利面条代码.为了避免落入这个陷阱,您应该遵循一个简单的规则:

总是分隔HTML,将CSS和javascript转换为不同的文件。


记住HTML用于内容(和结构)CSS用于设计javascript用于行为.通过将它们分为不同的层,您可以获得一些东西。它变成:

  • 易于维护
  • 提高了性能
  • 更好的可达性
  • SEO的良好基础

维修性

首先,您的代码变得更易于维护。如果设计有问题,可能在CSS中。如果你的超酷拖放界面停止工作,javascript文件中可能有问题。换言之,更容易发现错误。

想象一下你想把网站的整个设计变成忍者独角兽的主题(颤抖)。有了HTML,CSS和javascript乱成一团,你基本上需要重写整个站点。但如果你是一个好的编码员,把它们分开,你所要做的就是改变CSS。简单的,正确的?

性能

在大多数情况下,如果将层分离,则站点加载速度更快。我们都知道速度有多重要!

JavaScript和CSS文件是静态资产,可以被浏览器有效地缓存。这意味着浏览器不需要多次下载它们。您可以节省带宽和渲染时间。

可达性

通过分离不同的层,您还可以提高站点的可访问性。它实际上是渐进增强的基础(优雅的降级)。这意味着即使用户使用功能较弱的设备(例如:禁用的javascript,屏幕阅读器,旧浏览器,它仍然可以访问内容,因为设备可以忽略不支持的部分,并呈现出它所能呈现的内容。

HTML是Web的坚实基础。通过确保你把内容放在那里(当然是语义上标记的),而不是CSS,也不是javascript的方式,你可以确保这个星球上的每一个浏览器都能访问你的内容。

SEO

网络爬虫,搜索引擎的邪恶机器人不断地在网上搜寻要索引的内容,另一个原因是要分离层。网络爬虫基本上是一个盲用户。它不关心你的花哨风格或疯狂的javascript动画。它只关心你的内容——你的HTML。

所以你最好确保你的内容在语义上用有效的HTML标记,并且CSS和javascript已经过时了。做了这件事,你在通往SEO涅盘的快乐之路上。

一个坏例子(警告反模式!)

在这个例子中,关系分离是违反的。两个内容,风格和行为交织在一起形成了一道可怕的汤。

HTML

坏链接

好例子

好例子

在这个好的例子中,同样的事情是在内容之间进行清晰的分离,风格和行为。

HTML

好链接

CSS

#部分链接字体大小:12px;颜色:αf00;}

JavaScript

document.getElementByID('some_link').addEventListener('click',某种功能,假);

结论

我希望这篇文章已经说服了你,保持一个明确的分离是前进的道路。所以,你可以省去很多悲伤,尽可能多地将这三个层次分开,否则你最终可能会陷入“该死的Spagetti代码”的困境。

工具书类

在线的

Web标准模型–HTML,CSS和JavaScript

维基百科关注的分离

Jeremy Keith编写的DOM脚本,2005年成为朋友

Dan Cederholm的防弹网页设计,新骑手2006

红利事实

关注点分离的概念不局限于HTML,CSS和JavaScript。它同样适用于一般的软件开发,您希望将不同的东西分开。例如数据,业务逻辑和用户界面。

维基百科关注的分离

音符:这篇文章以前发表在代码绘制蓝图.