Let's talk about the overall architecture design of front-end css: (2) Those things about base basic classes_html/css_WEB-ITnose

I wrote my first blog post in the lab on Monday afternoon, and a few people supported it, so we have to continue. Then I feel that the content I am writing now is more about talking about my understanding of the front-end CSS architecture and a small summary of the front-end experience, so I deleted the original [Project Summary] in the title. But this does not mean that future articles will not mention this half-dead e-commerce website in my hand. I have to continue to mention it, otherwise why would I use it to shame myself~~

　[Review the previous article ]

In the previous article, I mainly focused on the front-end structure of a project I recently wrote, and started to introduce some knowledge or experience of the front-end structure.

Why front-end css also has a structure, why should we consider the structure of css, and how to implement a simple structure of css. These issues are all mentioned in the first article. If you want to know more, please read the previous article by yourself.

Last time, when the whole project was about to be completed, I felt that my front-end css code did have problems such as low reuse and irregular naming. Then I read a book at the end of April and was enlightened and found myself The architectural approach that has been adopted is not very good. My previous projects, including the front-end of this e-commerce website, were mostly completed by myself, and they did the back-end by themselves. I only need to take good care of my front-end, give them up pages on time, and then bind the data and it will be ok. Sometimes I can at most help write some distributed views or strong typing in the interface. Because almost all of the code is handwritten by myself, I am more casual on the front end and write it in a way that I am more accustomed to. In terms of CSS layout, I tend to mix the functional division method and the regional division method. To put it simply, my css code has abstract classes for header and footer, as well as abstract classes for button and font, and then it is specific to each Each interface has a customized css file waiting for it.

This method has its advantages, that is, development is fast, and you don’t need to think too much. You can just analyze the interface, extract the recurring modules, and then specify a writing method. However, this method is only suitable for small websites with relatively few pages and css files. If you encounter large websites, such as shopping websites, forums, etc., the shortcomings of this method are exposed: css files Too many, css files are prone to conflict, module reusability is not high, etc.

Therefore, when I saw the front-end architecture method summarized by Daniel, I felt bad.

　[To summarize before starting this blog]

I talked about another front-end CSS architecture method before: dividing according to functions. All css files are classified according to their role in the front-end layout of the project, and can be divided into:

CSS front-end structure----divided by function tr>

Class name

Main role in front-end layout

Other instructions

base (base class)

CSS前端结构----按照职能划分

类名	在前端布局中的主要作用	其他说明
base(基础类)	主要负责重置浏览器默认样式和提供原子级别的样式服务，主要以font、margin、height、width等为主； 作用范围是本网站内的所有界面	base.css文件一般不需维护， 但要保证其可靠性
common(普通类)	在base类的基础上，将整个网站的模块进行抽象化，实现代码高度复用；会在网站内经常出现	common中模块根据实际使用 可能有差异，可配合原子类进行使用
page(页面类)	利用base中的原子类服务针对特定界面提供css ui，提供页面级别服务，作用范围最小	尽量避免团队开发page.css中样式 冲突的问题

Mainly responsible for resetting the browser's default style and providing atomic-level style services, mainly font, margin, height, width, etc.; The scope of this website is all Interface

base.css file generally does not require maintenance, but its reliability must be ensured

common (common class)

Based on the base class, the modules of the entire website are abstracted to achieve a high degree of code reuse; it will be frequently used in the website Appear

The modules in common may differ according to actual use , and can be used with atomic classes

page (page class)

Use the atomic class service in base to provide css ui for a specific interface and provide page-level services with the smallest scope

Try to avoid teams Develop the problem of conflicting styles in page.css

The functional scope of each layer can be understood as: Pyramid.

So, as mentioned in the table above, and I also mentioned it in my previous blog:

For a team or a developer, it has its own fixed The commonly used base.css. Because the obvious characteristic of the base layer is a high degree of reuse, which we can also see from the role of base in the front-end layout. Next, let’s break down the two functions of base.

--------------------------I am a dividing line------------ ------------------------Why is it so long------------------------ -----------

　[1. Reset browser default style]

Why do you need to reset? Answer: Because the default is ugly.

I believe many comrades have used the simplest method to reset the browser's default style:

The 2px margin and padding value added by the browser by default for all pages is removed, because everyone does not like to have their page embedded in the browser, and then there is still a white border...

