对于网页换肤，例如最常见的深色、浅色风格已经是很常见的一个需求了. 一直以来也有很多的实现方案，这里我主要介绍一下基于 CSS variable的实现方式. 1、把不同风格样式写到不同的类名下面，通过切换类名来实现换肤. 这种方式没啥明显的优点，只是单纯的实现了此需求. 反而增加了css样式文件代码冗余且会造成大量重复代码，样式代码不利于拓展维护，且开发效率低下.

笔者近半年一直在参与项目重构，在重构过程中大量应用 性能优化和 设计模式两方面的知识. 性能优化和 设计模式两方面的知识不管在工作还是面试时都是高频应用场景，趁着这次参与大规模项目重构的机会，笔者认真梳理出一些常规且必用的 性能优化建议，同时结合日常开发经验整理出笔者在网易四年来实践到的认为有用的所有 性能优化建议，与大家一起分享分享.

前端的最重要的基础知识点是什么. 原生 javaScript， HTML, CSS.. EventLoop和渲染机制. 各类工程化的工具原理以及使用，根据需求定制编写插件和包. （webpack的plugin和babel的预设包）. 数据结构和算法（特别是 IM以及超大型高并发网站应用等，例如 B站）.

本文适合无论是否有爬虫以及 Node.js基础的朋友观看~. 使用 Node.js爬取网页资源，开箱即用的配置. 将爬取到的网页内容以 PDF格式输出. 如果你是一名技术人员，那么可以看我接下来的文章，否则，请直接移步到我的 github仓库，直接看文档使用即可. 仓库地址: 附带文档和源码,别忘了给个 star哦.

性能优化是一门大学问，本文仅对个人一些积累知识的阐述，欢迎下面补充. 抛出一个问题，从输入 url地址栏到所有内容显示到界面上做了哪些事. DNS 服务器请求解析该 URL 中的域名所对应的. 2.建立 TCP连接（三次握手）;. 3.浏览器发出读取文件( URL 中域名后面部分对应的文件)的 HTTP 请求，该请求报文作为.

从 0 到 1 再到 100, 搭建、编写、构建一个前端项目. 选择现成的项目模板还是自己搭建项目骨架. 搭建一个前端项目的方式有两种：选择现成的项目模板、自己搭建项目骨架. 选择一个现成项目模板是搭建一个项目最快的方式，模板已经把基本的骨架都搭建好了，你只需要向里面填充具体的业务代码，就可以通过内置的工具与命令构建代码、部署到服务器等.

当用户输入url，操作系统会将输入事件传递到浏览器中，在这过程中，浏览器可能会做一些预处理，比如 Chrome 会根据历史统计来预估所输入字符对应的网站，例如输入goog，根据之前的历史发现 90% 的概率会访问「www.google.com 」，因此就会在输入回车前就马上开始建立 TCP 链接甚至渲染了.

在操作页面滚动和动画时经常会获取 DOM 元素的绝对位置， 例如 本文 左侧的悬浮导航，当页面滚动到它以前会正常地渲染到文档流中， 当页面滚动超过了它的位置，就会始终悬浮在左侧. 本文会详述各种获取 DOM 元素绝对位置 的方法以及对应的兼容性. 关于如何获取 DOM 元素高度和滚动高度，请参考 视口的宽高与滚动高度 一文.

字体的选择，是网页开发的关键因素之一. 合适的字体，对网页的美观度（或可读性）有着举足轻重的影响. 由于字体设置在代码实现上非常的简单，导致了大多数开发人员都没有重视. 在前端、设计分工协助的状态下很容易导致字体设置成为三不管的状态. 在西文（英文）字体中，最简单的字体分类方式是将字体分为衬线体（serif）与无衬线体（sans-serif）.

