浅谈我所见的CSS组织风格
2018-02-20 13:26
204 查看
1.简单组织(见习级)
优点:简单,单一文件,适合一些简单项目。
缺点:过度集中,没有模块化,无法适应大型项目。
2.公共组织(见习级)
优点:抽取公共样式,适合一些小中型项目。
缺点:重用代码低,没有模块化,无法适应大型项目。
3.页面集中组织(见习级)
优点:按页面组织,集中存放在css目录中,适合一些中小型项目。
缺点:重用代码低,没有模块化,无法适应大型项目。
4.页面分布组织(见习级)
优点:按页面组织,分布存放在对应目录中,针对性管理页面样式,适合一些中小型项目。
缺点:重用代码低,没有模块化,无法适应大型项目。
5.分离插件(框架)与源码组织(见习级)
优点:分离插件(框架),区分第三方与本项目的样式,适合一些中小型项目。
缺点:重用代码低,没有模块化,无法适应大型项目。
6.组件组织(资深级)
优点:抽取组件样式,重用代码高,组件模块化,适合一些中大型项目。
缺点:引入过多的css标签,不适合小型项目,使用会过于繁琐。
7.精细组件组织(资深级)
优点:更加细化抽取,功能组件样式, 重用代码很高,组件模块化,适合一些中大型项目。
缺点:引入过多的css标签,不适合小型项目,使用会过于繁琐。
8.预后处理组件组织(宗师级)
优点:更加细化抽取,功能组件样式, 重用代码很高,组件模块化,解决引入过多的css,适合一些中大型项目。
缺点:不适合小型项目,使用会过于繁琐。
PS:具体问题具体分析,合理的组织css目录有利于提高开发效率,便于版本迭代。
projectName ├─css | └style.css
优点:简单,单一文件,适合一些简单项目。
缺点:过度集中,没有模块化,无法适应大型项目。
2.公共组织(见习级)
projectName ├─css | ├─index.css └base.css
优点:抽取公共样式,适合一些小中型项目。
缺点:重用代码低,没有模块化,无法适应大型项目。
3.页面集中组织(见习级)
projectName ├─css | ├─about.css └index.css
优点:按页面组织,集中存放在css目录中,适合一些中小型项目。
缺点:重用代码低,没有模块化,无法适应大型项目。
4.页面分布组织(见习级)
projectName ├─page| ├─index | | └index.css | ├─about | | └about.css
优点:按页面组织,分布存放在对应目录中,针对性管理页面样式,适合一些中小型项目。
缺点:重用代码低,没有模块化,无法适应大型项目。
5.分离插件(框架)与源码组织(见习级)
projectName ├─css | ├─index.css| ├─plugins | | └jquery.timepicker.min.css | ├─libs | | └bootstrap.min.css
优点:分离插件(框架),区分第三方与本项目的样式,适合一些中小型项目。
缺点:重用代码低,没有模块化,无法适应大型项目。
6.组件组织(资深级)
projectName ├─css | ├─page | | └index.css | ├─layout | | ├─desktop.css | | └moblie.css | ├─common | | ├─footer.css | | └head.css
优点:抽取组件样式,重用代码高,组件模块化,适合一些中大型项目。
缺点:引入过多的css标签,不适合小型项目,使用会过于繁琐。
7.精细组件组织(资深级)
projectName ├─css | ├─page | | └index.css | ├─layout | | ├─desktop.css | | └moblie.css | ├─common | | ├─footer.css | | ├─head.css | | ├─tab | | | └tab.css | | ├─button | | | └button.css
优点:更加细化抽取,功能组件样式, 重用代码很高,组件模块化,适合一些中大型项目。
缺点:引入过多的css标签,不适合小型项目,使用会过于繁琐。
8.预后处理组件组织(宗师级)
projectName ├─scss | ├─vendor | | ├─font-awesome-sass | | | ├─font-awesome.scss | | | ├─_animated.scss | | | ├─_bordered-pulled.scss | | | ├─_core.scss | | | ├─_fixed-width.scss | | | ├─_icons.scss | | | ├─_larger.scss | | | ├─_list.scss | | | ├─_mixins.scss | | | ├─_path.scss | | | ├─_rotated-flipped.scss | | | ├─_screen-reader.scss | | | ├─_stacked.scss | | | └_variables.scss | ├─partials | | ├─page | | | └index.scss | | ├─layout | | | ├─desktop.scss | | | └moblie.scss | | ├─common | | | ├─footer.scss | | | ├─head.scss | | | ├─button | | | | └button.scss | ├─modules | | ├─funtion.scss | | ├─mixins.scss | | ├─reset.scss | | └variables.scss
优点:更加细化抽取,功能组件样式, 重用代码很高,组件模块化,解决引入过多的css,适合一些中大型项目。
缺点:不适合小型项目,使用会过于繁琐。
PS:具体问题具体分析,合理的组织css目录有利于提高开发效率,便于版本迭代。
相关文章推荐
- 浅谈我所见的CSS命名风格
- 浅谈代码风格与语言细节理解对程序的影响
- 浅谈css的栅格布局
- Spring MVC RestFul风格对css.js等文件的拦截处理方法大全
- 用CSS打造韩式风格网站
- 编写符合SEO标准的DIV+CSS风格网页
- 浅谈CSS+jQuery实现折叠菜单
- HTML风格——CSS一些见解,大家都知道的,呵呵
- 简洁风格按钮及其CSS 3实现方法
- 【CSS】浅谈CSS中常用的相对长度单位
- 根据时段自动切换网站的CSS风格
- 纯CSS实现的紫罗兰风格导航条效果代码
- 微软风格的CSS横向菜单
- 【CSS】浅谈CSS中的包含块
- 浅谈CSS定义超链接<a>正确顺序L-V-H-A
- 浅谈 css的zoom属性
- 浅谈 css的zoom属性
- 浅谈CSS伪类与伪元素
- 如何组织Html元素与如何进行CSS命名(下)
- [导入]再谈css--如何针对不同位置的元素使用不同的风格