This It is the simplest code to reset the browser's default style, and most people actually use it. But recently I saw a blog talking about the * selector. Many f2e think that the * selector is too broad. It selects all tags by default, so it will be compatible with old tags during the browser rendering process, such as < ;dir>426be984ffbbb815d7d88e3543a85d91 and so on, so it may affect the efficiency during the browser's DOM tree generation process ---------- Well, my own opinion about this statement is that it doesn't matter, I like to use * There are too many {}, including all my own reset classes, and I think the browser efficiency lag caused by the * character mentioned in that blog can be almost ignored. It’s a good dish. I won’t eat it because a chopped green onion inside doesn’t look good (cough cough cough, please call me rotten as a metaphor for wetness)

After talking about the simplest code to reset the browser, many people may be saying: This is it. That's enough. *{margin:0px;padding:0px} has canceled my least favorite browser style. I don't need to write anything else. But in fact, the layout bug caused by the browser's default style is also called layout ugliness. There are many more points:

The img box, the default list style of the li tag, the default top and bottom margins in the table and the painful 2px gap between columns...

There are also The h tag is bolded by default. If I remember correctly, it is similar to font-weight:600: In today's flat and large pictures flying all over the page, h tag bolding is indeed rarely used;

So many times, in order for us to better transform these tags in the future, and to save the amount of code later, we usually write all the browser reset defaults in the base.css class. I seem to have mentioned it in the previous article. I personally recommend using yui's reset.css. It is really useful. There is no right or wrong answer for this reset file, only good or bad. As long as What is suitable for your own development and can help you reduce the workload is the easy-to-use reset.css. Dear readers, you can customize it according to your own needs, don't use it blindly. (PS: What if you meet a Party A who likes the page with margin, hahahaha..._(:з　∠)_)

Recommend a website87711ec2b1498239921f43ec914941c5http://www.cssreset.com/5db79b134e9f6b82c0b36e0489ee08ed, a foreign CSS site, provides many commonly used reset files, ctrl c & ctrl v services, a development tool ~~Website screenshot: ↓↓

　

