SMACSS CSS指引

SMACSS 全称为 Scalable Modular Architecture CSS. 即可扩展模块化结构CSS.

分类规则(SMACSS核心):

  • Base
  • Layout
  • Module
  • State
  • Theme

Base Rules - 基本规则

主要应用于元素选择器,后代选择器,子选择器,伪类. 不包括ID或类选择器.

CSS Resets

Layout Rules - 布局规则

唯一主要使用ID选择器(JS Hook)

Module Rules - 模块规则

页面的”肉”,每一个模块都应该设计成独立的组件,让页面更加灵活。模块可以在页面不同部分简单移动而不会破坏布局。
避免使用ID或元素选择器

避免元素选择器

使用元素的子选择器或后代选择器需要保证元素选择器的可预见性。
只加入有语义的选择器。
如果希望使用,应该限制在一层类选择器里面。

State Rules - 状态规则

增加/覆盖所有的样式。

Theme Rules - 主题规则

用Sublime Text打造mac下的markdown编辑器

为了结合hexo在Mac下更好编辑.md文件,目前选用了Sublime Text2编辑器加markdown插件的方式作为默认MD编辑工具


安装 Package Control

输入快捷键 Ctrl + ` 进入命令行

1
import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

安装后重启可以在Preferences -> Package Settings看到Package Control.

安装 Markdown Preview

输入Command + Shift + p 调出命令面板, 先搜索Install Package, 然后再搜索markdown preview,点击安装。

定义快捷键

Preferences -> Key Bindings User
新增一行

1
{ "keys": ["alt+m"], "command": "markdown_preview", "args": { "target": "browser"}}

定义alt + m 为 markdown 预览快捷键。

设置语法高亮

Preferences ->Package Settings->Markdown Preview->Setting Default找到

1
2
3
... ...
"enable_mathjax": false,
"enable_highlight": false

将这2个值都改为true。但语法高亮似乎与选择的主题有关。我暂时选择了LAZY的Color Scheme. 中间也尝试了用了iTg,Monokai Extended等主题,都感觉不太理想。可能我自己在非coding模式下比较喜欢白色的编辑界面。

基于shadowsocks的用户管理系统

购买的digtalocean(简称:DO)的VPS除了放置闲置的网站和偶尔翻翻墙之外,其实总体利用率还是很低的。有一个电脑小白的朋友,说他想用google找图片,但不知道怎么用google。最近测试并整理了关于shadowsocks的管理系统ss-panel的东西,供大家学习参考。

安装步骤

安装lnmp

安装步骤很简单,但是需要注意的是lnmp自带的php版本为5.3,需要在线升级到5.4之后ss-panel才能用。

安装shadowsocks Manyuser

安装ss-panel

注意ss-panel只是搭配Shadows Manyuser的前端程序,所以2者实际上的数据库是同一个库(假设场景是前端和后端都是同一台机器)

关于多节点

这里我还没去测试,具体的概念就是部署了多个shadowsocks后端程序,然后通过与前端程序共享一个数据库实现。也就是说,mysql需要开放远程连接的方式给所有的后端节点访问。

使用Supervisor管理python进程

安装

1
2
3
4
5
6
yum install python-setuptools
easy_install supervisor
```
## 检查安装是否成功
``` bash
echo_supervisord_conf

创建配置文件

1
echo_supervisord_conf > /etc/supervisord.conf

新增进程启动项

1
2
3
[program:shadowsocks]
command=python <PATH>/server.py -c <PATH>/config.json
autostart=true ;自动启动

运行

supervisord //启动
supervisorctl //打开命令行

注意修改conf文件之后用调用supervisorctl reload, 配置文件才能生效

使用Supervisor管理python进程

安装

1
2
3
4
5
6
yum install python-setuptools
easy_install supervisor
```
## 检查安装是否成功
``` bash
echo_supervisord_conf

创建配置文件

1
echo_supervisord_conf > /etc/supervisord.conf

新增进程启动项

1
2
3
4
[program:shadowsocks]
command=python <PATH>/server.py -c <PATH>/config.json
stderr_logfile=<PATH>/err.log
stdout_logfile=<PATH>/out.log

运行

supervisord //启动
supervisorctl //打开命令行

注意修改conf文件之后用调用supervisorctl reload, 配置文件才能生效

CSS优先级覆盖问题

一般来说,CSS优先级覆盖有以下几个概念:

  • !important 重要性
  • 默认继承
  • 优先级计算

!important (重要性)

!important默认的权重最高,会覆盖其他所有属性. 而且!important属性会无视默认CSS的权重问题,即权重相同后面的会覆盖前面定义的CSS样式

1
2
3
4
5
6
7
p {
color: black !important; //权重最高
}


p {
color: red;
}

默认继承

例如color, font这些属性,父元素的颜色影响子元素是有用的,避免大规模定义,可以提供效率。但类似margin, padding这些CSS是默认不继承父元素,但也提供了以下的方法实现继承:

1
2
3
4
5
6
7
aside {
margin: 10px;
}


aside section {
margin: inherit;
}

与inherit相对的值是initial. 表示取消继承. (?怎么用?)

通用选择器

优先级计算

牢记:ID选择器比任意数量的class, 属性或元素选择器要高.
用a, b, c, d 代表优先级依次递减。计算公式:

  • a 如果style属性定义的声明,则为1,否则为0;
  • b 等于id选择器的数目
  • c 等于属性选择器,class和伪class的数量
  • d 等于元素名和伪元素的数目

以下权重为0,0,1,3(a = 0, b = 0, c = 1, d = 3)

1
2
3
article section h1.title {

}

以下权重为0,1,0,0

1
2
<section style="padding-bottom: 10px;">
</section>

命名空间

1
2
3
4
5
6
7
8
9
10
11
h2 {
font-size: 24px;
}


.home h2 {
font-size: 36px;
}


.home h2.hightlight {
font-size: 30px;
}

场景:主页定义了h2的字体大小, 子页面重新覆盖了主页面的h2字体大小,因为需求需要,又覆盖了子页面的h2字体大小。
这样会导致的问题就是css代码的层级层级越来越长,特别在用LESS/SASS不恰当使用下,这种情况会被大量的滥用。

2个主要的OOCSS原则

把容器的内容分离

1
2
3
4
5
6
7
8
.module {
margin: 10px;
}


.hd {
padding: 5px;
color: #333;
}

1
2
3
<div class="module">
<h1 class="hd">title</h1>
</div>

元素的结构的规则和皮肤应该分开

1
2
3
4
5
6
7
.module {
margin: 10px;
}


.module-sale {
background: #efefef;
}

1
2
3
<div class="module module-sale">
...
</div>

Javascript 设计模式读书笔记

一直很喜欢前端界的大牛addyosmani,趁着假期拜读了他的Javascript设计模式Learning Javascript Design Patterns。这篇文章主要作为个人在javascript底层知识的学习记录和笔记。其实今年来陆陆续续有在关注和看一下国外的书籍及前沿的技术内容,但确实是感觉自己的英文有点菜,看不懂的内容很多,尤其是对于长句子的解读更加弱爆。这方面的动力主要是工作压力原因和个人的意愿,以我目前的知识结构感觉很难让自己及整个团队再上一个台阶。

什么是设计模式

设计模式3个最主要的好处:

  • 被验证的解决方案
  • 能够被重用
  • 富有表现张力

反模式

  • 定义大量的全局变量
  • 使用setTimeout或setInterval内部用eval触发的字符串
    错误用法
    1
    2
    setTimeout("myFunc()", 1000);
    setTimeout("myFunc(1,2,3)", 1000);

正确用法

1
2
3
4
setTimeout(myFunc, 1000);
setTimeout(function () {
myFunc(1, 2, 3);
});

  • 修改JS原生的对象原型
  • 直接在一行里面写JS代码
  • 使用document.createElement替代document.write

设计模式分类

创建型设计模式

集中处理对象创建机制,控制创建过程
Constructor, Factory, Abstract, Prototype, Singleton, Builder.

结构设计模式

关注对象构成及定义简单的方式实现不同对象的关系
Decorator, Facade, Flyweight, Adapter, Proxy

行为设计模式

改进或提高系统里不同对象的通讯
Iterator, Mediator, Observer, Visitor.

JS设计模式

原生的对象

这里看到有些中文书籍硬生生地把Object literal notation翻译成对象字面量,感觉非常地奇怪。个人更愿意把它叫做Javascript原生对象。

1
2
3
4
5
6
7
var myObject = {
key: 'value';
func: function() {
// ...
}
}
myObject.key2 = 'new value';

模块模式(Module Pattern)

模块模式一般是着重于类公有/私有的封装,在Javascript里模块是用一个包含着公有/私有方法和变量的简单对象来模拟。模块模式的封装主要是用闭包,保证只返回公有方法,其他内容保存在闭包里面。
这里还有一个叫IIFE的概念。全称是immediately-invoked functional expression. 立即调用函数表达式。通过IIFE实现闭包。Javascript不像传统的其他面向对象语言拥有公有/私有变量的语法,所以通过函数作用域来模拟,除了在返回对象里面定义的方法和变量对外公开,其他变量和方法都属于模块自己私有。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var testModule = function() {

var counter = 0;

return {
incrementCounter: function() {
return counter++;
},

resetCounter: function() {
counter = 0;
}
}

})();

模块暴露模式(The Revealing Module Pattern)

模块暴露模式其实是做为模块模式的补充,这里这个翻译不知道是不是最合适的。这种js的写法现在已经被大规模的推广,个人感觉比较好的地方就是在代码尾段的返回对象就可以对这个模块对外的接口一目了然。当然这种情况也更多的使用在类似一些until工具类上。但书里提到的关于2者的区别其实界限我没看得太明白,在此暂时搁下再议。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var revealModule = (function() {

var privateVar = 'real module',
publicVar = 'hello';

function privateDisplay() {
console.log('my name:' + privateVar);
}

function publicSetName(name) {
privateVar = name;
}

function publicGetName() {
return privateDisplay();
}

return {
setName: publicSetName,
getName: publicGetName,
greeting: publicVar,
}
})();

单例模式

例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var mySingleton = (function() {

var instance;

function init() {
return {
publicMethod: function() {
console.log('singleton');
}
};
}

return {
getInstance: function() {
if (!instance) {
instance = init();
}

return instacne;
}
}
})();
mySingleton.getInstance().publicMethod();

观察者模式

目前比较流行的Publish/Subscribe模式,

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
var pubsub = {};
(function (q) {
var topis = {},
subUid = -1;

// 事件广播(主题名和参数)
q.publish = function (topic, args) {
if (!topics[topic]) {
return false;
}

var subscribers = topics[topic],
len = subscribers ? subscribers.length : 0;

while (len--) {
subscribers[len].func(topic, args);
}
return this;
}

// 订阅事件(主题名和回调函数)
q.suscribe = function (topic, func) {

if (!topic[topic]) {
topics[topic] = [];
}

var token = (++subUid).toString();
topics[topic].push({
token: token,
func: func
});
return token;
}

q.unsubscribe = function (token) {
for (var m in topics) {
if (topics[m]) {
for (var i = 0, j = topics[m].length; i < j; i++) {
if (topics[m][i].token == token) {
topics[m].splice(i, 1);
return token;
}
}
}
}
return this;
}

}(pubsub));

中介者模式

指令模式

常用Sublime Text配置及使用技巧

转Mac OS的工作环境开始有一段时间了,需要一款类似Windows下类似Editplus或Ultradit的工具,作为IDEA下文本编辑或简单代码的轻量IDE补充工具。由于不想折腾VIM类似的工具,所以选择了Sublime Text做为首选工具。这里主要记录Sublime Text的配置及技巧以便平时使用。另一方面不得不感叹社区的成熟,所有工具应有尽有。

配置类

Sublime Text的配置分为系统级(Default)和用户级(User). 用户级默认覆盖系统级的配置。所以这里不建议去修改系统级的配置, 一方面是改错了忘记备份对原文件的破坏,另一方面是不方便查找比较。
打开Preferences->Settings - User

1
2
3
4
5
{
... ...
"translate_tabs_to_spaces": true, // 默认将tab转换为空格
"scroll_past_end": true, // 当文件到末尾时还能继续滚动
}

快捷键

  • Command + L: 选择当前行
  • Command + D: 选择当前单词
  • Command + Shift + L: 向前/后选择全部
  • Command + X: 删除当前行
  • Command + Shift + P: 打开命令面板

更多快捷键参考Keyboard Shortcuts - OSX

插件类

JsFormat

使用方法:直接打开一个js文件,按Command + Shift + P, 搜索format回车。

Emmet

著名的快速编写前端代码工具

liveReload

编辑代码时配合浏览器自动刷新效果。

关于网页布局css的container和wrapper

平时在看网站页面源码的时候总会看到类似class=”container”或者class=”wrapper”类似的用法,为了解决自己的困惑,我搜索了一下相关的关键词,发现其实也有其他人有类似的疑问。
这里我找到一个个人比较认同的答案作为这个问题的解释。
链接在此


答案大概是这么写的:
A container or wrapper is a dummy div used for purposes of setting backgrounds, floats or padding on another div. Sometimes you need an parent div to get a block level element to do what you want, whether that’s simply setting a background or using margin: 0 auto to center a block. People just call them wrappers out of custom and also that it’s a very uncommon need for a class name. It means nothing technically.

也就是说,其实我们用container和wrapper作用差不多,使用场景是当我们需要统一控制块级元素的背景或布局居中时。这时候通过简单地为需要统一表现的块级元素加上一层div来实现控制。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="header">
<div class="container">
<ul class="nav">
<li class="nav-item"></li>
<li class="nav-item"></li>
</ul>
</div>
</div>
<div class="content">
<div class="container">
<div class="article">
... ...
</div>

</div>
</div>

.container {
  width: 980px;
  margin: 0 auto;
}