Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSS命名及书写规范
Search
hugo
October 12, 2014
Programming
0
640
CSS命名及书写规范
CSS命名及书写规范
hugo
October 12, 2014
Tweet
Share
More Decks by hugo
See All by hugo
移动端性能调优及16ms优化
baofen14787
1
2.2k
html5 新技术
baofen14787
3
170
html5 新技术 2
baofen14787
1
130
html5 新技术 3
baofen14787
1
94
Other Decks in Programming
See All in Programming
受託開発でGitLab CI を活用していく
xiombatsg
1
130
もうすぐ新年度、Babylon.jsがお勧めな3個の理由
hideg
0
170
Open Source Swiftc Workshop
kitasuke
1
290
TDDと今まで
kanayannet
0
140
OpenAPI を守るのは難しい
ohmori_yusuke
2
150
incrementalモデルの理解を深める
ikkimiyazaki
2
640
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
オブジェクト指向のリ・オリエンテーション~歴史を振り返り、AI時代に向きなおる~
hanyudaeiiti
2
270
Some Quick Ideas To Improve Your Tests ( #jassttokyo )
teyamagu
PRO
2
2.3k
とにかくHTTP3をライトニングに話す / Anyway, I'll talk to Lightning about HTTP3.
seike460
PRO
0
120
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
540
TCAの Shared Stateって どういう仕組みになってんの?
yimajo
0
330
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
242
20k
4 Signs Your Business is Dying
shpigford
174
21k
KATA
mclloyd
14
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
The Cost Of JavaScript in 2023
addyosmani
13
3.7k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
Design by the Numbers
sachag
274
18k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
Music & Morning Musume
bryan
39
5.5k
Automating Front-end Workflow
addyosmani
1353
200k
How to name files
jennybc
62
92k
Transcript
CSS命名及书写规范 宇果
⼤大纲 • CSS命名 • ⻚页⾯面层级
姓⽒氏命名法
在⼦子孙模块数量可预测的情况下,继承祖先模块的命名前缀
当⼦子孙模块数量较多,且⽆无法预估时,可以选择采⽤用继承“祖先+⽗父”模块的命名前缀,! 以保证模块之间的独⽴立性
⼦子模块中,可以嵌套其他模块,可理解为“娶了媳妇、嫁了郎”
公共模块和独⽴立模块 • 同⼀一个⻚页⾯面出现2次以上同⼀一个类名 • 2个以上的⻚页⾯面出现同⼀一个类名 1、全站公共模块以“mod-”开头 2、频道及⻚页⾯面公共模块以“xx-mod-”开头,(xx为频道名或⻚页⾯面名缩写) 3、独⽴立模块,命名为⼀一个简短的单词,如“hot、floor、banner”等 如何区分公共模块与独⽴立模块
Q:为什么要⽤用这种⽅方式 • CSS以单层命名为主,嵌套⼀一般不会超过3层,提升CSS解析效率。 • 团队⻛风格统⼀一,可⾼高效的迭代、维护。同时不再担⼼心命名冲突、css是否可删等问 题。 • 减少命名烦恼,统⼀一继承模块组件命名,⼦子元素可⾃自由使⽤用常⽤用类名,如:xxx- name,xxx-item,xxx-cnt
⻚页⾯面层级
⻚页⾯面结构层 布局层 模块区域
⻚页⾯面结构层 ⼯工具条 c-toolbar 头部 c-header 主体内容 c-content 指引信息|快速⼊入⼝口 c-footer 版权
c-subfooter ⻚页⾯面结构层: 类名以频道或站点名称缩写开头
布局层 ⼀一列 gird-c1 两列 gird-c2a gird-c2b 三列 gird-c3a gird-c3b gird-c3c
布局层: 类名以gird开头 c1:1列,c2:2列,c3:3列 a:第1列,b:第2列,c:第3列
模块区域 说明: hd、ft不⼀一定存在,但存在其中⼀一个时, 必然要存在bd 模块基本结构
完!Thanks! “祖宗姓张,其⼦子孙都姓张”