CSS进阶：提高你前端水平的 4 个技巧 - WEB前端 - 伯乐在线
& CSS进阶：提高你前端水平的 4 个技巧
译者注：随着 Node.js 、react-native 等技术的不断出现，和互联网行业的创业的层出不穷，了解些前端知识，成为全栈攻城师，快速的产出原型，展示你的创意，对程序员，尤其是在创业的程序员来说，越来越重要，下面我们就跟随著名国外开发者网站上的热推文章《Leveling up in CSS》，从提升你的CSS技巧开始。
CSS 在刚开始学习的时候看起来非常简单。毕竟，它仅仅就是些样式而已，事实上是这样吗？
但是，随着你的不断了解。很快，你会发现 CSS 没你想象的那么简单，它复杂且有深度。
做好这四件事情，能让你在大规模使用 CSS 的时候保证代码的健壮性：使用适当的语义，模块化，采用统一的命名规范，遵循单一功能原则。
使用适当的语义
在 HTML 和 CSS 编程中有语义标注的概念。语义是指单词的含义和他们间的关系。在 HTML 编程中，意味着你需要使用一个合适的标签名字来标记。下面是一个经典的例子。
&!-- bad --&
&div class=”footer”&&/div&
&!-- good --&
&footer&&/footer&
&!-- bad --&&div class=”footer”&&/div&&!-- good --&&footer&&/footer&
富有语义的 HTML 是非常简单明确的。另一方面，富有语义的 CSS 则是更抽象和主观的。编写富有语义的 CSS 意味着在选择类型的时候，类名要传达出结构和功能信息。类名要很容易被理解。确保它们不要太具体、太特殊。这样，你就可以复用它了。
为了阐述什么是一个良好的类名，请看这个简化了的 Medium 网站的 CSS 例子。
&div class="stream"&
&div class="streamItem"&
&article class="postArticle"&
&div class="postArticle-content"&
&!-- content --&
&/article&
&div class="stream"&&&&div class="streamItem"&&&&&&article class="postArticle"&&&&&&&&div class="postArticle-content"&&&&&&&&&&!-- content --&&&&&&&&/div&&&&&&/article&&&&/div&&/div&
通过这些代码，你可以立即识别出它们的结构、功能和含义。父节点的类名是 stream ，内容是一个文章列表。它的子节点的类名是 streamItem ，内容是文章列表中的一篇具体的文章。这使我们很容易的了解到父节点和子节点之间的关系。并且，这些类可以在每一个有文章功能的页面中使用。
你可以像阅读一本书一样读 HTML 和 CSS。它会给你讲一个故事。通过故事你可以了解故事中的每一个角色和他们之间的关系。语义丰富的 CSS 代码容易理解，更便于维护。
若果你想进一步了解语义相关的内容，看看 、 和 ，再看 。
在这个充满了组件库（以 React 为例）的时代，模块化就是王者。组件就是由已经解构了的接口创建的可组合的模块。下面是一个Product Hunt（一种发布好的创业项目的网站）前端页面。作为练习，让我们将这个页面分解成一系列的组件。
每种颜色框代表一个组件，stream 节点下分为好多个 stream item 子节点。
&div class="stream"&
&div class="streamItem"&
&!-- product info --&
&div class="stream"&&&&div class="streamItem"&&&&&&!-- product info --&&&&/div&&/div&
大多数组件都可以分解为更小的组件。
每一个 stream item 组件都有一个缩略图和一个特色的产品信息。
&!-- STREAM COMPONENT --&
&div class="stream"&
&div class="streamItem"&
&!-- POST COMPONENT --&
&div class="post"&
&img src="thumbnail.png" class="postThumbnail"/&
&div class="content"&
&!-- product info --&
123456789101112
&!-- STREAM COMPONENT --&&div class="stream"&&&&div class="streamItem"&&&&&&!-- POST COMPONENT --&&&&&&div class="post"&&&&&&&&img src="thumbnail.png" class="postThumbnail"/&&&&&&&&div class="content"&&&&&&&&&&!-- product info --&&&&&&&&/div&&&&&&/div&&&&/div&&/div&
由于 stream 组件和它的子控件是完全独立的，你可以很容易的调整或者更换 post 组件，并且这不会对 stream 组件产生任何影响。
使用组件的思想将会使你的代码解耦。解耦的代码越多，你的类之间的依赖就越低。这会让你的代码更容易修改，并且使你的代码更长时间的工作下去而不用修改它。
模块化你的 CSS 时，首先将你的设计分解成多个组件。你可以使用纸和笔，也可以使用类似 Illustrator 或者 Sketch 这类的软件。确定你将要如何命名这些组件，同时理清各个组件之间的关系。
阅读更多关于 CSS 组件驱动的文章，详见、和《。
采用统一的命名规范
目前有几十个不同版本的 CSS 命名规范。有些人对他们选择的命名规范极其笃定，认为他们的比别人的更好。事实上，不同的人喜欢不同的命名规范。我听到的最好的建议是：选择你觉得最合适的命名规范。
下面简单列举一下常用的命名规范：
我最喜欢的命名规范是 BEM。BEM 代表块(block)、元素（element）和修饰符（modifier）。，在俄罗斯的相当于谷歌的搜索引擎，为了解决他们 CSS 代码库中的缩放问题而提出了它（它指BEM）。
BEM 是一个极其简单——又极其严格——的命名规范。
.block__element {}
.block--modifier {}
.block {}.block__element {}.block--modifier {}
块（Blocks）代表高级别的类。元素（Elements）是块的子模块。修饰符（modifiers）代表不同的状态。
&div class="search"&
&input type="search__btn search__btn--active" /&
&div class="search"& &input type="search__btn search__btn--active" /&&/div&
在上面的示例中， search 是块（block），search button是它的元素（element）。如果你想要更改按钮的状态，我们可以为按钮增加一个修饰符，例如 active 。
关于命名规范要记住的一件事是，无论你喜欢哪种命名规范，你会经常继承或者工作在不同标准的代码库上。请敞开心扉去学习新的标准，用不同的思维去思考 CSS 。
你可以在、和上看到更多关于 BEM 的信息。想要了解不同的命名规范，参见。
遵循单一功能原则
单一功能原则规定每个模块和类都应该有一个单一的功能，并且该功能应该由这个类完全封装起来。
在 CSS 中，单一功能原则代表每一段代码、类和模块只做一件事。当我们提交 CSS 文件时，这意味着每个独立的组件（例如轮播效果和导航栏）都应该有自己的 CSS 文件。
/components
|- carousel
|- |- carousel.css
|- |- carousel.partial.html
|- |- carousel.js
|- |- nav.css
|- |- nav.partial.html
|- |- nav.js
/components &&|- carousel&&|- |- carousel.css&&|- |- carousel.partial.html&&|- |- carousel.js&&|- nav&&|- |- nav.css&&|- |- nav.partial.html&&|- |- nav.js
另外一个常见的组织文件的方式是按照功能将文件分组。举个栗子，如上面所示，所有和轮播效果组件有关的文件都被分类到了一起。采用这种方式可以让你更容易的找到相关文件。
除了对组件的样式进行分离之外，最好利用单一功能原则对全局样式也进行分离。
|- application.css
|- typography.css
|- colors.css
|- grid.css
/base&&|- application.css &&|- typography.css&&|- colors.css&&|- grid.css
在这个例子中，每个相关的样式被分离到自己的样式文件中。这样，如果你想要修改样式中的颜色，那么你将会很容易的找到它。
无论你使用哪种方式组织文件结构，尽量在决定的时候参考单一功能原则。一旦有某个文件开始变的臃肿，那么考虑按照逻辑功能将它分成多个部分。
更多有关组织文件结构和 CSS 架构的文章，详见和。
当单一功能原则应用于你的每一个 CSS 类选择器中时，这意味着每一个类选择器都有着唯一的功能。换句话说，要根据不同关注点将样式分离到不同的类选择器中。下面是个经典的例子：
background: #f2f2f2;
margin: 20
padding: 30
border-radius: 4
bottom: 0;
123456789101112
.splash {&&background: #f2f2f2;&&color: #fffff;&&margin: 20px;&&padding: 30px;&&border-radius: 4px;&&position: absolute;&&top: 0;&&right: 0;&&bottom: 0;&&left: 0;}
在上面的例子中，我们将关注点耦合了。splash 这个类不但包含了本身的样式和逻辑，同时也包含了它的子节点的。为了解决这个问题，我们可以将这段代码分离为两个新的类。
bottom: 0;
.splash {&&position: absolute;&&top: 0;&&right: 0;&&bottom: 0;&&left: 0;}
.splash__content {
background: #f2f2f2;
padding: 30
border-radius: 4
.splash__content {&&background: #f2f2f2;&&color: #fffff;&&padding: 30px;&&border-radius: 4px;}
现在我们有 splash 和 splash content 两个类。我们可以将 splash 作为一个一般的全屏类，它可以拥有任何子节点。所有子节点关注的属性，都在 splash content 中，与父节点的属性是完全解耦的。
你可以通过阅读下列文章进一步了解单一功能原则在样式表和类中的应用。和。
简单胜过复杂
如果你问任何一个成功的前端开发工程师或者 CSS 架构师，他们会告诉你，他们从来没有对自己的代码完全满意。写好 CSS 是一个不断迭代的过程。从简单开始，遵循基本的 CSS 规则和样式指南，然后不断迭代。
我很想知道你的 CSS 学习之路。你喜欢的命名规范是什么？你是怎样组织你的代码文件的？你可以随时通过留言或者在上告诉我。
另外：如果你喜欢这篇文章，不妨点击下推荐按钮，或者把它分享给你的朋友，那样会更棒。
如果你想要了解更多，你可以关注我的
，我会时不时的在上面分享一些关于设计、前端开发、机器人和机器学习的内容。
打赏支持我翻译更多好文章，谢谢！
打赏支持我翻译更多好文章，谢谢！
任选一种支付方式
关于作者：
可能感兴趣的话题
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2018 伯乐在线博主最新文章
博主热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)不要再在JavaScript中写 CSS了
本文作者是 react-css-modules 和 babel-plugin-react-css-modules 的作者。并不是对 CSS in
JavaScript: The future of component-based styling，或是使用样式组件的反对，而是一种补充，web
开发者要了解自己的需求，明白自己使用 styled-components 的真正原因。
CSS 不应随意放置。许多项目选择将样式写在 JavaScript 中的理由不对。本文列出了常见的误解，以及解决问题的现存 CSS 方案。
本文的任何言论都没有对某个项目或人进行人身攻击的意思。styled-components 是 React 的目前趋势，所以我将
styled-components 定义为&JavaScript 中的 CSS&。
styled-components 的发起人(Max Stoiber、Glen Maddern
以及所有的贡献者)都很聪明、想法独特，出发点也是好的。
为了完全透明，我还要指出我是 react-css-modules 和 babel-plugin-react-css-modules 的作者。
CSS 和 JavaScript 历史
层叠样式表(CSS)是为描述标记语言文档的展现样式而出现的。JavaScript
是为了组合图片、插件等组件而创造的一种&胶水语言&。随着发展，JavaScript 拓展、转变，有了新的应用场景。
Ajax 的出现(2005)是一个重要的里程碑。这时 Prototype、jQuery、MooTools
等库已经吸引了大量的拥护者，共同解决后台跨浏览器数据获取问题。这又引发了新的问题：如何管理数据?
到了 2010 年，Backbone.js 出现，成为了应用状态管理的行业标准。不久后，Knockout 和 Angular
双向绑定的特点吸引了所有人。之后，React 和 Flux 出现，开启了单页应用(SPA)的新纪元，组件构造应用。
那么 CSS 呢?
借用 styled-components 文档中的话：
纯 CSS 的问题在于它产生的那个时代，网站由文档组成。1993 年，网站产生，主要用于交换科学文献，CSS
是设计文献样式的解决方案。但是如今我们构建的是丰富的、面向用户的交互应用，而 CSS 并不是为此而生的。
我不这么认为 。
CSS 已经发展到可以满足现代 UI 的需求了。过去十年中出现的新特性数不胜数(pseudo-classes、pseudo-elements、CSS
variables、media queries、keyframes、combinators、columns、flex、grid、computed values
从 UI 的角度看，&组件&是文档中一个独立的片段(&button /& 就是个组件)。CSS
被设计用来样式化文档，包括所有组件。问题在哪?
俗话说：&工欲善其事必先利其器&。
Styled-components
styled-components 可以用标记模板字面量在 JavaScript 中写 CSS。这样就省去了组件和样式间的匹配
&&组件由细粒度的样式结构组成，比如：
import&React&from&'react';&&import&styled&from&'styled-components';&&//&Create&a&&Title&&react&component&that&renders&an&&h1&&which&is&&//&centered,&palevioletred&and&sized&at&1.5em&&const&Title&=&styled.h1`&&&&font-size:&1.5&&&&text-align:&&&&&color:&&&`;&&//&Create&a&&Wrapper&&react&component&that&renders&a&&section&&with&&//&some&padding&and&a&papayawhip&background&&const&Wrapper&=&styled.section`&&&&padding:&4&&&&background:&&&`;&&//&Use&them&like&any&other&React&component&&&except&they're&styled!&&&Wrapper&&&&&&Title&Hello&World,&this&is&my&first&styled&component!&/Title&&&&/Wrapper&&&
Live demo(https://www.webpackbin.com/bins/-KeeZCr0xKfutOfOujxN)
styled-components 目前是 React 的 趋势 。
我们要理清一件事情：styled-components 只是 CSS 层面的高度抽象。它只是解析定义在 JavaScript 中的 CSS，然后生成对应
CSS 的 JSX 元素。
我不喜欢这个趋势，因为存在很多误解。
我在 IRC、Reddit 和 Discord 上调查了大家使用 styled-components 的原因，整理了一份选择使用
styled-components 常见原因的列表 。我称之为 myths。
Myth #1：避免全局命名空间和样式冲突
我把这条算作 myth 是因为它听起来就像之前这些问题没有得到解决一样。CSS Modules、Shadow DOM 还有很多命名协议(比如
BEM)已经早就在社区中解决了这个问题。
styled-components(就像 CSS modules)只是替人完成了命名的任务。人总会犯错，计算机犯错少点而已。
但就本身而言，这并不是使用 styled-components 的好理由。
Myth 2：styled-components 可以简明代码
通常伴随着如下的例子：
&TicketName&&/TicketName&&&&div&className={styles.ticketName}&&/div&&&
首先&&关系不大。差异基本可以忽略。
其次，说的也不对。字符数量取决于样式命名。
&TinyBitLongerStyleName&&/TinyBitLongerStyleName&&&&div&className={styles.longerStyleName}&&/div&&&
这同样适用于本文之后的构造样式(Myth 5：给组件设置条件样式更简单)。styled-components 只是在多数基本组件的情况下稍胜一筹。
Myth 3：styled-components 使人更关注语义化
前提就不对。样式和语义化代表着不同的问题，需要不用的应对方案。引用 Adam Morse(mrmrs)的话：
内容语义化和视觉样式 没有半点关系。当我用乐高建造东西时，我从来不会想&这是引擎的一部分&，我想着&这是个 1&4
的蓝色乐高，我用来随便做什么都行&。不论水下潜水基地还是飞机&&我清晰地知道怎么用这个乐高块。
& http://mrmrs.io/writing//scalable-css/
(强烈建议读一读 Adam 关于 可拓展 CSS 的文章)
我们还可以举个例子看看两者是否相关。
&PersonList&&&&&&PersonListItem&&&&&&&&PersonFirstName&Foo&/PersonFirstName&&&&&&&&PersonLastName&Bar&/PersonLastName&&&&&&/PersonListItem&&&&/PersonList&&&
语义化是要使用正确的标签构造标记。你能知道这些组件会渲染成什么 HTML 标签吗?不，你不知道。
和下面这段代码比较下：
&ol&&&&&&li&&&&&&&&span&className={styles.firstName}&Foo&/span&&&&&&&&span&className={styles.lastName}&Bar&/span&&&&&&/li&&&&/ol&&&
Myth 4：拓展样式更容易
v1 版本可以用 styled(StyledComponent) 拓展样式;v2 引进了 extend 方法来拓展已存在的样式，比如：
const&Button&=&styled.button`&&&&padding:&10&&`;&&const&TomatoButton&=&Button.extend`&&&&color:&#f00;&&`;&&
这挺好。但是你可以在 CSS 中完成(或者使用 CSS 模块组合 或 SASS 继承混合 @extend)。
button&{&&&&padding:&10&&}&&button.tomato-button&{&&&&color:&#f00;&&}&&
难道不比 JavaScript 简单?
Myth 5：给组件设置条件样式更简单
这点是说你可以根据组件属性给组件设置样式，比如：
&Button&primary&/&&&&Button&secondary&/&&&&Button&primary&active={true}&/&&&
这在 React 中很有用。毕竟组件行为就是由属性控制的。给属性值直接绑定样式有意义吗?可能吧。但是来看看组件的实现代码：
styled.Button`&&&&background:&${props&=&&props.primary&?&'#f00'&:&props.secondary&?&'#0f0'&:&'#00f'};&&&&color:&${props&=&&props.primary&?&'#fff'&:&props.secondary&?&'#fff'&:&'#000'};&&&&opacity:&${props&=&&props.active&?&1&:&0};&&`;&&
利用 JavaScript 按条件创造样式表是挺强大的，但是这也意味着样式难以理解，对比以下 CSS：
button&{&&&&background:&#00f;&&&&opacity:&0;&&&&color:�&&}&&button.primary,&&button.seconary&{&&&&color:&#&&}&&button.primary&{&&&&background:&#f00;&&}&&button.secondary&{&&&&background:&#0f0;&&}&&button.active&{&&&&opacity:&1;&&}&&
这样 CSS 更简短(229 VS 222 字符)，(个人认为)也更容易理解。此外，还可以用预处理器使 CSS 分组、更短：
button&{&&&&background:&#00f;&&&&opacity:&0;&&&&color:�&&&&&&&&&.primary,&&&&&.seconary&{&&&&&&color:&#&&&&}&&&&&.primary&{&&&&&&background:&#f00;&&&&}&&&&&.secondary&{&&&&&&background:&#0f0;&&&&}&&&&&.active&{&&&&&&opacity:&1;&&&&}&&}&&
Myth 6：有利于代码组织
有些人告诉我他们喜欢 styled-components，因为它可以让样式和 JavaScript 在一个文件中。
我理解同一组件有许多文件很烦，但是把样式和标记塞进一个文件的方法很糟糕。这样不仅版本控制难以回溯，而且所有组件都需要滚动很长一段距离，而不是简单地点下按钮。
如果一定要把 CSS 和 JavaScript 放在一个文件中， 可以考虑使用 css-literal-loader。它可以在 build 时用
extract-text-webpack-plugin 提取 CSS，用标准 loader 配置处理 CSS。
Myth 7：DX 很方便，这工具太棒了!
很明显你没用过 styled-components。
一旦样式写错了，整个 app 会崩溃，并输出长长的调用栈错误(v2 更奇葩)。相比之下，CSS &style error&
只是元素渲染地不对而已。
元素没有 className，所以调试时不得不去对比 React 元素树和 DevTools DOM 树(v2 可以用
babel-plugin-styled-components 定位)。
没有语法检查(有一款 样式检查插件 正在开发中)。
不合法的样式会被忽略(比如：clear: color: #f00; 不会报 error 或
warning，只能祈祷调试好运了，即使看了 styled-components 源码，还是花了我 15
分钟查看调用栈。最后我在聊天中把代码粘出来寻求帮助，才有人提醒是少了:。你注意到了吗?)
支持语法高亮、代码补全以及其它 IDE 细节的 IDE并不多。如果你在金融或政府机构工作，很可能无法使用 Atom IDE。
Myth 8：性能更好，bundle 更小
事实是，styled-components 无法提取静态 CSS 文件(比如使用
https://github.com/webpack-contrib/extract-text-webpack-plugin)。这意味着浏览器无法开始解释样式直到
styled-components 解析、加载到 DOM上。
缺少文件分离意味着无法分开缓存 CSS 和 JavaScript。
所有样式化的组件都会额外包装一层 HoC。这是不必要的性能损耗。因为类似的结构缺陷，我终止了
https://github.com/gajus/react-css-modules(但创建了
https://github.com/gajus/babel-plugin-react-css-modules)。
因为 HOC，如果在服务端渲染，会导致标记文档大很多。
有 keyframes， 我也不需要用动态样式值做动画。
Myth 9：它可以开发响应式组件
这说的是依据环境给组件设置样式的能力，比如父容器偏移量、子元素数量等。
首先，styled-components 和响应式没什么关系。这已经超出了这个主题的范围。这种情况最好直接设置组件的
style，以避免额外的成本。
但是，元素查询是个有趣的问题，也逐渐成为 CSS 中的一个高热话题，主要是 EQCSS 等类似项目。元素查询和 @media queries
在语法上很相似，只是元素查询操作具体某些元素。
&a&href=&http://www.jobbole.com/members/feiguohai46&&@element&/a&&{selector}&and&{condition}&[&and&{condition}&]*&{&{css}&}&
{selector} 是 CSS 选择器对应着一或多个元素。例如：#id 或 .class
{condition} 由尺寸和值组成。
{css} 可以包含：任何合法的 CSS 规则。(例如：#id div { color: red })
元素查询可以用
min-width、max-width、min-height、max-height、min-characters、max-characters、min-children、max-children、min-lines、max-lines、min-scroll-x、max-scoll-x
等 (详见 http://elementqueries.com/)条件给元素设置样式。
总有一天类似 EQCSS 的内容也会出现在 CSS 标准中的(希望如此)。
大部分内容都长期有效，无论是社区、React 变更或 styled-components 本身。但意义何在?CSS
已被广泛支持，有大量的社区，也确实行之有效。
本文的目的并不是阻止读者在 JavaScript 中使用&CSS&或是 styled-components。styled-components
一个很棒的使用场景是：更好的跨平台支持性。不要因为错误的理由使用它。
那么我们应该用什么呢?
使用 Shadow DOM v1 还为时尚早(51% 支持率)。CSS 应遵循命名协议(建议 BEM)，如果担心类名冲突(或懒得用 BEM)，可以用
CSS modules。如果你在开发 React web，考虑用 babel-plugin-react-css-modules。如果在开发 React
Native，styled-components 更好。
近日，有关美国商务部禁止美企向中兴通讯公司出口产品的事件受到社会的广泛关注。中兴通讯4...
官方微博/微信
每日头条、业界资讯、热点资讯、八卦爆料，全天跟踪微博播报。各种爆料、内幕、花边、资讯一网打尽。百万互联网粉丝互动参与，TechWeb官方微博期待您的关注。
↑扫描二维码
想在手机上看科技资讯和科技八卦吗？想第一时间看独家爆料和深度报道吗？请关注TechWeb官方微信公众帐号：1.用手机扫左侧二维码；2.在添加朋友里，搜索关注TechWeb。
Copyright (C)
All rights reserved. 京ICP证060517号/京ICP备号 京公网安备76号
TechWeb公众号
机情秀公众号为什么说能使用html/css解决的问题就不要使用JS呢？两个字，因为简单。简单就意味着更快的开发速度，更小的维护成本，同时往往具有更好的体验，下面介绍几个实例。
1. 导航高亮
导航高亮是一种很常见的问题，包括当前页面的导航在菜单里面高亮和hover时高亮。你可以用js控制，但是用一点CSS技巧就可以达到这个目的，不需要使用JS。
在正常态时，每个导航的默认样式为：
正常态透明度为0.5
&&&&opacity:0.5;
当前页面的导航透明度为1. 为了实现这个目的：
首先通过body给不同的页面添加不同的类，用来标志不同的页面
添加body class
&!-- home.html --&
&body&class="home"&&/body&
&!-- buy.html --&
&body&class="buy"&&/body&
所有的li也用class标志，为了有一个一一对应的关系：
&li&class="home"&home&/li&
&li&class="buy"&buy&/li&
然后就可以设置当前页面的样式，覆盖掉默认的样式：
通过body和li的一一对应关系
body.home nav li.home,
body.buy nav li.buy{
&&&&opacity:1;
这样子，如果当前页面是home，则body.home na li.home这条规则生效，home的导航将高亮
这个技艺在《精通CSS》这种书里面有提及。如果你用js控制，那么在脚本加载好之前，当前页面是不会高亮的，而脚本加载好之后突然就高亮了。所以用js吃力不讨好。
hover时的高亮，可以用css的:hover选择器：
nav li:hover{
&&&&opaciy:1;
加上:hover选择器的优先级将会高于原本的，鼠标hover的时候将会覆盖默认样式，即高亮。
你也可以用mouse事件，mouseover的时候添加一个类，mouseleave的时候移除掉这个类，这样就变复杂了，用CSS甚至可以兼容不支持JS的浏览器，用户可能把浏览器的js禁掉了。我一个纯展示的静态页面，为啥要写js呢，是吧。
注意这个hover选择器特别好用，几乎适用于所有需要用鼠标悬浮时显示的场景。
2. 鼠标悬浮时显示
鼠标悬浮的场景十分常见，例如导航的菜单：以及在《》一文提到的，marker详情框的显示：一般要把隐藏的东西如菜单作为hover目标的子元素或者相邻元素，才方便用css控制，例如上面的菜单，是把menu当作导航的一个相邻元素：
menu为相邻的li
&li&class="user"&用户&/li&
&li&class="menu"&
&&&&&&&&li&账户设置&/li&
&&&&&&&&li&登出&/li&
menu在正常态下是隐藏的：
&&&&display:none;
而当导航hover时显示：
使用相邻选择器和hover
.user:hover + .menu{
&&&&display:list-item;
注意这里使用了一个相邻选择器，这也是上面说的为什么要写成相邻的元素。menu的位置可以用absolute定位。
同时menu自已本身hover的时候也要显示，否则鼠标一离开导航的时候，菜单就消失了：
.menu:hover{
&&&&display:list-item;
这里会有一个小问题，即menu和导航需要挨着一起，否则中间有空隙的话，上面添加的菜单hover就不能发挥作用了，但是实际情况下从美观的角度，两者是要有点距离的。这个其实也好解决，只要在menu上面再画一个透明的区域就好了，如下蓝色的方块：可以用before/after伪类用absoute定位实现：
ul.menu:before{
&&&&content:"";
&&&&position:absolute;
&&&&left:0;
&&&&top:-20px;
&&&&width:100%;
&&&&height:20px;
如果我既写了css的hover，又监听了mouse事件，用mouse控制显示隐藏，双重效果会有什么情况发生，如果按正常套路，在mouse事件里面hover的时候，添加了一个display: block的style，会覆盖掉CSS的设置。也就是说，只要hover一次，css的代码就不管用了，因为内联样式的优先级会高于外链的。但是实际情况下会有意外发生，那就是在移动端iphone上面，触摸会触发CSS的hover，并且这个的触发会很高概率地先于touchstart事件，在这个事件里面会判断当前是显示还是隐藏的状态，由于css的hover发挥了作用，所以判断为显示，然后又把它隐藏了。也就是说，点一次不出来，要点两次。所以最好别两个同时写。第二种场景，使用子元素，这个更简单。把hover的目标和隐藏的对象当作同一个父容器的子元素，然后hover写在这个父容器上面就可以了，不用像上面那样，隐藏元素也要写个hover：
.marker-container .detail-info{
&&&&display:none
.marker-container:hover .detail-info{
&&&&display:block
3. 自定义radio/checkbox的样式
我们知道，使用原生的radio/checkbox是不可以改变它的样式的，得自己用div/span去画，然后再去监听点击事件。但是这样需要自己去写逻辑控制，例如radio只能选一个的功能，另一个是没有办法使用change事件。就是没有用原生的方便。
但是实际上可以用一点CSS3的技巧实现自定义的目的，如下，就是用原生实现的radio：
这个主要是借助了CSS3提供的一个伪类:checkd，只要radio/checkbox是选中状态，这个伪类就会生效，因此可以利用选中和非选中的这两种状态，去切换不同的样式。如下把一个checkbox和一个用来自定义样式的span写在一个label里面，checkbox始终隐藏：
input[type=checkbox]{
&&&&display:none;
/*未选中的checkbox的样式*/
.checkbox{
&&&&&input&type="checkbox"&
&&&&&span&class="checkbox"&&/span&
写在label里面是为了能够点击span的时候改变checkbox的状态，然后再改一下选中态的样式即可：
input[type=checkbox]:checked + .checkbox{
关键在于这一步，添加一个打勾的背景图也好，使用也好。:checked兼容性还是比较好的，只要你不用兼容IE8就可以使用，或者说只要你可以用nth-of-type，就可以用:checked
4. 多列等高
多列等高的问题是这样的，排成一行的几列由于内容长短不一致，导致容器的高度不一致：
你可以用js算一下，以最高的一列的高度去设置所有列的高度，然而这个会造成页面闪动，刚开始打开页面的时候高度不一致，然后发现突然又对齐了。这个解决办法主要有两种：
第一种是每列来一个很大的padding，再来一个很大的负的margin值矫正回去，就对齐了，如下：
借助margin/padding等高对齐
&&&&.wrapper & div{
&&&&&&&&float:left;
&&&&&&&&padding-bottom:900px;
&&&&&&&&margin-bottom:-880px;
&&&&&&&&background-color:#ececec;
&&&&&&&&border:1pxsolid#ccc;
&div&class="wrapper"&
&&&&&div&column 1&/div&
&&&&&div&column 2&/div&
&&&&&div&column 3&/div&
&&&&&div&column 4&/div&
效果如下：
你会发现，这个对齐是对齐了，但是底部的border没有了，设置的圆角也不起作用了，究其原因，是因为设置了一个很大的padding值，导致它的高度变得很大，如上图所示。所以如果你想在底部absolute定位放一个链接&更多&&&也是实现不了了。
第二种办法是借助table的自适应特性 ，每个div都是一个td，td肯定是等高的，html结构不变，CSS改一下：
使用table实现等高
&&&&display:table;
&&&&border-spacing:20px;&&/* td间的间距*/
.wrapper & div&{
&&&&display:table-cell;
&&&&width:1000px;&&&&&&&&&/*设置很大的宽度，table自动平分宽度 */
&&&&border-radius:5px;&&&&/*这里设置圆角就正常了*/
对齐效果如下：
这样还有一个好处，就是在响应式开发的时候，可以借助媒体查询动态地改变display的属性，从而改它排列的方式。例如在小于500px时，每一列占满一行，那么只要把display: table-cell覆盖掉就好了：
小屏正常显示
@media (max-width: 500px){
&&&&.wrapper{
&&&&&&&&display:block;
&&&&.wrapper & div{
&&&&&&&&display:block;
&&&&&&&&width:100%;
效果如下所示：
如果在pad 1024px的设备上，希望一行显示2个，那应该怎么办呢？由于上面用的td，必定会排在同一行。其实可以在第二个和第三个中间加一个tr，让它换行：
&div&class="wrapper"&
&&&&&div&column 1&/div&
&&&&&div&column 2&/div&
&&&&&span&class="tr"&&/span&
&&&&&div&column 3&/div&
&&&&&div&column 4&/div&
在大屏和小屏时，tr是不显示的，而在中屏时，tr显示：
&&&&display:none;
@media (max-width: 1024px) and (min-width: 501px){
&&&&&&&&display:table-row;
就能够实现在小屏时一行排两列了，只是这个有个小问题，就是在中屏拉到大屏的时候tr的dipslay: none已经没有什么作用，因为table的布局已经计算好。但是一般应该不用考虑这种拉伸范围很大的情况，正常刷新页面是可以的，如果真要解决那得借助下js
5.需要根据个数显示不同样式
例如说可能有1~3个item显示在同一行，而item的个数不一定，如果1个，那这个item占宽100%，2个时每一个50%，3个时每一个33%，这个你也可以用js计算一下，但是用CSS3就可以解决这个问题：
使用css3选择器
&&&&&&&&width:100%;
&&&&li:first-child:nth-last-child(2),
&&&&li:first-child:nth-last-child(2) ~ li{
&&&&&&&&width:50%;
&&&&li:first-child:nth-last-child(3),
&&&&li:first-child:nth-last-child(3) ~ li{
&&&&&&&&width:33%;
&&&&&li&1&/li&
&&&&&li&2&/li&
&&&&&li&3&/li&
第5行的意思就是选择li的第一个元素，并且它是倒数第二个元素，第6行的意思是选择前面有是第一个且是倒数第二个li的所有li，第一行是选择了第一个，第二行选择除第一个外的其它所有元素。有三个元素的类似。
6. 使用表单提交
提交请求有两种方式，一种是ajax，另外一种是表单提交。很多人都知道ajax，但往往忽略了还有个form提交。
假设在首页有一个搜索的表单，点击search的时候就跳到列表页
你可以一个个去获取所有的input的值，然后把它拼到网址参数重定向一下，但是其实可以不用这样，用一个表单提交就好了：
&form&id="search-form"action="/search"&
&&&&&input&type="search"name="keyword"&
&&&&&input&type="number"name="price"&
将所有字段的名字写在input的name里面，然后form的action为搜索页的链接。这样子不用一行js代码就能够搜索跳转。
如果你需要做表单验证，那就监听submit事件，然后做验证，验证通过则调一下原生的submit就可以提交了，也是不需要手动去获取form的值
7.自动监听回车事件
这个的场景是希望按回车的时候能够触发请求，像第6点，按回车实现跳转，或者是像下面的，按下回车就送一条聊天消息：
通常的做法是监听下keypress事件，然后检查一下keycode是不是回车，如果是则发请求。
但是其实有个特别简单的办法，也是不需要一行JS，那就是把表单写在一个form里面，按回车会自动触发submit事件。读者可以自己试试。这个就启示我们要用语义的html组织，而不是全部都用div。如果用相应的html标签，浏览器会自动做一些优化，特别是表单提交的input。
JS是万能的，几乎可以做任何事情，但是有时候会显得十分笨拙，在js/html/css三者间灵活地切换，往往会极大地简化开发，没有谁是最好的语言，只有适不适合。只要用得好，不管黑猫白猫，都是好猫。
阅读(...) 评论()