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
680
CSS命名及书写规范
CSS命名及书写规范
hugo
October 12, 2014
Tweet
Share
More Decks by hugo
See All by hugo
移动端性能调优及16ms优化
baofen14787
1
2.3k
html5 新技术
baofen14787
3
180
html5 新技术 2
baofen14787
1
140
html5 新技术 3
baofen14787
1
100
Other Decks in Programming
See All in Programming
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
130
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
サイトを作ったらNFCタグキーホルダーを爆速で作れ!
yuukis
0
480
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
130
STUNMESH-go: Wireguard NAT穿隧工具的源起與介紹
tjjh89017
0
380
画像コンペでのベースラインモデルの育て方
tattaka
3
1.8k
兎に角、コードレビュー
mitohato14
0
150
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
180
The state patternの実践 個人開発で培ったpractice集
miyanokomiya
0
150
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
980
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
2
1k
パスタの技術
yusukebe
1
400
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
It's Worth the Effort
3n
187
28k
The World Runs on Bad Software
bkeepers
PRO
70
11k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
A better future with KSS
kneath
239
17k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
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! “祖宗姓张,其⼦子孙都姓张”