SMAcss学习笔记

https://smacss.com/book/
1.简介
SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS.
SMACSS是一种检查你的设计过程和作为一种符合这些严格的框架在一个灵活的思维过程。它尝试编写用一致的方式开发网站

2.分类CSS规则
5个类型的css规则：
《1 base:
Base rules are the defaults. They are almost exclusively single element selectors but it could include attribute selectors, pseudo-class selectors, child selectors or sibling selectors. Essentially, a base style says that wherever this element is on the page, it should look like this.
Base rules是默认的，他们 几乎是专一的元素选择器，但可以包括属性选择器，伪类选择器，子选择器和兄弟选择器

html, body, form { margin: 0; padding: 0; }
input[type=text] { border: 1px solid #999; }
a { color: #039; }
a:hover { color: #03C; }

《2 layout
Layout rules divide the page into sections. Layouts hold one or more modules together.
布局规则将网页划分为几个片段，布局包含一个或多个模块

《3module
Modules are the reusable, modular parts of our design. They are the callouts, the sidebar sections, the product lists and so on.
模块是可重用的，设计模块化的部分，例如插图编号，侧边栏，和产品列表等。

《4state
State rules are ways to describe how our modules or
layouts will look when in a particular state. Is it hidden or expanded?
Is it active or inactive? They are about describing how a module or
layout looks on screens that are smaller or bigger. They are also about
describing how a module might look in different views like the home page
or the inside page.

《5 Theme rules
类似于state，描述布局或模块的样式，但很容易意识到主题不需要专门的主题层
Naming Rules

命名规则对快速理解一个样式是非常有意的
I like to use a prefix to differentiate between Layout, State, and Module rules. For Layout, I use l- but layout- would work just as well. Using prefixes like grid- also provide enough clarity to separate layout styles from other styles. For State rules, I like is- as in is-hidden or is-collapsed. This helps describe things in a very readable way.
Modules are going to be the bulk of any project. As a result, having every module start with a prefix like .module- would be needlessly verbose. Modules just use the name of the module itself.
/* Example Module */
.example { }

/* Callout Module */
.callout { }

/* Callout Module with State */
.callout.is-collapsed { }

/* Form field module */
.field { }

/* Inline layout */
.l-inline { }

3.Base Rules
设置一些基础样式，比如标题的大小，默认的链接样式，字体和body的背景等
body, form {
margin: 0;
padding: 0;
}

a {
color: #039;
}

a:hover {
color: #03F;
}
4.Layout Rules
css最原始的功能是在页面上布局元素，他不是狭义的组建，如表单，导航栏，而是更大意义的布局组建，比如header,footer.

#header, #article, #footer { width: 960px; margin: auto;}#article { border: solid #CCC; border-width: 1px 0 0;}**5.module rules** 一个模块是页面上一个更加分立的原件，比如导航栏，对话框，位于布局组建的内部。每个模块都应该被设计成标准的可伸展的组建， 在设置模块时，要避免使用ID选择器和元素选择器，坚持使用类选择器，**7.state rules** 状态规则会增强和覆盖其他样式，比如手风琴可以收缩或张开，信息类型可以是操作成功或失败，可以被应用到模块规则或布局规则中作为他们的基础规则

There is an error!

Search

8.theme rules
主题可能是不证自明的，但是一个主题往往定义颜色，图片去给应用或网站他们的外观和感觉。分离主题自成一套系列会允许这些主题轻易被定义为其他可选择的主题
这些主题样式可能会覆盖主要的类型样式，比如覆盖基础样式的默认链接颜色，改变模块的元素样式（颜色。边框），也可能会影响布局通过不同的安排。。

9》change state
State changes are represented in one of three ways:
class name
pseudo-class
media query
改变这三个的方式有
改变类名等
JavaScript changing state via class name
// with jQuery
(‘.btn-close’).click(function(){(this).parents(‘.dialog’).addClass(‘is-hidden’);
})

10.depth of applicability 适用性的深度
减小深度/深度计算/优化方案

11.selector performance 选择器的性能
浏览器被设计为像流一样处理文本，在完全下载完文本之前就已经开始呈现文本了。每个节点被解析和呈现到视窗当他们被接收。
/输的渲染，从外到内
body div#content p { color: #003366; }从右向左
I follow three simple guidelines to help limit the number of elements that need to be evaluated:
Use child selectors
Avoid tag selectors for common elements
Use class names as the right-most selector

12 html5 and smacss
two goals: increase semantics and decrease reliance on specific HTML

13. prototyping 原型化
Goals of a prototype

A prototype can serve multiple goals:
show states
review localization
isolate dependencies
Prototype Engine
Remember, patterns are good. Codifying those patterns is also good.
Having a process in place to review and test those patterns is great!