知其然的使用 vuex

博客停更了好一阵子,我又有写一些东西的必要了。

Vuex 是什么?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 该如何使用,详见文档:https://vuex.vuejs.org/zh-cn/intro.html

本文完。

对于一个 Vue 初学者而言状态管理是一个比较晦涩难懂的东西。

以下是我自己的对 Vuex 学习的一些见解。

  1. 什么是组件状态?
    在 Vue 的组件化开发中, 组件状态就是组件内部的数据,包括但不限于组件的 data,以及根据 data 动态响应而产生的 computed 值。
  2. 为什么要管理组件的状态?
    Vue 中父组件可以通过 props 向子组件传递包括自身状态在内的数据。这样一来子组件就能通过 props 获得父组件的状态,从而达到状态共享的效果。这样的开发方式在功能简单,没有拓展需要的情况下不会有多大的问题。但是在开发功能复杂,有拓展需求的时候弊端就会显现。props 只能满足父组件与子组件之间的状态共享, 但在兄弟组件,多重嵌套的组件之间基于 props 的状态共享就会状态不可追踪。组件状态的管就十分有必要了。
  3. 组件的状态如何管理?
    正如 Vuex 文档中所介绍的 “Vue 计数应用” 例子,他介绍了一个单向数据流的概念。同时也指出了这个单向数据流的缺点所在:①多个视图依赖于同一状态,②来自不同视图的行为需要变更同一状态。 会打破这个单项数据流的可靠性。
    为了解决这些问题:
    借鉴 Flux、Rudux 和 The Element Architecture的思想,将组件的共享状态抽取出来,以一个全局单例的模式来管理。在这种模式下,组件树构成了一个巨大的视图,不管在树的哪个位置,任何组件都能获取状态或者触发行为。另外通过定义和隔离状态中的各种盖帘并强制遵守一定的规则,我们的代码将变得更加结构化且易维护。结合 Vue.js 的的数据响应机制达到高效的状态更新效果。

知其然的使用 Vuex

我们可以将 Vuex 单例当做一个可以通过 this.$store (为什么这么用,请看这里)来访问统一管理的状态,触发改变状态的方法

store 的结构

{
  state:{}
  modules:{}
  mutations:{}
  actions:{}
  getters:{}
}

获取特定模块的state,this.$store.state.modulesName.key;

modules:用于区分各个模块的状态,方便不同页面(业务)的状态的管理。

提交一个改变 state 的同步方法(mutations)  this.$store.commit('functionName',args)纯函数相同的输入 state 的改变相同。

提交一个改变 state 的异步方法(actions)  this.$store.dispatch('functionName',args)一般用于做一些异步操作,如网络请求数据,在请求完成之后调用 mutation 方法实现对 state 的修改。

getters 用于对重复的 state 派生操作,做一个统一的处理。使用方法 this.$store.getters.getterName

本文完。

参考链接:

  1. Vuex 使用文档:https://vuex.vuejs.org/zh-cn/intro.html
  2. Vuex源码解析:https://zhuanlan.zhihu.com/p/30560457
  3. 纯函数:https://zh.wikipedia.org/wiki/%E7%BA%AF%E5%87%BD%E6%95%B0

Hello Dva

Hello Dva

dvajs github地址:Dvajs

刚接触 React 的时候接触过这个框架。那个时候听同事推荐蚂蚁金服的 Ant Design , 还尝试的做了一个基于 Ant Design 的博客后台,半成品。

一晃就是半年,最近公司有个需求需要用到 React 。我才有机会再次看看这方面的知识。之前也曾想过认认真真用 React 搞点事情,但是功能区块的设计,就让人够伤脑筋,所以迟迟没有什么动力。这个问题在七月初,有了转机。

为什么选择Dva?

