由于项目的复杂度越来越高,前端工程化越来越重要,前端工程化大致为模块化,组件化,规范化,自动化.
今天主要学习规范化中的CSS的规范问题.,项目庞大,需要对CSS文件进行很好的分类.
这里主要说单页应用.
目录结构
## 建议在styles目录下写个readMe.md文档.解释各个文件的作用
## 目录
|-- styles
|-- animation (动画)
|-- index.scss
|-- fade.scss
|-- ease.scss
|-- slide.scss
|-- ... #etc..
|-- common (全局样式)
|-- index.scss #导入该文件下需要的scss模块
|-- base.scss # 主要是reset和其他一些通用的css
|-- normalize.scss
|-- ... # 根据自己的实际项目添加其他scss文件.如排版/模板/通用的全局变量抽取为一个scss.
|-- layout.scss
|-- index.scss
|-- grid.scss #grid system
|-- header.scss # 通用的header
|-- footer.scss # 通用的footer
|-- ... # etc.. 其他通用的布局scss
|-- components (组件样式(通用组件/业务组件))
|-- index.scss
|-- 各个组件的scss.按照组件名进行命名
#每个scss文件需要在文件开头保持良好的注释习惯.在项目中也可以根据实际情况制定一套通用的注释规范
|-- pages (具体页面)
|-- 针对一些页面写的特定的样式
|-- index.scss
|-- mixins (混入)
|-- index.scss
| xxx(按照功能名).scss
|-- themes (皮肤样式)
|-- index.scss
|-- default(默认主题)
|-- ...
|-- xxx(定制主题)
|-- ...
|-- vendors (包含来自外部的库和框架的CSS文件)
-- inex.scss
-- ...
|-- index.scss # primary Scss file
css命名规则
CSS最难的难在起名字.
常见的有BEM风格,Bootstrap风格
对于人数少的团队也许比较随意点,但是最好要定义一些基本的规范.
1. 语义化
2. 使用"-"连字符还是驼峰
我们在编写自己的业务组件时候,最外层一个div#id(组件名).
通过这种方式杜绝命名污染问题.缺点:ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用。
代码格式
一些基本的代码格式
1. 引号的使用:单引号还是双引号
2. 简短的css单行定义完.不换行.复杂的通过嵌套定义
3. 值为0时的单位是否省略
4. 颜色值的表示方法的统一.
5. 根据属性的重要性,浏览器渲染性能按顺序书写
1.位置属性(position, z-index,
display, float,top, right等)
2.大小(width, height, padding, margin ...)
3.文字系列(font, line-height, letter-spacing,
color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
CSS渲染方面的性能可以了解下浏览器的工作机制.比如重绘/重排.
或者参考NEC的图:
CSS的性能优化
我就不做搬运工了.
推荐阅读CSS性能优化的方法有哪些
可以定义一套自己内部使用的通用命名
文档 doc
头部 header
主体 body
尾部 footer
主栏 main
主栏子容器
侧栏 side
侧栏子容器 sidec
盒容器 wrap
导航 nav
子导航 subnav
面包屑 crumb
菜单 menu
选项卡 tab
标题区 head/title
内容区 body/content
列表 list
表格 table
表单 form
热点 hot
排行 top
登录 login
标志 logo
广告 advertise
搜索 search
幻灯 slide
提示 tips
帮助 help
新闻 news
下载 download
注册 regist
投票 vote
版权 copyright
结果 result
标题 title
按钮 button
输入 input
选中 selected
当前 current
显示 show
隐藏 hide
打开 open
关闭 close
出错 error
不可用disabled