登录免费注册



奇舞团前端工程化

首页  思维导图  详情



奇舞团前端工程化

2017-03-22 12:03:11   0  举报





仅支持查看

AI智能生成

奇舞团CSS前端工程化视频学习笔记

CSS

前端

模版推荐

作者其他创作

大纲/内容

命名原则

基于功能

它是用来干什么的

.button/.form/.list/.tab-list/.nav

优先使用

样式与内容无关

基于内容

元素里面放的是什么

.news/.user-info/.help/.contact-me

中小型网站可以给予内容去命名

基于视觉

看起来是什么样？

.round-image/.nowrap

大型网站可以基于视觉去命名

不要使用太具体的样式

现在比流行的命名方式

BEM

Block

.block

Element

.block__element

Modifier

.block__element--modifer

eg. tab__item--active

目的

提供一致、合理的开发基础

应对变化

提升效率

文件结构

css

basic

css reset

设置HTML标签的默认样式

使其在各个浏览器表现基本一致

让默认样式归零

normalize.css

设置HTML标签的默认样式

使其在各个浏览器表现基本一致

保留标签的默认样式

moudles

可复用的css代码段

与模块在HTML中的位置无关

（一般）与使用的HTML标签无关

抽取css模块原则

面向对象

结构和皮肤分离

.btn .btn--primary .btn--info .btn--danger

容器和内容分离

/* 不推荐这样写 */ .header .btn { background: #f66; color: #fff; }

这样就没有遵循与位置无关原则

单一职责

尽可能细的拆分成可独立复用的组件

通过组合方式使用多个组件

比如将布局和其它样式拆分

开闭原则

对扩展开放

对修改关闭

DRY

pages

 Collect

Get Started

工程化改造3.0

 Collect

Get Started

工程化相关用例

 Collect

Get Started

AI大模型应用工程化路线图

 Collect

Get Started

工程化--工作流













评论

0 条评论

下一页



图形选择

思维导图

主题

补充说明

AI生成





修改AI描述

去编辑

重新生成

提示 

关闭后当前内容将不会保存，是否继续？

取消

确定

Document