Dva:基于 redux、redux-saga 和 react-router@2.x 的轻量级前端框架。

  1. 易学易用:仅有 6 个 api,对 redux 用户尤其友好
  2. elm 概念:通过 reducers, effectssubscriptions 组织 model
  3. 支持 mobile 和 react-native:跨平台 (react-native 例子)
  4. 支持 HMR:目前基于 babel-plugin-dva-hmr 支持 components、routes 和 models 的 HMR
  5. 动态加载 Model 和路由:按需加载加快访问速度 (例子)
  6. 插件机制:比如 dva-loading 可以自动处理 loading 状态,不用一遍遍地写 showLoading 和 hideLoading
  7. 完善的语法分析库 dva-astdva-cli 基于此实现了智能创建 model, router 等
  8. 支持 TypeScript:通过 d.ts (例子)

以上是 Dvajs 的 github 上的优点自述。其中1、2、4、5、7 是我选择Dva的原因。

然后我结合Dva 和 material ui 做了一个简单的界面。感觉不错。但是没有时间来完善。dva练手

就聊聊当下

就聊聊当下。从去年10月份开始,然后就是我的同学。他带我去参加各种校招,但是这个过程啦。说什么都没有得到,也不是没有,只是感觉我根本没有去用心去参加这个校照只是去走过场而已,并且当时我的能力参加一些公司的校招肯定是过不了啦。但是现在已经距离那个时候已经过去了半年去。具体应该有半年多。

这半年来都干了些什么

期间我在一间一家很小了,不知道干什么的公司干了半个月,最后。被开除了但从那开始的话我已经认识到了一个事情就是,除非你出个牛逼,不然的话让人任人宰割会是任人摆布的那种,而是必须了,也应该是步入社会应该要学那些东西。并且这次期间租房子这方面也被别人骗过很多钱,你就说现在仔细算的话。我现在工作这么几个月转了工资大概大概,有很大一部分都是交给房租了。好在我在被开除了不到一个星期的时间就找到二份工作丢份工作。第二份工作,待遇怎么说也比第一份好很多吧,比起我的那些同学还是算中等偏上一点点。

在新的公司这边学了很多东西。但是主要都是侧重后端的开发。这虽然与我当初离开学校的时候打算做一个前端的意愿有一点点偏差,但是其实也并没有偏差到哪里去,因为做PHP全全栈开发也是一种对自己的锻炼嘛。学更多的东西,才有更多的资本。技多不压身。现在我应该能凭自己的能力了。能做一些比较小的项目。在很多方面也可以独当一面。

最近又在忙些什么事情

当然是在忙毕业的事情,主要就是毕业论文其实辩论文这个内容还些东西都是比较好做的,因为这些毕竟我都懂嘛,然后实现一个东西,或是写一些内容的话还是很容易的,不过嘞,学校就是一个很变态的格式也不算是变态吧,这东西不是做不做的到,而是有些人都不知道自己在想什么,我把那个格式的标准一直在变来变去了,我现在都已经在工作了,然后他说我格式不通过让我去再去改。反正我是不能理解这种做法了。那种只求形式,而不务实的做法。我觉得这种做法,还不如把大家早点放了算了,何必呢?浪费大家的时间。不过以后拿了毕业证的话就能转正了,毕业之后转正,这一点还是比较好了,毕竟就生活就不用过了,那么近窘迫了。嗯,等转正的做,我想去换一个住的地方。

接下来的这半年准备做什么,怎么做

前端这方面的开发,就是刚出学校的时候,第一份工作,学的那些React的知识,现在可能忘了一点,但是现在如果说给我一点时间去捡起来的话,也是可以很快捡起来的,我现在想做的那个目标就是根据现在所学的那些前段和后段的知识能够做一个前后端分离的小系统。

现在还是以公司这边事情为主公司有什么需求的话哦尽自己最大的可能去完成。因为这个不仅是关系的做事态度,也为后期去挑战更多的任务。打下一个基础嗯,现在大概就是这个样子。我感觉后期的话还是有很多事情可以做的。至于出去外面的话还是年底以后再考虑这个事情。

