CSS高效开发三大方向

css研究方向

大体上CSS的学习可以朝着三个方向进行研究,分别是:

  • 特效(可以学习动画、3D、渐变等)
  • 工程化(可以学习sass、less、postcss等)
  • 布局(可以学习flex、grid、响应式等)

CSS文件划分

TIP

在中大型项目中,一般会对CSS进行文件划分,根据文件的性质与用途,大概会分成:

  • 公共型样式

  • 特殊型样式

  • 皮肤型样式

公共型样式可命名为globa.css或common.css等名字,主要包括网站通用样式编写。例如:重置默认样式

reset、网站通用布局、通用模块和元件、通用响应式系统等

css功能分类

通用模块

通用原件

通用响应式系统

标签默认样式清除

常见的CSS方法论

  • oocss
  • BEM
  • SMACSS
  • Atomic CSS

OOCSS

BEM

SMACSS

样式规范

css样式属性书写顺序

css3浏览器私有前缀写法

类名需要语义化

相关推荐
李剑一3 分钟前
要闹哪样?又出现了一款新的格式化插件,尤雨溪力荐,速度提升了惊人的45倍!
前端·vue.js
闲云一鹤11 分钟前
Git LFS 扫盲教程 - 你不会还在用 Git 管理大文件吧?
前端·git·前端工程化
阿虎儿1 小时前
React Context 详解:从入门到性能优化
前端·vue.js·react.js
Sailing1 小时前
🚀 别再乱写 16px 了!CSS 单位体系已经进入“计算时代”,真正的响应式布局
前端·css·面试
喝水的长颈鹿1 小时前
【大白话前端 03】Web 标准与最佳实践
前端
爱泡脚的鸡腿1 小时前
Node.js 拓展
前端·后端
左夕3 小时前
分不清apply,bind,call?看这篇文章就够了
前端·javascript
Zha0Zhun3 小时前
一个使用ViewBinding封装的Dialog
前端
兆子龙3 小时前
从微信小程序 data-id 到 React 列表性能优化:少用闭包,多用 data-*
前端
滕青山3 小时前
文本行过滤/筛选 在线工具核心JS实现
前端·javascript·vue.js