我来填坑了，CSS篇终于写出来了，如果你没看过前面的JS篇，可以 在这里观看. 众所周知，CSS的加载会阻塞浏览器渲染或是引起浏览器重绘，目前业界普遍推荐把CSS放到 中，防止在CSS还没加载完，DOM就已经绘制出来了，造成CSS加载完成后的重绘. 那在现代浏览器中我们有没有办法提高首屏渲染速度那.

（1）清除浏览器默认样式. （1）项目开发初期就定义好. （2） reset.css 在引入的时候一定要放在第一位. （3）不同的产品 reset.css不一样. 3.table合并边框间距. table { border-collapse: collapse; // 合并边框 border-spacing: 0; //边框间距.

在以前写html代码的时候，一般都会在head里添加重置样式reset.css，其内容如下：. 但是最近在网上看了看网络文章，也感觉有些重置是没有用的. CSS reset的作用是让各个浏览器的CSS样式有一个统一的基准，而这个基准更多的就是“清零”. 有时候看到别人网站站的一些重置是这样的：. div{margin:0; padding:0;}属性呢.

绝大多数情况下我们总是让JavaScript在DOM载入后再开始执行. 不管是直接用 DOM API 实现还是使用 jQuery，最终都是 DOMContentLoaded事件在起作用. 本文讨论一个我们习以为常却很少了解的问题： 样式文件的载入会延迟脚本执行，以及 DOMContentLoaded事件的触发.

承接上文《 玩转HTML5移动APP页面（动效篇）》，上次说的是让页面动起来的一些小技巧. 而页面动起来的根基是功能可用的页面，因此有必要分享一些优化细节的技巧和方向，熟悉掌握一些方法论还是会对页面开发大大提高效率的，并且也能防止疏忽缺漏. 涉及的动画十分多，用的元素也十分多，请务必使用雪碧图（Sprite）.

CSS选择器优先级与效率优化. 本文收集网上各处关于CSS选择器的文章总结，并自己归纳一篇. 在上面的选择器中，此外，经测试. 属性选择器 = 伪类选择器(应用最后一个). 伪类选择器 > 相邻选择器. 相邻选择器 = 子选择器 = 后代选择器(应用最后一个). 后代选择器 > 标签选择器. 同.

HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO 等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性. 移动互联网时代，head 头部结构，移动端的 meta 元素，显得更为重要. 了解每个标签的意义，写出满足自己需求的 head 头标签，是本文的目的.

首先是在问答里面看到了一个问题：. CSS框架 ui 有哪些啊（ http://segmentfault.com/q/1010000002547926）. 刚开始接触HTML刚开始接触JS我也不懂就看了下- 正好我也在考虑怎么用HTML来搭我的APP UI. 作为初学者，我发现Amaze UI是中文的，觉得对初学者看起来会更简单 - 尤其对HTML CSS等一窍不通，很快有人推荐了Ratchet，看了下感觉用来做手机APP确实很简单的样子.

“理论不懂就实践，实践不会就学理论”，非常赞同bluedavy的这句话. 实践过程中经常会遇到某个属性的使用，浏览器渲染效果与预期效果不符，虽然通过死记硬背能避免或巧妙应用这种效果，但总感心虚发慌、毫无自信，因为不知晓背后的原理. 这时就不要再用“就是这样的”的借口来搪塞自己，我们需要重新认识它. 元素A，C绝对定位，不设置top，bottom值；.

克军做了一系列测试： js和css的顺序关系，给出了现象和结论，但未给出原因. JS 和 CSS 在页面中的位置，会影响其他资源（指 img 等非 js 和 css 资源）的加载顺序，究其原因，有三个值得注意的点：. JS 有可能会修改 DOM.典型的，可能会有. 这意味着，在当前 JS 加载和执行完成前，后续所有资源的下载有可能是没必要的.

最初发布于我的博客： http://jerryzou.com/posts/aboutNormalizeCss/. Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性. 相比于传统的 CSS reset， Normalize.css是一种现代的、为HTML5准备的优质替代方案.

本文地址： http://www.zhangxinxu.com/wordpress/?p=4264. 这里所说的Sprite技术，没错，类似于CSS中的Sprite技术. 图标图形整合在一起，实际呈现的时候准确显示特定图标. 另，本文图片甚多，爪机党继续浏览需慎重. 二、SVG Sprite与symbol元素.

从代码的角度讲，你知道什么是比往网站或应用里添加功能更好的事情吗. 也许是一些代码、图片、或相关依赖等，就像扔掉家中储存柜里没用的产生异味的存货. 我经常用ImageOptim来优化我的图片的体积，这既能提供页面加载速度，又能减少带宽流量. 然而，你知道有什么工具能找到页面中样式文件里无用的CSS吗.

随着互联网的流行，移动网站开始急速增加，在2014年手机网站将会出现很多，所以手机网站是必须要学会制作的. 手机网站不像桌面平台一样制作，否则会影响显示效果，目前大部分手机网站使用 响应式设计技术，而且也很流行. 但是新手想实现响应式技术是不容易的，所以我们可以用一些响应式框架或适用于移动设备的jQuery插件来制作，这样能方便实现我们的需求.

最近在Codepen看到Top Pens of 2013这个专题，专题内容为2013年上最优秀的前100个CSS、HTML5和Javascript Pens，在惊叹技术人员的创造力同时我们还能学习这些技术，对交互设计师而言还能获取灵感哦. Top Pens of 2013专题地址： http://codepen.io/2013/popular.

很多设计师在交付设计稿给客户预览时，都喜欢把自己的作品放在一些手机模型或电脑模型上演示，这样可以让客户看到最终的效果输出，所以MOCK UP我们应该收藏一些，在今天的文章中，我们分享8个纯CSS编写的手机设备Mock Up模型，手机品牌有很多哦，如：iPhone5S/5C、诺基亚的Lumia 920、HTC、三星等等，下面一起看看介绍.

HTML 和 CSS 代码规范究竟是怎么样的. 做网站时， HTML 和 CSS 代码有什么要求. HTML 和 CSS 代码的写法是否影响网站的SEO. 写好  HTML 和 CSS 代码需要注意些什么. 一般大型WEB站点开发设计人员，要求使用者具有一定的 HTML、CSS基础知识，对原代码具有较强的控制能力.

现在很多人会使用 CSS 框架进行快速建站，. 那 CSS 框架是什么呢，它通常是一些 CSS 文件的集合，这些文件包括基本布局、表单样式、网格、简单组件、以及样式重置. 使用 CSS 框架大大降低工作成本进行快速建站. 当然对于一些大型的项目，可能会很难照搬某些框架直接使用的，因为直接使用会带来一些限制或者冗余的问题.

对于开发和设计人员来说，很多时候接到项目后需要时刻和时间去做无形的赛跑. 如何提高效率是每一次项目结束后大家都会讨论的热点问题之一. 如何去接受和更多了解一些新工具或许是开启速度的钥匙. 为了提高效率很多优秀的设计师和开发人员会在经历了一些项目后把经验演变成新的规则工具. 后来者就可以站在前人的臂弯上去快速开始一些基础架构.

在互联网成熟的今天，大家对网站的要求不仅仅在功能实现上，也开始注重视觉设计，多终端用户体验等等. 表单控件是web页面上重要的组成元素，具有非常高的功能性. 交互设计师为它设计更加方便的操作方式，视觉设计师也会绞尽脑汁设计出更加夺人眼球的视觉展现. 可是由于表单控件自身的局限性，不能很好地自定义外表，所以就诞生了一系列的由聪明的前端同学模拟出来的以假乱真的表单控件.

   今天在回广州的火车上看到一篇 “10 CSS mistakes every web designer must avoid”，想着还不错，就翻译给大家.    对于网页重构来说， CSS禅意花园 是网页布局从 table 表格转到了 html +css 的标志. 这些年来，随着我们的网站越来越复杂：html5，css3，新的技术、新的属性，越来越多的开发者开始思考和尝试提高他们的 CSS 技能.