本文章是由搜狗语音输入法完成的。😘

在 CentOS 7 上搭建 PHP 5.6 + MySQL 5.7 + Nginx 的 Web 环境

在 CentOS 7 上搭建 PHP 5.6 + MySQL 5.7 + Nginx 的 Web 环境

LNMP环境搭建

写在前面

这类教程文章在谷歌上一搜就有一大片,这大概就是我写这篇文章的目的。同时也总结在这一过程中所学到的一些方法和感悟。

1.服务器环境简述

在这里我所用的服务器环境大概如下:

Key Value
服务商 阿里云
服务器类型 ECS
CPU 1G
RAM 1G
带宽 1M
系统 CentOS 7.2

2.软件安装过程

CentOS 中安装软件当然要用到 yum 指令,我们在使用yum指令的过程有些问题必须要注意。以我为例,在我的主机上直接执行yum install mysql安装后的MySQL 版本为5.5,直接执行yum install php安装后的PHP版本为5.4.这显然不是我想要的。因此有必要切换最新的版本的源。

安装nginx

  1. 建立nginx仓库;
rpm -Uvh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
  1. 下载并安装nginx;
yum install nginx
  1. 启动nginx;
systemctl start nginx.service
  1. 测试结果;
    通过浏览器访问服务器地址,可以看到nginx的欢迎页面

安装PHP

  1. 配置yum
rpm -Uvh http://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm
rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-7.rpm
  1. remi 源默认并没有启用,可以通过修改 repo 文件来启用它。
vim /etc/yum.repos.d/remi.repo

[remi]
......
enabled=1
[remi-php56]
......
enabled=1
  1. 安装PHP以及php-fpm
yum install php
yum install php-fpm
  1. 检查PHP是否安装成功
php --version
  1. 配置PHP.ini
vim /etc/php.ini

按照实际需要来配置,我只简单的配置了时区。

  1. 配置php-fpm
vim /etc/php-fpm.d/www.conf

;修改以下内容
; 配置php所属用户
user = nginx
group = nginx

listen.owner = nginx
listen.group = nginx

// 注意此处需要和文件目录的用户相同

; 通过sock方式通信
listen = /var/run/php-fpm/php-fpm.sock 
;注意,在nginx的配置文件中需要将把php解析地址指向到上面的目录
  1. 启动PHP
systemctl start php-fpm

安装MySQL5.7

  1. 配置yum源
rpm -Uvh http://repo.mysql.com/mysql57-community-release-el7.rpm
  1. 安装MySQL
yum install mysql-community-server
  1. 启动MySQL
systemctl start mysql
  1. 登陆MySQL并修改密码

可以在MySQL的log文件中查找的初始密码,及时修改密码。

配置nginx的配置文件

server {
    listen 80;
    server_name blog.kuoruan.com;

    root /path;
    index index.html index.htm index.php;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
        # fastcgi_pass 127.0.0.1:9000;
        fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
        #以上路径指向php-fpm.sock路径
    }
}

完成配置之后重启nginx,至此所有任务都已经完成。

总结

在安装的过程中,并非是一帆风顺,遇到了很多的问题,比如MySQL 的 mysql.sock 文件找不到导致的无法登陆数据库。nginx的配置文件错误导致的PHP文件没有被php-fpm解析。

因此我也学到了很多经验,比如通过查看log文件来分析问题出现的原因,使用Google查找解决问题的方法。

相关链接

Hello 2017

Hello 2017

2017 年已经到来,祝鸡年大吉。

总结2016

回首过去的一年,变化超级大。年初我定下一些年度目标:《站在2016的路口》,在年中的时候已经做了部分总结:《凌晨适合总结》。

