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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
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
humanlayerのブログから学ぶ、良いCLAUDE.mdの書き方
tsukamoto1783
0
200
Lambda のコードストレージ容量に気をつけましょう
tattwan718
0
140
AI Schema Enrichment for your Oracle AI Database
thatjeffsmith
0
320
Grafana:建立系統全知視角的捷徑
blueswen
0
330
CSC307 Lecture 01
javiergs
PRO
0
690
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
250
「ブロックテーマでは再現できない」は本当か?
inc2734
0
1k
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
610
Rust 製のコードエディタ “Zed” を使ってみた
nearme_tech
PRO
0
210
それ、本当に安全? ファイルアップロードで見落としがちなセキュリティリスクと対策
penpeen
7
4k
Automatic Grammar Agreementと Markdown Extended Attributes について
kishikawakatsumi
0
200
責任感のあるCloudWatchアラームを設計しよう
akihisaikeda
3
180
Featured
See All Featured
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
62
50k
Un-Boring Meetings
codingconduct
0
200
GraphQLの誤解/rethinking-graphql
sonatard
74
11k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
kimpetersen
PRO
0
240
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
470
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
57
50k
Rails Girls Zürich Keynote
gr2m
96
14k
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
110
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2k
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
2
3.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.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! “祖宗姓张,其⼦子孙都姓张”