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
670
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
130
html5 新技术 3
baofen14787
1
99
Other Decks in Programming
See All in Programming
Develop iOS apps with Neovim / vimconf_2024
uhooi
1
110
EMになってからチームの成果を最大化するために取り組んだこと/ Maximize team performance as EM
nashiusagi
0
110
Djangoの開発環境で工夫したこと - pre-commit / DevContainer
hiroki_yod
1
430
.NET のための通信フレームワーク MagicOnion 入門 / Introduction to MagicOnion
mayuki
1
2.4k
rails new flags - `rails new` のフラグから Rails を構成するコンポーネントの変遷をザックリ眺める
snaka
0
1.8k
[FlutterKaigi2024] Effective Form 〜Flutterによる複雑なフォーム開発の実践〜
chocoyama
0
3.5k
Better Code Design in PHP
afilina
PRO
0
130
PipeCDの歩き方
kuro_kurorrr
3
120
cmp.Or に感動した
otakakot
3
300
Jakarta EE meets AI
ivargrimstad
0
920
Swift Testing - iPlayground
chiaoteni
0
120
Missing parts when designing and implementing Android UI
ericksli
0
330
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
27
2.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Designing for Performance
lara
604
68k
What's in a price? How to price your products and services
michaelherold
243
12k
Designing Experiences People Love
moore
138
23k
Being A Developer After 40
akosma
87
590k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
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! “祖宗姓张,其⼦子孙都姓张”