当初定下的目标,有些在年中就已经完成了大半,有些在上半年还在跟进但是下半年却没有继续跟进了。还有些目标现在还在努力。

  • PHP 学习,上半年基础入门,但是下半年因为工作的原因暂缓了学习进度。不久之后又会因为工作原因继续学习PHP,为 web 全栈开发打下基础。
  • 前端学习,已经基本有现代前端开发的意识了。基本了解 ReactJs 的使用方法和原理,后期也会尽量将这部分知识用于实际开发中。
  • 驾照,GET
  • 体重控制在120斤左右 
  • 实习期间经济独立,不仅没有独立,还欠了一大笔债。 X
  • 实习期间攒钱买Macbook Pro,这个已经完成,这也是导致我欠了一屁股债的重要原因。  X

从2016年6月10日到今天的这一段时间,起起落落的过的也十分精彩。首先是有惊无险的拿到了驾照。开学之后还辗转于光谷和学校之间参加各种校园招聘,在线笔试,虽然最终都没有结果。网上到处投简历,然后意料之中的找到了一些机会。有那么几天甚至还纠结去哪工作,最后得到了一个结论,有时候你以为你有很多选择,其实你根本没得选。在十一月中旬,在定下了工作地点之后然后搬出学校,十二月初却被开除。在租的房子里迷糊了一个星期之后幸运的又找到了现在的工作。唯一的不同是,十二月的下半月每天早上挤公交出门,晚上挤公交回来。有好几次回家之后就累的不行。时不时地还能骑车上下班锻炼锻炼,生活也过的充实了很多。

谈谈现状

现在每天白天都有事做,晚上回到租房地也没有精力做别的事情。在做完手头的项目之后,公司打算让我继续向全栈更加的深入的学习。PHP 学习再次提上我的学习日程。这段时间和 Lazy Boy 时常也有一些交流,交流中学到了很多新的东西,也巩固了之前的知识。还有一个学长对我的帮助也很大。在此要感谢他们的帮助。

再定一些小目标

  • 坚持锻炼,坚持早睡早起。
  • 学习 PHP 。
  • 巩固前端。
  • 学会说话,学习做人。
  • 经济独立,
  • 多读书。

学习是人生的主旋律,2017更上一层楼!

 

 

 

开始了新的生活

开始了新的生活

十一月十六号正式上班,同时开启了我的一段新的生活轨迹。之前的一切找工作的努力都没有白费,毕竟凭借自己的能力找到了我意向的工作。人们都说能以自己喜欢的事情做为自己的工作是一件很棒的事情。

一个人在武汉开始了“汉飘”,在这边生活的事情什么都要考虑,我这个新手面对生活的琐事非常的措手不及。我比较幸运,不用很早起床堵早高峰,也不用堵晚高峰。因此我有更多的时间睡觉吃饭“学习”。

生活不易,时刻珍惜!

水平垂直居中

水平垂直居中

水平垂直居中

前几天室友在研究如何写一个漂亮的网页上碰到了这个问题。居中的问题在我之前的开发经历中还是碰到很多次,不过每次碰到我都会百度一下,找到适合的方法然后就用了,所以也一直没走心的记下一种方法便于以后省去上搜索引擎的时间。

我常用的左右居中

首先我先讲一下我最常用的左右居中:

1.text-align:center

这个专门用于块元素的文本节点的左右居中。也是最常用的左右居中之一。

2.margin:0 auto;

主要用于固定宽度的元素进行左右居中。

上下居中

3.line-height

将line-height设置为父元素的高度可以将文本节点上下居中。

上下左右居中

4.如下面代码示例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>垂直左右居中</title>
    <style>
        .box1{
            position: relative;
            width: 900px;
            margin: 0 auto;
            height: 750px;
            background-color: red;
        }

        .box2{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin:auto;
            width:500px;
            height: 200px;
            background-color: #fff;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="box2">
        13454646465446441346546
    </div>
</div>

</body>
</html>

说明

这是本人常用的几种方法,是否适用所有情况暂时没有进行考证。仅供参考之用。:-)

[ 求职狗的救赎 ]Cookies,SessionStorage,LocalStorage的区别

