CSS内联还是外联？

现在是一个推崇结构，表现，行为想分离的时代，最大的好处就是维护起来比较简单，方便，代码重用。把CSS，JS写在HTML里，就像一个大杂烩，很难理解，可读性差，文件大，维护起来非常麻烦。

 

但是CSS到底是内联还是外联呢？我们只要分析它的特点就不难得出答案。

CSS内联：就是把CSS放在HTML Head里使用Style包围。<style type="text/css"></style>

CSS外联：就是把CSS放到一个单独的文件里，然后在HTML通过调用。<link rel="stylesheet" type="text/css" href="">。

 

我们知道HTTP请求是比较昂贵的，CSS内联的话肯定会更快，因为把CSS放到HTML文件里，这意味着减少了一次HTTP请求。而外联的话就是一次HTTP请求，但是可以缓存，当浏览器加载过这个文件时，第二次请求的时候是第缓存里读取的，所以第二次请求时是很快的，外联的CSS还可以重用代码。那到底是使用内联还是外联呢？这就要看需求，如果一个页面不需要缓存时，也就是这个页面不太访问，或者访问不多的时候，比如注册页面，一般情况下人家只会进入一次，不可能第次进入这个网站你都去注册，那就另当别论了，这个页面不需要缓存，把CSS放在Head里时可以缩短加载时间，提高用户体验。对于经常访问的页面，外联肯定是不二的选择。

在一些大的网站，如：Google，Yahoo也可以看到把CSS写在Head里。对于结构表现行为分离的原则，我们对于CSS入在Head里是可以接受的，只要不是写在元素上面。