--- ``` 推荐所有的命名都是小写，命名都用""包裹，用中横线链接多个单词，命名体现功能，不涉及表现。 ### 常见命名： 用于外侧包裹： .wrap / .wrapper 包裹容器： .container / .ct 用于头部： .header 页面body: .body 页面尾部： .footer 用于侧边栏： .aside / sidebar 与header footer对应，用于主要内容：.content 导航元素： .navigation 分页： .pagination tab切换： .tab> . tab 导航列表：.breadcrumbs 下拉菜单：.dropdown 文章：.article 主体：.main 头像：.thumbnail 媒体资源：.media 面板：.panel 鼠标放置上去的提示：.tooltip 鼠标弹出时的提示：.popup 按钮：.button / .btn 广告：.ad 二级导航：.subnav 菜单： .menu 标签： .tag 提示信息：.message / .notice 摘要：.sunmmary logo: .logo 搜索框：.search 登录：.login 注册：.register 用户名：.username 密码：.password 广告条：.banner 版权：.copyright 弹窗：.model / .dialog --- CSS规范： 1. tab用两个空格表示 2. css的:后加个空格，{ 前加个空格 3. 每条声明后都加上分号 4. 换行，而不是放到一行 5. 颜色用小写，用缩写 6. 小数不用加前缀，用.5代替0.5 7. 元素结果为0的不用加单位 8. 尽量使用缩写 想了解更多关于命名规范的相关知识： 1. google html css 命名规范：https://google.github.io/styleguide/htmlcssguide.xml 2. bootstrap命名规范：http://codeguide.bootcss.com/ 3. 命名真难：https://seesparkbox.com/foundry/naming_css_stuff_is_really_hard --- 伪类： 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为变化而动态变化。 伪类列举 语言相关：:dir /:lang 状态：:link/:visited/:hover/ :active/ :focus 结构化：:not/:first-child/:last-child/:first-of-type/:nth-child/:nth-last-child/:nth-of-type/:only-child/:only-of-child/:traget 表单相关：:checked/:default/:disabled/:empty/:enabled/:in-range/:out-of-range/:scope 其他：:root/:fullscreen --- 伪元素： 伪元素用于创建一些不在文档树中的元素，并为其增加样式。 伪元素：::before/:before ::after/:after ::first-letter/:first-letter ::first-line/:first-line ::selection/::placeholder/::backdrop
--- ``` 推荐所有的命名都是小写，命名都用""包裹，用中横线链接多个单词，命名体现功能，不涉及表现。 ### 常见命名： 用于外侧包裹： .wrap / .wrapper 包裹容器： .container / .ct 用于头部： .header 页面body: .body 页面尾部： .footer 用于侧边栏： .aside / sidebar 与header footer对应，用于主要内容：.content 导航元素： .navigation 分页： .pagination tab切换： .tab> . tab 导航列表：.breadcrumbs 下拉菜单：.dropdown 文章：.article 主体：.main 头像：.thumbnail 媒体资源：.media 面板：.panel 鼠标放置上去的提示：.tooltip 鼠标弹出时的提示：.popup 按钮：.button / .btn 广告：.ad 二级导航：.subnav 菜单： .menu 标签： .tag 提示信息：.message / .notice 摘要：.sunmmary logo: .logo 搜索框：.search 登录：.login 注册：.register 用户名：.username 密码：.password 广告条：.banner 版权：.copyright 弹窗：.model / .dialog --- CSS规范： 1. tab用两个空格表示 2. css的:后加个空格，{ 前加个空格 3. 每条声明后都加上分号 4. 换行，而不是放到一行 5. 颜色用小写，用缩写 6. 小数不用加前缀，用.5代替0.5 7. 元素结果为0的不用加单位 8. 尽量使用缩写 想了解更多关于命名规范的相关知识： 1. google html css 命名规范：https://google.github.io/styleguide/htmlcssguide.xml 2. bootstrap命名规范：http://codeguide.bootcss.com/ 3. 命名真难：https://seesparkbox.com/foundry/naming_css_stuff_is_really_hard --- 伪类： 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为变化而动态变化。 伪类列举 语言相关：:dir /:lang 状态：:link/:visited/:hover/ :active/ :focus 结构化：:not/:first-child/:last-child/:first-of-type/:nth-child/:nth-last-child/:nth-of-type/:only-child/:only-of-child/:traget 表单相关：:checked/:default/:disabled/:empty/:enabled/:in-range/:out-of-range/:scope 其他：:root/:fullscreen --- 伪元素： 伪元素用于创建一些不在文档树中的元素，并为其增加样式。 伪元素：::before/:before ::after/:after ::first-letter/:first-letter ::first-line/:first-line ::selection/::placeholder/::backdrop
--- ``` 推荐所有的命名都是小写，命名都用""包裹，用中横线链接多个单词，命名体现功能，不涉及表现。 ### 常见命名： 用于外侧包裹： .wrap / .wrapper 包裹容器： .container / .ct 用于头部： .header 页面body: .body 页面尾部： .footer 用于侧边栏： .aside / sidebar 与header footer对应，用于主要内容：.content 导航元素： .navigation 分页： .pagination tab切换： .tab> . tab 导航列表：.breadcrumbs 下拉菜单：.dropdown 文章：.article 主体：.main 头像：.thumbnail 媒体资源：.media 面板：.panel 鼠标放置上去的提示：.tooltip 鼠标弹出时的提示：.popup 按钮：.button / .btn 广告：.ad 二级导航：.subnav 菜单： .menu 标签： .tag 提示信息：.message / .notice 摘要：.sunmmary logo: .logo 搜索框：.search 登录：.login 注册：.register 用户名：.username 密码：.password 广告条：.banner 版权：.copyright 弹窗：.model / .dialog --- CSS规范： 1. tab用两个空格表示 2. css的:后加个空格，{ 前加个空格 3. 每条声明后都加上分号 4. 换行，而不是放到一行 5. 颜色用小写，用缩写 6. 小数不用加前缀，用.5代替0.5 7. 元素结果为0的不用加单位 8. 尽量使用缩写 想了解更多关于命名规范的相关知识： 1. google html css 命名规范：https://google.github.io/styleguide/htmlcssguide.xml 2. bootstrap命名规范：http://codeguide.bootcss.com/ 3. 命名真难：https://seesparkbox.com/foundry/naming_css_stuff_is_really_hard --- 伪类： 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为变化而动态变化。 伪类列举 语言相关：:dir /:lang 状态：:link/:visited/:hover/ :active/ :focus 结构化：:not/:first-child/:last-child/:first-of-type/:nth-child/:nth-last-child/:nth-of-type/:only-child/:only-of-child/:traget 表单相关：:checked/:default/:disabled/:empty/:enabled/:in-range/:out-of-range/:scope 其他：:root/:fullscreen --- 伪元素： 伪元素用于创建一些不在文档树中的元素，并为其增加样式。 伪元素：::before/:before ::after/:after ::first-letter/:first-letter ::first-line/:first-line ::selection/::placeholder/::backdrop
--- ``` 推荐所有的命名都是小写，命名都用""包裹，用中横线链接多个单词，命名体现功能，不涉及表现。 ### 常见命名： 用于外侧包裹： .wrap / .wrapper 包裹容器： .container / .ct 用于头部： .header 页面body: .body 页面尾部： .footer 用于侧边栏： .aside / sidebar 与header footer对应，用于主要内容：.content 导航元素： .navigation 分页： .pagination tab切换： .tab> . tab 导航列表：.breadcrumbs 下拉菜单：.dropdown 文章：.article 主体：.main 头像：.thumbnail 媒体资源：.media 面板：.panel 鼠标放置上去的提示：.tooltip 鼠标弹出时的提示：.popup 按钮：.button / .btn 广告：.ad 二级导航：.subnav 菜单： .menu 标签： .tag 提示信息：.message / .notice 摘要：.sunmmary logo: .logo 搜索框：.search 登录：.login 注册：.register 用户名：.username 密码：.password 广告条：.banner 版权：.copyright 弹窗：.model / .dialog --- CSS规范： 1. tab用两个空格表示 2. css的:后加个空格，{ 前加个空格 3. 每条声明后都加上分号 4. 换行，而不是放到一行 5. 颜色用小写，用缩写 6. 小数不用加前缀，用.5代替0.5 7. 元素结果为0的不用加单位 8. 尽量使用缩写 想了解更多关于命名规范的相关知识： 1. google html css 命名规范：https://google.github.io/styleguide/htmlcssguide.xml 2. bootstrap命名规范：http://codeguide.bootcss.com/ 3. 命名真难：https://seesparkbox.com/foundry/naming_css_stuff_is_really_hard --- 伪类： 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为变化而动态变化。 伪类列举 语言相关：:dir /:lang 状态：:link/:visited/:hover/ :active/ :focus 结构化：:not/:first-child/:last-child/:first-of-type/:nth-child/:nth-last-child/:nth-of-type/:only-child/:only-of-child/:traget 表单相关：:checked/:default/:disabled/:empty/:enabled/:in-range/:out-of-range/:scope 其他：:root/:fullscreen --- 伪元素： 伪元素用于创建一些不在文档树中的元素，并为其增加样式。 伪元素：::before/:before ::after/:after ::first-letter/:first-letter ::first-line/:first-line ::selection/::placeholder/::backdrop
``` 推荐所有的命名都是小写，命名都用""包裹，用中横线链接多个单词，命名体现功能，不涉及表现。 ### 常见命名： 用于外侧包裹： .wrap / .wrapper 包裹容器： .container / .ct 用于头部： .header 页面body: .body 页面尾部： .footer 用于侧边栏： .aside / sidebar 与header footer对应，用于主要内容：.content 导航元素： .navigation 分页： .pagination tab切换： .tab> . tab 导航列表：.breadcrumbs 下拉菜单：.dropdown 文章：.article 主体：.main 头像：.thumbnail 媒体资源：.media 面板：.panel 鼠标放置上去的提示：.tooltip 鼠标弹出时的提示：.popup 按钮：.button / .btn 广告：.ad 二级导航：.subnav 菜单： .menu 标签： .tag 提示信息：.message / .notice 摘要：.sunmmary logo: .logo 搜索框：.search 登录：.login 注册：.register 用户名：.username 密码：.password 广告条：.banner 版权：.copyright 弹窗：.model / .dialog --- CSS规范： 1. tab用两个空格表示 2. css的:后加个空格，{ 前加个空格 3. 每条声明后都加上分号 4. 换行，而不是放到一行 5. 颜色用小写，用缩写 6. 小数不用加前缀，用.5代替0.5 7. 元素结果为0的不用加单位 8. 尽量使用缩写 想了解更多关于命名规范的相关知识： 1. google html css 命名规范：https://google.github.io/styleguide/htmlcssguide.xml 2. bootstrap命名规范：http://codeguide.bootcss.com/ 3. 命名真难：https://seesparkbox.com/foundry/naming_css_stuff_is_really_hard --- 伪类： 伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为变化而动态变化。 伪类列举 语言相关：:dir /:lang 状态：:link/:visited/:hover/ :active/ :focus 结构化：:not/:first-child/:last-child/:first-of-type/:nth-child/:nth-last-child/:nth-of-type/:only-child/:only-of-child/:traget 表单相关：:checked/:default/:disabled/:empty/:enabled/:in-range/:out-of-range/:scope 其他：:root/:fullscreen --- 伪元素： 伪元素用于创建一些不在文档树中的元素，并为其增加样式。 伪元素：::before/:before ::after/:after ::first-letter/:first-letter ::first-line/:first-line ::selection/::placeholder/::backdrop
CSS编码规范
好坏对比：