CSS样式表规划经验总结

逃离我推掉我的手 2021-09-25 16:08 396阅读 0赞

最近看到一些关于CSS文件管理的问题，下面我就自己的经验说说，一个好的CSS文件主要是看他是否具有易维护性。下面我就说说我个人的看法：  
  
一、CSS文件的规划  
  
        我在规划CSS的时候，我比较喜欢建立全局css及各模块css。在html页面中引用全局css，在全局css中引用各模块css。比如，建立global.css为全局css，在全局css中定义“\* \{ … \} body \{ … \}”之类的全局样式。  
在全局样式中通过“@import url(”xxx.css”);”引入模块css。  
  
关于模块CSS的划分，我比较喜欢类似wordpress中的css划分方式，一般情况下通过类似下列结构划分：  
         layout.css /\* 整站布局 \*/  
               public.css /\* 公用组合样式 \*/  
               header.css /\* 页面头部区域样式 \*/  
               sidebar.css /\* 侧边栏区域样式 \*/  
               main.css /\* 主体区域样式 \*/  
               footer.css /\* 底部区域样式 \*/  
               index.css /\* 首页区域特有样式 \*/  
               form.css /\* 表单类样式 \*/  
       说明一下，layout.css负责整个网站的布局，比如\#header, \#footer等布局的基本位置及样式设计；public.css负责一些公用样式定义，因为一个class中可以使用class=”navbar font12px”这种利用中间空格分隔的方法来应用多个class样式，所以可以定义一些比较常用的或者在特殊情况下需要修改的公用class，方便局部微调；header.css、sidebar.css、footer.css等模块是对应头部、侧边栏、底部模块的css样式表，可以根据网站的具体需求来增减模块；index.css是一些首页特有元素的css，因为首页的特殊性，我们在设计css的时候通常对首页进行特殊处理，一般情况下，首页是 css最复杂的一个页面，有必要对首页的独有css元素进行归类放置，也可以不用@import引入index.css，而把它单独放到首页引用； form.css是表单元素的样式表，表单虽然不难，但控制起来还是比较麻烦的，单独放到一个css文件里方便控制，当然，类似的其他元素你也可以这么处理。  
  
二、写CSS样式表的技巧  
  
（一）、关于注释  
  
    在写CSS样式表时，CSS中的注释非常重要。在创建CSS样式时，应当保持随手注释的习惯。一般的，我习惯于使用“/\* 注释内容 \*/”的格式来写注释，因为在EditPlus等具有高亮功能的编辑器里，使用C语言中常用的“/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/”之类的注释是无意义的，没有必要填充大量无意义内容作为分隔。带有注释的文档作为网站的原始CSS文档，在发布网站的时候，可以使用CSS压缩工具压缩CSS，在输出的 CSS中去掉注释以提高文件传输效率。  
  
（二）、关于命名  
  
    在给CSS文件命名的时候，我比较喜欢使用符合语义的英文名或者缩写命名，在非常用部分也许会用部分拼音命名。另外，在某些有从属关系的class里，我可能会使用类似“list\_banner”之类的命名，即父元素名加上“\_”再加上元素名。  
关于命名，可以根据团队设计师的习惯进行协商总结出规范的命名规则。但最好在命名之后加上注释，以便将来生成文档备查。  
  
（三）、关于继承性  
  
    在CSS中，要善用继承性。比如在两个嵌套的div中，父元素定义了background-color属性为黑色，如果子元素的背景同为黑色，则不需重复定义。善于利用CSS的继承性可以让代码更有效、更精简。  
  
（四）、关于CSS定义的层次  
  
在定义CSS中的class时，建议使用层次分明的方式来描述语句。

1.  示例CSS：  
    
2.  \#menu \{ ... \}  
    
3.  \#menu .menulist \{ ... \}  
    
4.  \#menu .menulist .selectit \{ ... \}  
    
5.    
    
6.  示例结构：  
    
7.  <div id="menu">  
    
8.    <div class="menulist">  
    
9.      <div class="selectit"></div>  
    
10.   </div>  
    
11. </div>

复制代码

从最终效果来看，\#menu没有必要重复出现，但是实际上如果能够在前面加上\#menu，将会让文档的层次更加明了，更利于阅读。  
  
（五）、关于样式排序  
  
    在设计CSS样式表时，我们大多是手写代码，这样很容易造成class中的样式排序混乱。比如有几个class中用到了padding、 margin、background、color等样式，但是排序的时候，有的class是background比较靠前，有的是margin比较靠前。这样就造成了一定的混乱，容易让思路受挫。我建议个人或者团队的设计师协定一个大致顺序，这样从个别来说看不出太大差别，但从整体上将更加易于阅读和管理，整体效率会提高不少。  
  
比如，我往往把float放在最前面，将width、height和padding、margin、border等放在较靠前的位置，background其次，然后是控制文本的font、color、text-align等，接着是某些特殊标签才能用到的元素，像list-style等，最后是css滤镜。当遇到特殊情况时（比如CSS某些属性的优先级需要定义）可以灵活处理。  
  
希望大家多多提出自己写法。多多交流。