CSS knowledge summary design pattern (continuous learning)_html/css_WEB-ITnose

OOCSS

Reference: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented- css-oocss Author: Louis Lazaris

oocss was first proposed by Nicole Sullivan in Web Directions North. It represents a fast, maintainable, standards-based CSS writing method.

The full name is object-oriented-css, object-oriented CSS. Since it is object-oriented, what are objects in OOCSS? The object in OOCSS is a reusable visual model. OOCSS pays attention to reuse, fast and efficient writing styles, and is easy to modify, add and maintain in the future.

Basic principles of OOCSS

1. Separation of structure and style

Code example:

Using OOCSS Before:

#button {    width: 200px;    height: 50px;    padding: 10px;    border: 1px solid #ccc;    background: linear-gradient(#ccc, #222);    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;} #box {    width: 400px;    overflow: hidden;    border: solid 1px #ccc;    background: linear-gradient(#ccc, #222);    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;}

After using OOCSS:

.button {    width: 200px;    height: 50px;} .box {    width: 400px;    overflow: hidden;} .skin {    border: solid 1px #ccc;    background: linear-gradient(#ccc, #222);    box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;}

The former ordinary CSS uses the id selector, and all features exist independently in each element. The latter uses OOCSS, through the class selector, and extracts the common styles into a class named skin, and reuses it on each element. Obviously, the amount of code has been reduced, achieving the effect of reuse. If you need to modify the performance of boxes and buttons on the page, you only need to maintain the style code in the skin. The cost is just one more class.

2. Separation of container and content

Sample code:

#sidebar h3 {  font-family: Arial, Helvetica, sans-serif;  font-size: 2em;  line-height: 1;  color: #777;  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;}/* other styles here.... */#footer h3 {  font-family: Arial, Helvetica, sans-serif;  font-size: 1.5em;  line-height: 1;  color: #777;  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;}

In this example, the descendant selector always depends on a specific container (even the id selector) and cannot be reused at all. When we build module classes based on OOCSS and ensure that certain styles do not depend on external containers, our style classes can be reused anywhere. For example:

.h3-base {font-family: Arial, Helvetica, sans-serif;  font-size: 1.5em;  line-height: 1;  color: #777;  text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;} #sidebar .h3-base {  // 像这样不想多加class的话，外部也来在所难免，看个人斟酌  font-size: 2em;}#footer .h3-base {  text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;}

We stripped out the basic h3 features in the project and put them in a class called h3-base. In this case (#sidebar and #footer), override the unique characteristics of each. to allow common styles to be reused anywhere.

The following example illustrates this principle more clearly:

.header-inside {  * width: 980px;  height: 260px;  padding: 20px;  * margin: 0 auto;  * position: relative; (使内部有定位的元素，根据这个容器来定位)  * overflow: hidden;（创建BFC，块级格式化上下文, 清除浮动）}

If it is in a width of 980px, the page content will always be In a centered website, there are many styles with * symbol code in the header-inside that can be extracted for reuse (for a width of 980px, centered, absolutely independent container).

.globalwidth {    //这里主要是外部容器的通用样式  width: 980px;  margin: 0 auto;  position: relative;  overflow: hidden;}  .header-inside {  //这里可以看做影响内部内容的样式  padding: 20px;  height: 260px;}

I believe that the class name globarwidth can be fully reused in the application scenarios mentioned above. You only need to add a globarwidth class to create an outer container.

Learn advanced articles:

http://www.w3cplus.com/css/facebook-status-message-design-with -css CSS to create Facebook media objects

http://www.w3cplus.com/css/oocss-core OOCSS?? Core Chapter

Personal summary about OOCSS : OOCSS is an ideological concept that focuses on reducing dependence on HTML and increasing the reusability of styles. Abstract and modularize styles to increase the reusability of styles. It reduces the size of CSS style sheets and adds additional class tags to make HTML files larger. Even so, the sacrifice of a small markup structure has resulted in improved style performance (style sheets can be cached by the browser), higher work efficiency, and a style module that can be continuously maintained and is more reliable. Readability. However, in the process of abstraction, it is necessary to have a deeper and more comprehensive understanding and abstraction of requirements and designs. At the same time, the design and requirements need to be relatively stable, and there should be no major requirements or design changes. If the design continues to change and the requirements continue to change, then Many abstract classes will be broken, which will eventually lead to confusing code. So there are some overkill in small projects.

Notes on using OOCSS (may help you get started quickly):

1. Avoid descendant selectors (such as do not use something like .sidebar h3): This Will generate dependencies on external containers;
2. Avoid using id as a style hook: id is unique and cannot be reused;
3. Avoid attaching an element name to the class name in your style sheet
4. Except in some rare cases, avoid using !important: brute force methods, the code will be difficult to maintain;
5. Use CSS grid (essential for layout reuse)

SMACSS

The styles in SMACSS are logically divided into 5 categories:

1.base:

base is similar to our commonly used reset. Just set the default value of the label. The requirements for this part of the style are: no id selector and class selector should appear, but attribute selectors and pseudo-class selectors can be used.

Code example:

html{ … },   input[type=text]{ … },  a:hover { … }

2.layout:

Large block location, layout style. Here the id selector and class selector are used.

Code example:

#header { margin-top: 20px 0; }, .container { margin: 0 auto; width: 960px; }

3.Module:

module即组件样式，需要能在任何地方复用的，自觉和bootstrap中的components非常相似。这里使用class selector和 descendent selector（后代选择器）.

代码示例:

 .button { background-color: #foo; border: …; width: …;  box-shadow: …; padding: …;} .button a { color: #ddd; } 或者 .button .link { color: #ddd; } (多用class,少用tag)

 

 

4.state: 

状态，故控制module各个状态下的表现的样式。使用class selector。

.button.hovered { background: …; }.button.actived { background: …; }

 

 

5.theme：

主题，也就是项目特有的主题下的样式，主视觉效果，主题的样式去override上面的样式，来达成需要的视觉效果，就类似于皮肤skin。在google material设计中，就用了md-default-theme这样的类名来为各个module添加额外的样式，比如background-color之类的skin，它也支持用户自己配置theme的色彩样式，大爱！

 

关于SMACSS的个人总结：根据CSS rules自身不同的逻辑作用去分门别类非常的cool，使用前一定要花功夫去认真分类样式，如果分类混乱，将难以复用。像OOCSS，在需求设计改变频繁时，很难把控。

 

ACSS(atomic CSS、原子CSS)

ACSS即为原子CSS，就像自然界中把整个的物体不断拆分最后都是由原子之类构成的（化学没学好），这样也就不存在物体之间的差别了，所有事物都是原子，也就方便了描述。ACSS把每一条CSS rule都看做一个原子，给rule一个class类名。

示例代码：

.mr-1 { margin-right: 10px; }   .mr-2 { margin-right: 20px; }<div class=“mr-1 of-h foo foo foo foo foo foo ”></div>

 

就用这一个个class复合在一起，来实现样式表现。这样的好处是什么呢？很容易看懂，每个class对应的就是那条rule，会CSS的人都能看懂。它声称自己语义化的优势，一个好的命名就是在任何时候，都不改变名称，它做到了。 并且在需求和设计频繁改变时，只需要在改变的元素上修改class属性就搞定了，相当方便，面对改变游刃有余。

但是，ACSS会在你的html文件中添加无数的class，污染html，可读性大大降低，如果元素的样式复杂，很难想象上面有几十个class该怎么去阅读。

关于ACSS的个人总结：ACSS最大的优点是，应对变化相当灵活，在页面较简单的情况下，很适合使用，但在复杂的场景中，html的混乱也会导致严重后果。我个人更愿意在项目或者模块开发之初使用ACSS，这样可以应对频繁修改的需求和设计。当需求和设计趋于完整稳定时，再去用模块化的思想重构它，把杂乱无章的class抽丝剥茧。所以ACSS让CSS代码的重构变得更容易了。

  

BEM（Block____Element??Modifier）

BEM：Block（块）、Element（元素）、Modifier（修饰符）

BEM本身是有一套自己的工作流的，指的是由Yandex团队提出的一种前端命名方法论。BEM的命名约定更严格，包含更多的信息。

Block：独立的、更高级别的组件化抽象。Class selector only。

Element：Block的后代，是Block的构成元素。Class selector only。

Modifier：注明了Block的不同状态或不同版本。

命名约定的模式如下：

.block {}.block____element {}.block??modifier {}

 

它们中使用两个下划线或者两个破折号只是为了同其他的命名规范区别开，避免相互影响。它们之间的符号是可以更换的，没有强制约定。

下面我们来看一个例子，看看BEM是如何让元素之间建立起联系的：

.car {} //  创建了一个car block.car____tire {} //car里面有组成元素（后代元素）  tire.car??china {} //car有一个china造 的形态.car??china____tire {}  //既然car有tire组成元素，那china car当然也有tire噢.car____tire??new  //car里的tire 有new(old)的状态

 

代码理解：汽车是一个block，汽车有一个组成部分就是轮胎，有的汽车是中国制造，中国制造的车也是有轮胎的，汽车轮胎是新的。

BEM同样能将这样的信息传递同你合作，或者维护你的代码的人。尽力在团队里建立起这样的命名规范，将使你和团队的代码都更加健壮，更易维护。

但BEM并不是任何地方都能使用的，比如下面这种情况：

.underline {  text-decoration:  underline;  }.caps {  text-transform:uppercase;  }  

 

这些仅仅是一条单独的样式，并不需要使用BEM格式的命名。

再看看下面这段存在于网站header块内的logo的代码：

.site-logo{ … } 

 

用BEM格式写作：

.header{}.header__logo{} 

 

虽然logo确实是在header内，但作为一个希望被复用的block，logo也可能出现在footer，side里面，所以并不一定总是存在header中，故不该使用BEM。正确辨别BEM的使用场景尤为重要。

Personal summary about BEM: "The class attribute is a detailed description of the tag", and the meaning is clear and easy to use. "Speaking" classes make style code semantic, easier to maintain, and improve reusability. However, to use BEM well requires continuous accumulation and thinking to make the use of BEM naming tags accurate. nice one!

Summary

It has been almost a year since I started on the front-end road, and I am mainly responsible for the page part of the team. I hang out in various front-end groups every day, and most of the time people are discussing js issues. As a page guy, I can't help but complain about CSS. A year ago, it was the cool web animations on codepen that led me down this path. CSS, as a language that fully serves content presentation, should be taken seriously. The new features that CSS is constantly supporting make the web amaze users again and again. Preprocessors such as Sass and Less also make CSS even more powerful. High performance and diverse animation effects play an irreplaceable role in improving user experience. I like writing CSS code. I will continue to learn CSS in the future and strive to write elegant CSS code! Cool web special effects~!

I have a special liking for page special effects, CSS3 transitions, animations, and D3 data visualization. Animation has always inspired me to explore ~ ​​Thank you to De, who has always guided me.

Finally, to quote the author of "CSS Framework Myths" on the MOOC: "There is no semantic CSS, only semantic html and its expression."