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

  • 相关阅读:
    Excel Sheet Column Title&&Excel Sheet Column Number
    Trapping Rain Water——经典的双边扫描问题
    Rotate List
    图像处理---《读写图像、读写像素、修改像素值----反色处理》
    图像处理---《Mat对象 与 IplImage对象》
    图像处理---《计算 处理过程 的耗时》
    图像处理---《获取图像的像素指针、像素范围的处理、掩膜应用》
    图像处理---《对一张图片进行简单读入、修改、保存图像》
    图像处理---《搭一个基本框架》
    图像处理---《读取图像后“是否读入成功”的几种提示》
  • 原文地址:https://www.cnblogs.com/Sroot/p/7575409.html
Copyright © 2011-2022 走看看