Cookies,SessionStorage,LocalStorage的区别

Cookies,SessionStorage,LocalStorage的区别

再见原题

今天参加了途牛笔试,总体情况很满意,试题是血统纯正的前端血统。其中一道问答题是,简述Cookies,SessionStorage,LocalStorage的区别。我第一次参加线下笔试就做过这一题,我没有清晰地完成这一题的论述。所以考试后我做了总结。今天碰巧就又考到了。所以发篇博客记录一下巩固记忆。

参考答案

  • ① cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
  • ② cookie数据还有路径的概念,可以限制cookie只属于某个路径下。
  • ③ 它们的有效时间不一样,cookie 在其规定的失效期之前有效;sessionStorage 在当前浏览器窗口关闭之前有效;而LocalStorage 长期有效,窗口或浏览器关闭也一直保存,因此用作持久数据。
  • ④ 它们的存储大小限制不同,cookie 数据不能操作4K,而sessionStorage 和localStorage 的存储上限则在5M或者更多。
  • ⑤作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。

总结

做前端,要学的东西真多。!

[ 求职狗的救赎 ]简述如何编写高复用可维护的CSS

[ 求职狗的救赎 ]简述如何编写高复用可维护的CSS

简述如何编写高复用可维护的CSS

题目出处

不得不说昨天晚上做的“跟谁学”的笔试题是我做过最专业的前端试题,其中就有如下论述题:

简述如何编写高复用可维护的CSS。

读题心情

当我看到题目时我是懵逼的,不知道从何下手。思考了很久只回答了选择器一个方面来讨论这个问题。今天回学校之后上网百度了比较全面的答案,经过自己的整理之后,放在下方分享。

参考论述

CSS开发者需在参与项目时应该时刻遵守如下三大规则:

  • 1.保持CSS便于维护
  • 2.保持代码清晰易懂
  • 3.保持代码的可拓展性

为了实现这三大目标,我们需要采取诸多方法。

CSS文档分析

不论编写什么文档,我们都应该尽力维持统一注释,语法,命名规范的风格。

总则:

尽量将行宽控制在80字节一下。例外的是:渐变(gradient)相关语法以及注释中URL为了保持所有环境下的CSS排版相同,更提倡用2个空格代替Tab进行缩进,并且将声明拆分成多行。

单一文件与多文件

在刚开始学习CSS的时候我们更习惯于在一个文件中编写所有的内容,而但我们开始使用Less或Sass等预编译语言之后,就会习惯将样式拆分成多个小文件。这都是很好的做法。但是无论你是用的是哪一种,以下的规则都将适用。

1.目录:在CSS文件的开头,编写一份目录如:

/*------------------------------------*\
    $目录
\*------------------------------------*/
/**
 * 重置相关属性...............按照相关需要重置部分标签属性
 * FONT-FACE...........引入web字体
 */

这份目录将告诉其他开发者这个文件中具体含有那些内容,这份目录中的每一项都对应其相应的区块。如果你在维护一份单文件CSS,对应的区块也将在同一文件中。如果你正在编写一组小文件,那么目录中的每一项都应当对应相应的@include语句。

2.区块标题,如下所示:

/*------------------------------------*\
    $FONT-FACE
\*------------------------------------*/

区块标题前缀 $ 可以让我们使用 [Cmd|Ctrl]+F 命令查找标题名的同时 将搜索范围限制在区块标题中 。如果这是一个较大的文件,那么在区块之间空5行,这样在大文件中快速翻动时有助于区块区分。如果这是一个多份文件的项目,那么只需要在文件头上加上标题即可。

3.代码顺序,应该尽量按照既定的顺序编写规则:

可以参考如下排列:

  • 1) Reset 万物之根源
  • 2) 元素类型 没有classh1、ul
  • 3) 对象以及抽象内容 最一般、最基础的设计模式
  • 4) 子元素 有对象延伸出来的所有拓展及其子元素
  • 5) 修补 针对异常状态

