• 浅谈我所见的CSS组织风格


    1.简单组织(见习级)

    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目录有利于提高开发效率,便于版本迭代。

  • 相关阅读:
    json和pickle模块
    53. 最大子序和
    69. x 的平方根
    leetcode刷题周记【2020.9.21-2020.9.26】
    推荐学习 Java 的地方
    5、SpringBoot:配置文件及自动配置原理
    4、SpringBoot:运行原理探究
    3、SpringBoot:helloworld
    2、SpringBoot:什么是微服务
    1、SpringBoot:什么是SpringBoot
  • 原文地址:https://www.cnblogs.com/Sroot/p/7575409.html
Copyright © 2020-2023  润新知