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
VS Code Update for GitHub Copilot
74th
1
320
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
170
Select API from Kotlin Coroutine
jmatsu
1
190
Java on Azure で LangGraph!
kohei3110
0
170
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
46
30k
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
330
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
100
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
ReadMoreTextView
fornewid
1
480
童醫院敏捷轉型的實踐經驗
cclai999
0
190
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.8k
Six Lessons from altMBA
skipperchong
28
3.8k
Rebuilding a faster, lazier Slack
samanthasiow
81
9.1k
For a Future-Friendly Web
brad_frost
179
9.8k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Raft: Consensus for Rubyists
vanstee
140
7k
Rails Girls Zürich Keynote
gr2m
94
14k
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! “祖宗姓张,其⼦子孙都姓张”