Skip to main content

Style Guide

CSS Property Order​

显示属性 -> 自身属性 -> 文本属性.

Display Property Order​

  • position.
  • z-index.
  • top.
  • right.
  • bottom.
  • left.
  • box-sizing.
  • display.
  • visibility.
  • float.
  • clear.

Self Property Order​

  • width.
  • min-width.
  • max-width.
  • height.
  • min-height.
  • max-height.
  • overflow.
  • padding.
  • padding-top.
  • padding-right.
  • padding-bottom.
  • padding-left.
  • margin.
  • margin-top.
  • margin-right.
  • margin-bottom.
  • margin-left.
  • border.
  • border-width.
  • border-top-width.
  • border-right-width.
  • border-bottom-width.
  • border-left-width.
  • border-style.
  • border-top-style.
  • border-right-style.
  • border-bottom-style.
  • border-left-style.
  • border-color.
  • border-top-color.
  • border-right-color.
  • border-bottom-color.
  • border-left-color.
  • border-collapse.
  • border-spacing.
  • outline.
  • list-style.
  • table-layout.
  • caption-side.
  • empty-cells.
  • background.
  • background-color.
  • background-image.
  • background-repeat.
  • background-position.

Text Property Order​

  • color.
  • font.
  • font-family.
  • font-size.
  • font-weight.
  • line-height.
  • text-align.
  • text-indent.
  • text-transform.
  • text-decoration.
  • letter-spacing.
  • word-spacing.
  • white-space.
  • vertical-align.
  • opacity.
  • cursor.
  • content.
  • quotes.

CSS Naming Convention​

Layout Structure Naming Convention​

  • 容器: container.
  • 页头: header.
  • 内容: content.
  • 页面主体: main.
  • 页尾: footer.
  • 导航: nav.
  • 侧栏: sidebar.
  • 栏目: column.
  • 页面外围控制整体佈局宽度: wrapper.
  • 左右中: left right center.
  • 导航: nav.
  • 主导航: main-nav.
  • 子导航: sub-nav.
  • 顶导航: top-nav.
  • 边导航: sidebar.
  • 左导航: left-sidebar.
  • 右导航: right-sidebar.
  • 菜单: menu.
  • 子菜单: sub-menu.
  • 标题: title.
  • 摘要: summary.

Functional Component Naming Convention​

  • 标志: logo.
  • 广告: banner.
  • 登陆: login.
  • 登录条: login-bar.
  • 注册: register.
  • 搜索: search.
  • 功能区: shop.
  • 标题: title.
  • 加入: join us.
  • 状态: status.
  • 按钮: btn.
  • 滚动: scroll.
  • 标籤页: tab.
  • 文章列表: list.
  • 提示信息: msg.
  • 当前的: current.
  • 小技巧: tips.
  • 图标: icon.
  • 注释: note.
  • 指南: guide.
  • 服务: service.
  • 热点: hot.
  • 新闻: news.
  • 下载: download.
  • 投票: vote.
  • 合作伙伴: partner.
  • 友情链接: link.
  • 版权: copyright.

CSS Files Naming Convention​

  • abstracts: $variables, @mixin function.
  • vendors: external libraries (font-awesome, bootstrap).
  • base: normalize.css, reset.css, utils.css, font.css, base.css. (margin-right, text-center, float-right).
  • components: form.css, button.css, navbar.css, dropdown.css.
  • layout: columns.css, grid.css, header.css, footer.css, section.css, navigation.css.
  • pages: home.css, about.css.
  • themes: color.css, font.css.
  • main.css/app.css.

CSS Naming System and Architecture​