css设计模式

本文的主要思想借鉴与 没那么难，谈CSS的设计模式

定义："设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的；设计模式使代码编制真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。

css缺陷:它的任何一个规则，都是全局性的声明，会对引入它的页面当中所有相关元素起作用，不管那是不是你想要的。而独立及可组合的模块是一个可维护系统的关键所在。

使用方式:我们不需要去迎合模式，要让模式为我所用，你需要去了解它们背后的原理，要知道它们用什么方式解决了什么问题，然后借鉴之，用它的方式解决我们的问题。

---

设计模式

一.
1.分
分成头部、导航、侧边栏、banner区、主内容区、底部
2.拆
边框、背景、图标、字体、边距、布局方式等这些可复用的样式单独拆分出来
3.组件化
面包屑、分页、弹窗等，它们不适合被放到某一个固有模块的代码中，就可以单独的分出一段专属的css和js
4.排序

@import "mod_reset.css";
@import "ico_sprite.css";
@import "mod_btns.css";
@import "header.css";
@import "mod_tab.css";
@import "footer.css";

5.文件头部建立一个简要的目录以及相应区块的注释(区块用途逻辑等)

0EAAE9C0-F312-45A1-8C00-D7AA97743901.png

---

二.
1.避免使用元素选择器(a p)
2.避免使用群组选择器

3BF7B17C-8E31-4DA8-9DB9-0FE18466F3B7.png

3.注意文件的加载顺序对界面展示的影响

---

三.OOCSS

separating structure from skin and container from content.

.button {
  width: 200px;
  height: 50px;
}

.box {
  width: 400px;
  overflow: hidden;
}

.widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
}

.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

.globalwidth {
  width: 980px;
  margin: 0 auto;
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
  overflow: hidden;
}

.header-inside {
  padding-top: 20px;
  padding-bottom: 20px;
  height: 260px;
}

<header>
  <div class="header-inside globalwidth">
  </div>
</header>

<div class="main globalwidth">
</div>

<footer>
  <div class="footer-inside globalwidth">
  </div>
</footer>

---

四.SMACSS——Scalable and Modular Architecture for CSS
1.base-基础
基础的样式，最先定义好，针对某一类元素的通用固定样式
2.layout-布局
布局样式，是跟页面整体结构相关，譬如，列表，主内容，侧边栏的位置，宽高，布局方式等。
3.Module-模块
模块样式，就是我们在对页面进行拆分的过程中，所抽取分类的模块，这类的样式分别写在一起
4.State-状态
页面中的某些元素会需要响应不同的状态，比如，可用、不可用、已用、过期、警告等等。将这类样式可以组织到一起。
5.Theme-主题
主题是指版面整个的颜色、风格之类，一般网站不会有频繁的较大的改动，给我们印象比较深的是QQ空间，其他应用的不是很多，所以，这个一般不会用到，但有这样一个意识是好的，需要用到的时候，就知道该怎样规划。

---

五.meta css 原子类 无语义类

2A530334-C070-44EB-8919-10F464790907.png

但是如果按照这种写法，任何css样式都可以单独分离出来写，而且不易维护，因为html和css都需要响应的修改。但是像 clearfixed float 文本布局（text-align）、Flexbox，这些没那么多可能性的值的可以考虑下。

---

六.BEM

严格说来，BEM不是一套有骨有肉的模式，也不仅仅局限你在CSS的层面去规划，它是一种怎样去组织、编写代码的思想

BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copying and pasting.

1.block
A logically and functionally independent page component, the equivalent of a component in Web Components. A block encapsulates behavior (JavaScript), templates, styles (CSS), and other implementation technologies. Blocks being independent allows for their re-use, as well as facilitating the project development and support process.

feature:the block name describes its purpose ("What is it?" — menu or button), not its state ("What does it look like?" — red or big).

E1AFD031-3CD4-42C5-88B6-889C69B67932.png

2.element
A constituent part of a block that can't be used outside of it.

feature:
1.The element name describes its purpose ("What is this?" — item, text, etc.), not its state ("What type, or what does it look like?" — red, big, etc.).
2.The structure of an element's full name is block-name__element-name. The element name is separated from the block name with a double underscore (__).

B548BEFA-7B4D-4E22-A25F-DC93E9BE56EA.png
3.Modifier
A BEM entity that defines the appearance and behavior of a block or an element.The use of modifiers is optional.

feature:
1.The modifier name describes its appearance ("What size?" or "Which theme?" and so on — size_s or theme_islands), its state ("How is it different from the others?" — disabled, focused, etc.) and its behavior ("How does it behave?" or "How does it respond to the user?" — such as directions_left-top).
2.The modifier name is separated from the block or element name by a single underscore (_).

0E266BF3-B579-498F-A2F1-C20B9574A308.png