发表于： 2020-04-10 09:05:27
1 1338
今日完成
学习三个不同的命名规则
BEM、OOCSS、 SMACSS
小demo 仿ios滑动按钮
明日计划
构思如何用SMACSS命名拆分样式表
BEM、OOCSS、SMACSS
- BEM (Block,Element,Modifier)
Block是页面中独立存在的区块，可在不同场合下被重用
Element是构成Block的元素，只有在对应Block内部才具有意义，依赖于Block
Modifier是描述Block或Element的属性或状态。同一Block或Element可以有多个Modifier
Block与Element用__(两个下划线)隔开，不同的Modifier用--（两个dash）隔开 一个-表示这个class不依赖于任何Block或Element
- OOCSS (Object Oriented css )
面向对象css
一个object包含四个部分
- HTML ，会有一个到多个的 DOM 节点
- CSS , 用来表示上述节点的样式， 这些样式都会以最外面的包裹层 Node 的 class Name 开始
- 背景图片、或者其他的一些用来展示的资源组成的组件
- Javascript 的事件，行为等。
尽量不使用依赖节点位置结构的样式定义
创建OOCSS的关键部分
- 创建一个组件库
- 独立的容器和内容，避免样式依赖位置
- 独立结构样式
- 使用类名为拓展基本对象
- 坚持语义类来命名类名
优点
- 减少css代码
- 有干净的html标记，有语义的类名，逻辑强的层次关系
- 语义标记，有助于SEO（Search Engine friendly 优化)
- 更好的页面优化，更快加载时间
- 可拓展的标记和css样式，有更多组件可以放到库中，而不影响其他的组件
- 能轻松构造新的页面布局，或创造新的页面风格
缺点
- 适合大型网站开发，因为重用性组件特别多，小项目可能不见成效。
- 如果没有巧妙使用会适得其反
- 最好给每一个组件备写一份说明文档，以便调用和维护
- SMACSS （Scalable and Modular Architure for css）
可拓展模块化结构
规范
- Categorizing CSS Rules (为css分类)
- Naming Rules (命名规范)
- Minimizing the Depth of Applicavility (最小化适配深度)
Categorizing Css Rules (核心)
- Base 基本规则，整体默认样式 如body，input，button,form
- Layout 布局规则 如 顶部，页脚，边框，模块的大小等
- Module 可复用的模块化样式规则
- State 状态样式 如 隐藏 当前高亮
- Theme or Skin 主题 控制整体UI
Namong Rules
- Layout Rules 用l-或layout- 如 .l-header .l-sidbar
- Module Rules 用模块本身的命名 如图文排版.media .media-image
- State Rules 用is 如 .is-active .is-hidden
- Theme Rules 如果作为单独class用theme- 如.theme-a-background .theme-a-shadow
目标
减少代码量，简化代码维护
仿ios开关按钮
学习通过：root定义全局变数
通过var（）进行调用
使用cale（）进行计算
媒体@media(prefers-color-scheme:dark)检测暗色模式进行切换
css
:root {
/* 按钮宽度 */
--button-width: 400px;
/* 按钮高度 */
--button-height: 200px;
/* 内圆直径 */
--toggle-diameter: 160px;
/* 内圆与外边距离 */
--button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter))/2);
/* 阴影大小 */
--toggle-shadow-offset: 10px;
/* activ下内圆宽度 */
--toggle-width: 200px;
/* 灰色 */
--color-grey: #e9e9e9;
/* 深灰色 */
--color-dark-grey: #393930;
/* 绿色 */
--color-green: #30d158;
}
div {
position: absolute;
top: 50%;
left: 50%;
width: var(--button-width);
height: var(--button-height);
background-color: var(--color-grey);
transform: translate(-50%, -50%);
border-radius: calc(var(--button-height)/2);
transition: all 0.3s ease-in-out;
}
div::after {
content: '';
display: block;
position: absolute;
top: var(--button-toggle-offset);
left: var(--button-toggle-offset);
width: var(--toggle-diameter);
height: var(--toggle-diameter);
background-color: #fff;
border-radius: calc(var(--toggle-diameter)/2);
box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset)*4) rgba(0, 0, 0, .1);
transition: all 0.3s ease-in-out;
}
#toggle:checked+div {
background-color: var(--color-green);
}
#toggle:checked+div::after {
left: calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset));
/* 阴影相反 */
box-shadow: calc(var(--toggle-shadow-offset)*-1) 0 calc(var(--toggle-shadow-offset)*4) rgba(0, 0, 0, .1);
}
#toggle:active+div::after {
width: var(--toggle-width);
}
#toggle:checked:active+div::after {
left: calc(var(--button-width) - var(--toggle-width) - var(--button-toggle-offset))
}
/* 暗色模式检测 */
@media(prefers-color-scheme:dark) {
body {
background-color: #1c1c1e;
}
div {
background-color: var(--color-dark-grey);
}
}
html
<label>
<input type="checkbox" id="toggle">
<div></div>
</label>
收获
学习了解并使用:root、var()、calc()
了解OOCSS、SMACSS、BEM基础知识
返回列表
评论