如此一来,当你依次编写 CSS 时,每个区块都可以自动继承在它之前区块的属性。这样就可以减少代码相互抵消的部分,减少某些特殊的问题,组成更理想的 CSS 结构。

4.CSS规则集分析:

selector {
  property : value;
  /*some notes*/
}

在编写CSS样式时,我们应当遵守以下规则:

  • class名称以”-“连接;
  • 缩进两个空格;
  • 声明拆分成多行;
  • 声明以相关性顺序排列,而非字母顺序;
  • 有前缀的声明适当缩进,从而对齐其值;
  • 缩进样式从而反映 DOM;
  • 保留最后一条声明结尾的分号。

5.注释:

注释行宽不超过80字节,在注释中尽量详细的描述代码,让其他开发人员跟容易看懂。

注释的拓展用法

注释有许多很先进的用法,例如:

  • 准修饰选择器
  • 代码标签
  • 继承标记
准修饰选择器

你应当避免过分修饰选择器,例如如果你能写 .nav{} 就尽量不要写 ul.nav{}。过分修饰选择器将影响性能,影响 class 复用性,增加选择器私有度。这些都是你应当竭力避免的。

不过有时你可能希望告诉其他开发者 class 的使用范围。以 .product-page 为例,这个 class 看起来像是一个根容器,可能是 html 或者 body 元素,但是仅凭 .product-page 则无法判断。

我们可以在选择器前加上准修饰(即将前面的类型选择器注释掉)来描述我们规划的 class 作用范围:

/*html*/.product-page{}

这样我们就能准确获知该 class 的作用范围而不会影响复用性。

6.CSS简写应当谨慎使用。

7.在CSS中坚决不要用ID

8.选择器——务必保持选择器简短高效。

通过页面元素位置而定位的选择器并不理想。例如 .sidebar h3 span{} 这样的选择器就是定位过于依赖相对位置,所以把 span 移到 h3 和 sidebar 外面时就很难保持其样式。

结构复杂的选择器将会影响性能。选择器结构越复杂(如 .sidebar h3 span 为三层, .content ul p a 是四层),浏览器的消耗就越大。

尽量使得样式不依赖于其定位,尽量保持选择器简洁清晰。

作为一个整体,选择器应当尽量简短(例如只有一层结构),但是 class 名则不应当过于简略,例如 .user-avatar 就远比 .usr-avt 好。

牢记:class 无所谓是否语义化;应当关注它们是否合理。不要强调 class 名要符合语义,而要注重使用合理且不会过时的名称。

过度修饰的选择器,由前文所述,过度修饰的选择器并不理想。

过度修饰的选择器是指像 div.promo 这样的。很可能你只用 .promo 也能得到相同的效果。当然你可能偶尔会需要用元素类型来修饰 class(例如你写了一个.error 而且想让它在不同的元素类型中显示效果不一样,例如 .error{ color:red; } div.error{ padding:14px;} ),但是大多数时候还是应当尽量避免。

再举一个修饰过度的选择器例子, ul.nav li a{} 。如前文所说,我们马上就可以删掉 ul 因为我们知道 .nav 是个列表,然后我们就可以发现 a 一定在 li 中,所以我们就能将这个选择器改写成 .nav a{} 。

选择器性能,虽然浏览器性能日渐提升,渲染 CSS 速度越来越快,但是你还是应当关注效率。使用间断、没有嵌套的选择器,不把全局选择器( *{} )用作核心选择器,避免使用日渐复杂的 CSS3 新选择器可以避免这样的问题。

译注,核心选择器:浏览器解析选择器为从右向左的顺序,最右端的元素是样式生效的元素,是为核心选择器。

9.使用 CSS 选择器的目的

比起努力运用选择器定位到某元素,更好的办法是直接给你想要添加样式的元素直接添加一个 class。我们以 .header ul{} 这样一个选择器为例。

