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
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
730
CLI ツールを Go ライブラリ として再実装する理由 / Why reimplement a CLI tool as a Go library
ktr_0731
3
910
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
730
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
150
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
1
600
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
4
550
Dart 参戦!!静的型付き言語界の隠れた実力者
kno3a87
0
160
11年かかって やっとVibe Codingに 時代が追いつきましたね
yimajo
1
230
Reactの歴史を振り返る
tutinoko
1
160
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.1k
kiroでゲームを作ってみた
iriikeita
0
120
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
240
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Building an army of robots
kneath
306
45k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Bash Introduction
62gerente
613
210k
Why Our Code Smells
bkeepers
PRO
337
57k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Pragmatic Product Professional
lauravandoore
36
6.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
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! “祖宗姓张,其⼦子孙都姓张”