介绍
这期内容当中小编将会给大家带来有关怎么在CSS中利用方法实现模块化,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
<强>一、什么是CSS的方法
<代码> CSS的方法>
<强>二,常见的CSS方法
<强> 1,允许
<代码>面向对象的CSS代码> 允许>
(1)规则
1,不要使用ID用类
直接使用类来设定样式,这样写不只是可以增加语义,同時也降低CSS对html的依赖。
2,结构和样式分离
虽然早期html和CSS实现了结构和样式的分离,但CSS内部同样存在两种类型的样式:
<李> 结构样式(例如长宽,距离)
<李> 皮肤样式(例如颜色,阴影)
所以允许建议把这两种样式拆开。
比如有三种按钮,白色的/绿色的/红色的,可分别定义为:
类=癰tn btn-default"
类=癰tn btn-green"
类=癰tn btn-red" 如果你真的有很多个具有紫色按钮,则可以创建一个单独的紫色按钮类。这样可以大大减少CSS代码的数量。
<强> 3,容器和内容分离
内容绝不应该限制于特定的容器,为了重用,得分离开。
#,错误写法
.header .action {
}
.header .action .login {
}
.header .action .register {
}
#,正确写法
.header {
}
.action {
}
.login {
}
.register {
} 继承选择符是有用的,它可以减少因相同命名引发的样式冲突(常发生于多人协作开发)。但是,我们不应过度使用。
(2)利弊
好处:
<李> 模块化,可重用
<李> 减少代码重复
<李> 提高可拓展性、可维护性,可读性
缺点:
<李> 虽减少了深层的嵌套选择器,但是多了更多的类
<李> 如果代码中没有大量重复的视觉模式,比如一些小项目,则应用允许可能不切实际
(3)实例
引导就是用的允许。
例如:html
, & lt; div 类=& # 39;头# 39;比;
,,,,,,,& lt; ul 类=& # 39;菜单# 39;祝辞,
,,,,,,,,,,,& lt; li 类=& # 39;menu-item 活跃# 39;在1 & lt;/li>
,,,,,,,,,,,& lt; li 类=& # 39;菜单项的# 39;在2 & lt;/li>
,,,,,,,,,,,& lt; li 类=& # 39;菜单项的# 39;在3 & lt;/li>
,,,,,,,& lt;/ul>
,,,,,,,& lt; div 类=癮ction"比;
,,,,,,,,,,,& lt; button 类=癰tn btn-login"祝辞login
,,,,,,,,,,,& lt; button 类=癰tn btn-register"祝辞register
,,,,,,,& lt;/div>
,,,& lt;/div> css:
.header {
}
.menu {
}
.menu-item {
}
.item.active {
}
.action {
}
.btn {
}
.btn-login {
}
.btn-register {
} <强> 2,本
<代码>本——块元素Modfier(块元素编辑器)。诞生于2009年。
(1)内容
本包括三个:
<李> <代码> 块,块,如头
<李> <代码>元素——子元素,如块菜单下的项目
<李> <代码> Modfier>
(2)规则
1,命名规范
<李> <代码> - 中划线:仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号。
<李> <代码> __ 双下划线:用来连接块和块的子元素。
<李> <代码>,双中划线:用来描述一个块或者块的子元素的一种状态。
在某些公司(如腾讯)的规范里,双中划线被单下划线(<代码> _ )替代。
例如:<代码>。block-name__element——修饰符
演示- html:
& lt; div 类=& # 39;头# 39;比;
,,,,,,,& lt; ul 类=& # 39;header__menu& # 39;祝辞,
,,,,,,,,,,,& lt; li 类=& # 39;header__menu-item——活跃# 39;在1 & lt;/li>
,,,,,,,,,,,& lt; li 类=& # 39;header__menu-item& # 39;在2 & lt;/li>
,,,,,,,,,,,& lt; li 类=& # 39;header__menu-item& # 39;在3 & lt;/li>
,,,,,,,& lt;/ul>
,,,,,,,& lt; div 类=癶eader__action"比;
,,,,,,,,,,,& lt; button 类=癶eader__btn——login"祝辞login