假定这个 ul 就是这个网站的全站导航,它位于 header 中,而且目前为止是 header 中唯一的 ul 元素。 .header ul{} 的确可以生效,但是这样并不是好方法,它很容易过时,而且非常晦涩。如果我们在 header 中再添加一个 ul 的话,它就会套用我们给这个导航部分写的样式,哪怕我们设想的不是这个效果。这意味着我们要么要重构许多代码,要么给后面的 ul 新写许多样式来抵消之前的影响。

你的选择器必须符合你要给这个元素添加样式的原因。思考一下, 「我定位到这个元素,是因为它是 .header 下的 ul ,还是因为它是我的网站导航?」这将决定你应当如何使用选择器。

确保你的核心选择器不是类型选择器,也不是高级对象或抽象选择器。例如你在我们的 CSS 中肯定找不到诸如 .sidebar ul{} 或者 .footer .media{} 这样的选择器。

表达清晰:直接找到你要添加样式的元素,而非其亲元素。不要想当然地认为 HTML 不会改变。 用 CSS 直接命中你需要的元素,而非投机取巧。

10.!important

只在起辅助作用的 class 上用 !important 。用 !important 提升优先级也可以,例如如果你要让某条规则 一直 生效的话,可以用 .error{ color:red!important; }。

避免主动使用 !important 。例如 CSS 写得很复杂时不要用它来取巧,要好好整理并重构之前的部分,保持选择器简短并且避免用 ID 将效果拔群。

11.魔数与绝对定位

魔数(Magic Number)是指那些「凑巧有效果」的数字,这东西非常不好,因为它们只是治标不治本而且缺乏拓展性。

例如 .dropdown-nav li:hover ul{ top:37px; } 把下拉菜单移动下来远非良策,因为这里的 37px 就是个魔数。37px 会生效的原因是因为这时 .dropbox-nav 碰巧高 37px 而已。

这时你应该用 .dropdown-nav li:hover ul{ top:100%; } ,也即无论 .dropbox-down 多高,这个下拉菜单都会往下移动 100%。

每当你要在代码中放入数字的时候,请三思而行。如果你能用一个关键字(例如 top:100% 意即「从上面拉到最下面」)替换之,或者有更好的解决方法的话,就尽量避免直接出现数字。

你在 CSS 中留下的每一个数字,都是你许下而不愿遵守的承诺。

条件判断

专门为 IE 写的样式基本上都是可以避免的,唯一需要为 IE 专门处理的是为了处理 IE 不支持的内容(例如 PNG)。

简而言之,如果你重构 CSS 的话,所有的布局和盒模型都不用额外兼容 IE。也就是说你基本上不用 <!–[if IE 7]> element{ margin-left:-9px; } < ![endif]–> 或者类似的兼容 IE 的写法。

Debugging

如果你要解决 CSS 问题的话, 先把旧代码拿掉再写新的 。如果旧的 CSS 中有问题的话,写新代码是解决不了的。

把 CSS 代码和 HTML 部分删掉,直到没有 BUG 为止,然后你就知道问题出在哪里了。

有时候写上一个 overflow:hidden 或者其它能把问题藏起来的代码的确效果立竿见影,但是 overflow 方面可能根本就没问题。所以 要治本,而不是单纯治标

CSS 预处理器

我用 Sass。使用时应当 灵活运用 。用 Sass 可以令你的 CSS 更强大,但是不要嵌套得太复杂。在 Vanilla CSS 中,只在必要的地方用嵌套即可,例如:

.header{}
.header .site-nav{}
.header .site-nav li{}
.header .site-nav li a{}

这样的写法在普通 CSS 里完全用不到。以下为 不好的 Sass 写法:

.header{
    .site-nav{
        li{
            a{}
        }
    }
}

如果你用 Sass 的话,尽量这么写:

.header{}
.site-nav{
    li{}
    a{}
}