[深圳|结业弟子]JS-叶泽彪|2018年06月28日的日报-技能树.IT修真院

发表于： 2018-06-28 21:15:45

1 656

一、今天完成的事情：

完成任务13版本选择与投票两个页面

二、明天计划的事情：

完成任务13

三、遇到的问题：

不太懂对CSS进行架构具体该怎么做，目前我所理解的对css架构就是css样式重置，建立通用样式库，使用有逻辑的命名空间，避免css样式承担过多等。其中不太理解避免css样式承担过多的说法，其指的主要是避免承担诸如定位、大小等样式。“最好的方法是CSS中尽可能少的包含HTML架构。CSS则是应该定义元素的视觉效果，无论该视觉元素在哪里。如果有一些特定的组件需要在不同的场合显示不同的效果，那么应该赋予不同的名称。”尽可能少的包含HTML架构是什么意思呢？如果让CSS主要定义元素的视觉效果的话，那定位、大小这些样式就需结合自己建立的样式库，将类嵌入html中来，不知道是否是这个意思。

文章出处：CSS架构

四、收获：

了解了下如何进行网站css架构。

1.良好的CSS架构的目标

可预测：可预测意味着可以像预期的那样规范自己的行为。当你添加或者修改某个规则时，它并不会影响到没有指定的部分。对于一个小网站来说，一些微乎其微的改变并不算什么。而对于拥有成千上万个页面的大网站来说，可预测却是必须的。

可重用：CSS规则应具备抽象和解耦性，这样你就可以在现有的基础上快速构建新的组件，无需重新修改编码模式。

可维护：当把新组件放置到网站上，并且执行添加、修改或者重新设计操作时，无需重构现有CSS，并且新添加的X并不会打破原有页面的Y组件。

可扩展：当网站发展到一定规模后，都需要进行维护和扩展。可扩展的CSS意味着网站的CSS架构可以由个人或者团队轻易地管理，无需花费太多的学习成本。

2.常见的错误实践

基于父组件来修改组件

.widget {  

  background: yellow;  

  border: 1px solid black;  

  color: black;  

  width: 50%;  

}

#sidebar .widget {  

  width: 200px;  

}

body.homepage .widget {  

  background: white;  

}

过于复杂的选择器

依靠HTML标签和组合器可以保持HTML代码干干净净，但却让CSS更加毛重和凌乱。

#main-nav ul li ul li div { }  

#content article h1:first-child { }  

#sidebar > div > h3 + p { }

过于通用的类名

在一些大型项目上，像.title这样的名称很有可能会被用在另外一个页面或者本身。如果这样的情况发生，那么整个标题部分明显会和预期的不一样。

过于通用的类选择器名称会导致许多不可预测的CSS样式发生。

.widget {}  

.widget .title {}  

.widget .contents {}  

.widget .action {}

一个规则做太多事

你需要在网站的其他区域使用该组件，那么上面的这个代码明显是错误的，不可重用的。

问题的关键是你让.widget这个选择器做的事情太多，不仅对该组件的位置进行了规定，还对它的外观和感觉方面进行了样式。外观和感觉可以通用，而位置是不可以的

.widget {  

  position: absolute;  

  top: 20px;  

  left: 20px;  

  background-color: red;  

  font-size: 1.5em;  

  text-transform: uppercase;  

}

3.最佳实践

专注

/* Grenade */ 

#main-nav ul li ul { }  

/* Sniper Rifle */ 

.subnav { }

模块化

一般而言，CSS要定义的应该是组件的外观，而不是布局或者位置。同样在使用background、color和font这些属性时也要遵循原则使用。

布局和位置应当由一个单独的布局类或者单独的容器元素构成（请记住，有效地把内容与展示进行分离其实就是把内容与容器进行分离）。

给类进行命名空间

CSS
1
2
3
4
5
6
7
/* High risk of style cross-contamination */ 
.widget { }  
.widget .title { }  
 
/* Low risk of style cross-contamination */ 
.widget { }  
.widget-title { }

创建修饰符类来扩展组件

CSS
1
2
3
4
5
6
7
/* Bad */ 
.widget { }  
#sidebar .widget { }  
 
/* Good */ 
.widget { }  
.widget-sidebar { }

把CSS组织成逻辑结构

CSS可以被分成四个不同的类：基础（base）、布局（layout）、模块（modules）和状态（state）。基础包括了复位原则和元素缺省值；布局是对站点范围内的元素进行定位以及像网格系统那样作为一种通用布局助手；模块即是可重用的视觉元素；状态即指样式，可以通过JavaScript进行开启或关闭。

有逻辑的命名类

CSS
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
/* Templates Rules (using Sass placeholders) */ 
%template-name  
 
%template-name--modifier-name  
 
%template-name__sub-object  
 
%template-name__sub-object--modifier-name  
 
 
/* Component Rules */ 
.component-name  
.component-name--modifier-name  
.component-name__sub-object  
.component-name__sub-object--modifier-name  
 
/* Layout Rules */ 
.l-layout-method  
.grid  
 
/* State Rules */ 
.is-state-type  
 
/* Non-styled JavaScript Hooks */ 
.js-action-name