CSS || 功能分类

xuhong 发布于2019-08-29 12:13 / 2123人阅读

摘要：组件的外观可以通用，但是位置却不能。总结出现上述问题的愿意一个承担的样式太多。在使用等简写属性时，注意其中关于位置和布局的样式等布局和位置由多带带的布局类或多带带容器元素构成。降低现有类名冲突使用规则进行命名。

CSS模块化规则

CSS模块的设计原则：

可重用

可维护

可扩展

1 常见的问题 1.1 基于父组件直接修改样式

.widget {  
  background: yellow;  
  border: 1px solid black;  
  color: black;  
  width: 50%;  
}  
 
#sidebar .widget {  
  width: 200px;  
}  
 
body.homepage .widget {  
  background: white;  
}

应用其余编程语言中类的概念，直接修改父组件的样式相当于修改类的定义，违反了开/闭原则：对扩展开放；对修改闭合

1.2 使用复杂的选择器

#main-nav ul li ul li div { }  
#content article h1:first-child { }  
#sidebar > div > h3 + p { }

依靠选择器与HTML元素标签组合，HTML代码很干净，但是CSS却变得凌乱，并且增加了CSS与HTML结构的耦合

1.3 一个CSS选择器做的事情太多

.widget {  
  position: absolute;  
  top: 20px;  
  left: 20px;  
  background-color: red;  
  font-size: 1.5em;  
  text-transform: uppercase;  
}

.widget选择器同时设置了组件的位置、外观。组件的外观可以通用，但是位置却不能。

1.4 总结

出现上述问题的愿意：一个class承担的样式太多。

项目的整体复杂度是一定的，但各个模块的复杂度不同。

使用复杂的选择器、一个class承担许多功能，可以简化开发的流程；但是维护与重用却很麻烦

模块划分会增加CSS开发的复杂度，但是却同时降低CSS维护与重用的麻烦

2 取舍

CSS中尽可能少的包含HTML结构：少使用嵌套层次深的选择器；

CSS只定义模块外观样式，在HTML页面上进行调用：更少的CSS被更多的HTML结构调用

对于抽象的样式可以定义在容器中

3 推荐 3.1 专注

使用类选择器定义元素样式，将class应用在元素上即可；不要写嵌套深的CSS选择器

/* Grenade */ 
#main-nav ul li ul { }  
 
/* Sniper Rifle */ 
.subnav { }

3.2 模块化

一个组织结构良好的组件层可以解决HTML与CSS的耦合关系。CSS定义组件的外观，不定义位置和布局。在使用background、font等简写属性时，注意其中关于位置和布局的样式（background-position等）

布局和位置由多带带的布局类或多带带容器元素构成。

3.3 命名空间与修饰符

对组件每个子元素都使用命名空间，每个元素在不同语境使用修饰符扩展。降低现有类名冲突

使用BEM（Block__Element--Modifier）规则进行命名。

.btn
.btn__item
.btn__item--info
.btn__item--danger

3.4 将CSS组织成逻辑结构

在《SMACSS》中提到，CSS可以被分成4中不同的类：基础base、布局layout、模块modules和状态state

基础base：包括复位原则和元素的初始值；

布局layout：对整个站点内元素进行定位（类似网格系统）

模块modules：可重用的视觉元素

状态state：不同状态触发的样式（通过JavaScript实现开启和关闭）

3.5 根据样式与风格使用类名

在Web前端中，class类名的作用有四种：HTML样式、JavaScript的hook、功能检测和自动化测试

为区别不同功能的class，建议为其增加前缀：js-用于JavaScript操作

GPU云服务器云服务器索引分类网络分类网站分类无限分类

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111756.html

css 命名分类排序方法

摘要：功能类和皮肤类样式为表现化的样式，请不要滥用以上顺序可以按需求适当调整。 CSS内部的分类及其顺序1、重置（reset）和默认（base）（tags）：消除默认样式和浏览器差异，并设置部分标签的初始样式，以减少后面的重复劳动！你可以根据你的网站需求设置！统一处理：建议在这个位置统一调用背景图（这里指多个布局或模块或元件共用的图）和清除浮动（这里指通用性较高的布局、模块、元件内的清除）等...

saucxs 2019-08-29 12:32 评论0 收藏0
思考 CSS 架构

摘要：思考一个好的架构一个好的架构是具有良好的可扩展性。定义手风琴的展开或收起，链接的有效或无效，元素的隐藏或显示。的命名规范命名组件的方式是非常流行特别有帮助的规范。目前该领域最丰富的思想领袖之一。你有没有在一个逐渐膨胀的 CSS 项目中感到混乱呢？保持样式风格统一和 HTML 的影响是比较困难的：尽管修改一个较小的问题，都可能创建更多丑陋的 hack，也可能 CSS 的小改变会影响 J...

yvonne 2019-08-30 13:12 评论0 收藏0
动态数据的表格页面展示

摘要：而由于没有后端的数据支持，所有的数据都在表格中展示，所以需要将表格中的数据转为数据，再通过读取，然后用模板引擎渲染到页面上。 showImg(https://segmentfault.com/img/bV3N8M?w=1574&h=692);如图所示，是一个动态的表格，内容数量不定第一层分类是专业大类的分类，第二层分类的国家的分类，第三层分类是具体专业名的分类（就是不同的色块栏），甚至...

joywek 2019-08-30 13:57 评论0 收藏0
动态数据的表格页面展示

摘要：而由于没有后端的数据支持，所有的数据都在表格中展示，所以需要将表格中的数据转为数据，再通过读取，然后用模板引擎渲染到页面上。 showImg(https://segmentfault.com/img/bV3N8M?w=1574&h=692);如图所示，是一个动态的表格，内容数量不定第一层分类是专业大类的分类，第二层分类的国家的分类，第三层分类是具体专业名的分类（就是不同的色块栏），甚至...

selfimpr 2019-08-26 11:42 评论0 收藏0