Attached here is the more commonly used Yui reset.css code. The reset of the h tag is really satisfying~(???)/~ Thank you

　

 1 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} 2 table{border-collapse:collapse;border-spacing:0;} 3 fieldset,img{border:0;} 4 address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} 5 li{list-style:none;}caption,th{text-align:left;} 6 h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 7 q:before,q:after{content:'';} 8 abbr,acronym {border:0;font-variant:normal;} 9 sup {vertical-align:text-top;}10 sub {vertical-align:text-bottom;}11 input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}12 legend{color:#000;}

　

--------------I am also a dividing line -------------------------------------------------- --------I'm so long------------------------

　

[2. Design and implementation of atomic class functions]

After talking about the browser default style reset, let’s talk about another function of the base layer css code: providing atomic level style services .

Speaking of which, those who have read the previous article may understand what it means. Those who have not read it, you will understand after reading it = , =

Ahem, because what we are discussing now is based on Function-divided CSS architecture, so the base layer, as the most basic CSS architecture layer, needs to do its best for page layout. In addition to silently resetting the browser default, it should also provide the upper two layers with as much convenience as possible during layout. Classes, such as height class and width class, through the combination of these atomic classes, the simplest "building blocks" of the page can be realized without relying on the common class and page class... 　

Many students may Question: Are you saying that the base layer file does not involve the browser UI style and can be applied to the design of any website? Then what is the atomic class of your browser?

What’s there? This depends on your actual website usage. Here is a small chestnut in the css file of the e-commerce website I made: ↓↓↓

（请自动忽视上面w960里面写的width:1024px= 。 =，以及每个.w类里面的height:inherit）

 

　　一开始没觉得，后来开始写的时候，我真是越发的为自己点赞，就说.w960和.clear30，这两个类在我所有界面里面出现了100+次，要是我当时没有这么写而是给每一个div都需要定个类名，再给它写在page.css里，相信css代码量最少多写200行...而且万一，万一碰到甲方说“你们这个界面切糕区太窄了，再大点儿，我们就喜欢大的！”...然后你没用原子类，然后就熬夜挨个文件改吧....

　　所以从我上面晒出来的代码里，应该最起码能总结出来：高度和宽度可以抽象出原子类，在实际使用时候：↓（举段例子）

　　

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <style type="text/css"> 6     /*宽度 原子类*/ 7     .w100{width:100px;} 8     .w200{width:200px;} 9     .w300{width:300px;}10     .w{width:100%;}11     .win{width:inherit;}12     /*高度 原子类*/13     .h50{height:50px;}14     .h100{height:100px;}15     .h200{height:200px;}16     .h300{height:200px;}17     .h{height:100%;}18     .hin{height:inherit;}19     /*定位 原子类*/20     .bc{margin-left:auto;margin-right:auto;}/*就是块状元素居中*/21 </style>22 </head>23 24 <body>25     <!--使用距离-->26     <div class="w h300 bc">27         <div class="w300 h100 bc">28         </div>29     </div>30     31 </body>32 </html>

 

　　从上面这个我随便写了一个类的代码，相信同志们应该彻底明白原子类都是什么，原子类的应该怎么用了。

　　就是通过简单的原子类的组合就可以直接实现界面初步布局，并且宽度啊、高度这些原子类的数值根据自己使用来定，一般常用的也就是100,200,300~1200左右，有的用不上的就不用加在里面了，千万别.w1,.w2,.w3.....w999,w1000,.w1001,当你想这么干的时候，喝口水冷静一下。

　　很多人都说你这个原子类可真简单啊，一个样式里面就一条，你上面.w930{width:930px;height:inherit;}，你这时候怎么不写height默认继承父元素了呢？

　　解释一下哈，我上面那么写的原因：1.因为当时脑袋抽了2.后来发现还是有一定道理的，因为我们那个电商网站是个伪全屏，就是上面的导航栏、背景是默认全屏的，但是中间的Mainpart部分其实是有最大宽度限制的，而我的.w930这些宽度原子类，一般是用在mainpart里的，一般一个界面模块就用一个.w960限制一下，直接搞定，而且高度默认继承这个模块的高度~~而且，如果想要覆盖的话，只在标签的class中这么写就可以了：class="w960 h500"，就很容易的被覆盖掉了，不影响页面布局的说。

　　为什么这时候举例子时我每个原子类只写一条呢？因为原子类，原子类啊，提供的就是最小级别的布局服务，你提供那么多，还能叫原子类了么，有违我们的设计初衷啊。要是原子类很赘余冗长的话，那还能叫原子类了么，又变成我们自己定义的一个乱七八糟的类了，而且赘余冗长的话对base.css的通用性来讲，就是啪啪啪打脸啊

　　

　　

　　咳咳，看完我写的几个原子类后，想必大家可能有一下的想法：

　　　　1.你写的就是这么几个类啊，这个我在我的代码里也写呢

　　　　　答：写出来不等于能用出来呦，只有将原子类的功能集中在base.css里才能发挥其最大作用。我们的目标是：不写一行多余代码！

　　　　2.少年啊，你这种原子类的做法，会让一个标签的类名很长啊

　　　　　答：长就长呗，看不惯你来咬我啊。咳咳，说笑，对于这种类名组合导致类名过长的问题，我想好好解释一下。

　　　　下面有这样一个样式，大家来一起实现一下：

　　　　最简单的代码：

　　　　　　

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 </head> 6 <body> 7     <p style="font-size:20px;color:red;margin-top:10px">我喜欢吃卤肉饭</p> 8     <p style="font-size:20px;color:blue;margin-top:20px;margin-left:10px;">天要下雨</p> 9     <p style="font-size:14px;color:red;margin-top:10px;margin-left:10px;">明天不放假</p>10 </body>11 </html>

 　　嗯，看上去已经实现功能了，但是作为一个有理想有抱负的前端，怎么能容许css代码与html代码搅在一起呢，必须分开啊！

　    好吧，看来我们只能这么干了，即把样式抽离成三个类，然后给p赋类吧：↓

　　

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <!--这里为了更方便的展示，就不抽离成css文件了--> 6 <style stype="text/css"> 7     .p1{font-size:20px;color:red;margin-top:10px;} 8     .p2{font-size:20px;color:blue;margin-top:20px;margin-left:10px;} 9     .p3{font-size:14px;color:red;margin-top:10px;margin-left:10px;}10 </style>11 </head>12 <body>13     <p class="p1">我喜欢吃卤肉饭</p>14     <p class="p2">天要下雨</p>15     <p class="p3">明天不放假</p>16 </body>17 </html>

　　但是感觉好长啊，.p1,.p2,.p3的css中确实有很多相同的，而且这里面还没有设置color、border、padding等其他属性，相信设置之后重复部分会更多，所以我们试着简化一下= = 但是好像发现没办法简化，因为任意两个类里面都没有两个一模一样的属性，所以再抽离出一个新类都不太可能了，就算抽离出来，那怎么理解这些类的语意呢？

　　所以，那怎么破呢？

　　用原子类啊！看我的↓

　　

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--这里为了更方便的展示，就不抽离成css文件了--><style stype="text/css">    .f14{font-size:14px;}    .f20{font-size:20px;}    .cred{color:red;}    .cblu{color:blue;}        .mt10{margin-top:10px;}    .mt20{margin-top:20px;}    .ml10{margin-left:10px;}</style></head><body>    <p class="f20 cred mt10">我喜欢吃卤肉饭</p>    <p class="f20 cblu mt20 ml10">天要下雨</p>    <p class="f20 cred mt10 ml10">明天不放假</p></body></html>

　　当然这里举的例子比较极端，因为确实每两个标签都没有重复的样式，所以因此导致原子类使用过多。（不要因为这个开始吐槽，下面有解释）

　　在一个成型网站里，p、h等标签都会有大致统一的样式，比如都不加粗、颜色都是#000,上下边距都是多少，这时候将他们抽离成一个常用组件置于common类里，再配合上原子类，1.类名使用肯定会减少，但是绝对比一个要多2.根据组件进行订制，不影响各界面布局3.快速开发，当编辑器带提示功能的时候简直神速了

　　前两种方式大家可以看出来，类名很简洁，但是代码比较冗长；最后一种方法（请自动无视我设置的蛋疼样例），类名组合比较长，但是css代码非常简单。

　　很多图省事的同学可能觉得第一种或者第二种比较好，但是我们要考虑的是，当页面非常多的时候，你不可能为每一次出现的这种样式的标签加一个类，再者现在让你吧一个h3标签也变成这个样式，然后你的类名怎么加，在684271ed9684bde649abda8831d4d355里加上168026b3cdbebe51b6ee204921be54d3？不觉的而很怪吗= =

　　而类名比较长的时候，但是我开发快啊！哪怕因为类名比较长导致html代码看起来不太轻盈，但是因为使用这种方式给维护、重构带来了切实的方便。而且这种利用原子类进行布局更适合于团队开发，再强调一下啊，我们是靠谱前端，我们不能拿一个单页面网页和一个人的前端团队来说事儿啊。不用原子类，一个P标签的样式可能小A程序员已经写过很多次了，同时跟他一起开发的小B同学不知道啊，他在他的代码里也得自己写好多遍，连个复制粘贴的机会都不给。而利用原子类进行布局的话，每个人只需要提前了解好自己团队本次项目的base和common说明文档，按照规则独立开发，而且进行页面合并时不用担心冲突，毕竟本是同根生嘛。

　　关于类名使用的问题，以后会开文章接着说，忘了的话记得提醒我，大家一起交流一下开发经验吧。

　　最后up一下推荐的原子类模式，就简写了，大家用心领会...= =

 1 /* 2         下面是我设计的几个简要的原子类，因为篇幅原因就不写全了，大家根据需要自行补上就可以了 3         下面的代码主要是简介一下原子类都可以有哪些 4     */ 5     /*文字*/ 6     .f12{font-size:12px;} 7     .f14{font-size:14px;} 8     .t2{text-indent:2em;} 9     .t4{text-indent:4em;}10     /*宽度类*/11     .w{width:100%;}12     .win{width:inherit;}13     .w10{width:10px;}14     /*高度类,与宽度相似*/15     .h10{height:10px;}16     /*定位类*/17     .bc{margin:0px;margin:0px;}18     .fl{float:left;}19     .vm{vertical-align:central;}20     .block{display:block;}21     .none{display:none;}22     .clear{clear:both;}23     /*边距类*/24     .m10{margin:10px;}25     .mt10{margin-top:10px;}26     .ml10{margin-left:10px;}27     /*填充类,与边距相似*/28     .p10{padding:10px;}29     /*当然，当你一个网站设计图确定之后，你可添加一些颜色基础类，但是这个可就不适用所有网站了*/30     .cred{color:#F00;}31     /*其他常见的还有border边框类、boxshadow类、lineheight行高类....*/

 　　当然，大家看完blog之后可能觉得这种架构方式很简单，但是要真正使用起来应该是另一种感受了，所以我推荐看完的或者说有感受的可以在下一个自己手头的网站里尝试一下子，反正又不会怀孕~~同样，那些觉得我说的狗屁不是的同志们，也可以考虑尝试一下，然后我们边用边改进。我也只是个学生，还在学习中，大家互相进步吧。

 

　　最后说一下，前几天有人看完Blog之后跟我说，写个css你还考虑这么多，累不累啊，直接写不就完了?

　　我想说的是，请叫我靠谱前端。

 

　　　　　　　　　　　　　　　　

 

　　就说这么多吧，下一篇我们common层见，预计几天后发，最近有点写累了，学校事情也好多。

　　么么哒，各位安！