---
sidebar_position: 60
tags: [Web, CSS, Style Guide]
---

# Style Guide

## Order

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

### Display

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

### Self

- 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

- 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.

## Naming Conventions

### Structure

- 容器: container.
- 页头: header.
- 内容: content.
- 页面主体: main.
- 页尾: footer.
- 导航: nav.
- 侧栏: sidebar.
- 栏目: column.
- 页面外围控制整体佈局宽度: wrapper.
- 左右中: left right center.

### Navigation

- 导航: nav.
- 主导航: main-nav.
- 子导航: sub-nav.
- 顶导航: top-nav.
- 边导航: sidebar.
- 左导航: left-sidebar.
- 右导航: right-sidebar.
- 菜单: menu.
- 子菜单: sub-menu.
- 标题: title.
- 摘要: summary.

### Components

- 标志: 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.

### Files

- `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`.

## Naming Systems

- BEM: [blocks, elements and modifiers](https://www.smashingmagazine.com/2018/06/bem-for-beginners).
- OOCSS: [object oriented CSS](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss).
- SMACSS: [scalable and modular CSS architecture](https://www.toptal.com/css/smacss-scalable-modular-architecture-css).
- ITCSS: [inverted triangle CSS layers](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture).
- A source of inspiration for [class naming](https://github.com/paulrobertlloyd/classnames).
