zoukankan      html  css  js  c++  java
  • 浅谈我所见的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目录有利于提高开发效率,便于版本迭代。

  • 相关阅读:
    Java POI Word 写文档
    安装SQL Server Management Studio遇到的29506错误
    DataSet中的relation
    如何在Eclipse中配置Tomcat
    button与submit
    redis应用场景
    机器学习实战-KNN(K-近邻算法)详解
    python中的random扩展
    php函数实现文章列表显示的几秒前,几分钟前,几天前等方法
    HTML5的Video标签的属性,方法和事件汇总
  • 原文地址:https://www.cnblogs.com/Sroot/p/7575409.html
Copyright © 2011-2022 走看看