1. 爱易网页
  2. CSS教程
  3. CSS模块化的了解

CSS模块化的了解

日期：2014-02-18　 浏览次数：21075 次

网页制造aiyiweb文章简介：我没有看过CSS模块化的相关书籍，所以我下面说的不一定正确，但是在任务中，我会用我理解的模块化方式提高任务效率，我理解的模块化，次要分为两类。

在Twinsen Liang的博客上看到一篇名为语义化单单的限定在html么？的文章，文中次要是提及了CSS的命名规则，细心阅读后，我认为这个其实就是模块化思想。（作者也提了这一点）。

我没有看过CSS模块化的相关书籍，所以我下面说的不一定正确，但是在任务中，我会用我理解的模块化方式提高任务效率，我理解的模块化，次要分为两类。

1、将常见的款式剥离出来，构成单独的款式，我叫他基础款式表或模块款式表，这个款式表次要一些常见的基本结构和方式，如CSS Reset、Blank、Font 等等。

例如下面这个款式表，我认为就是一个简单的基础款式表。（只是简单，不推荐用）

CSS 
* {margin:0;padding:0;border:none;outline:none;}
.cb {clear:both;}
.blank10 {height:10px; font-size:1px; overflow:hidden; clear:both;}

2、在页面中按照结构模块化书写款式表，避免款式之间的干扰，并且方便浏览。
例如下面的这个结构

XHTML 
<!-- 左边 -->
<div>
  <h2>...</h2>
  <h2>...</h2>
</div>
<!-- 左边 -->


                        

                    
                    


                    

                    



    

        
相关资料更多>

    

    

        
    

            
                  
    
                      
  1. 
                        使用em创建Media Queries模板代码片段
    2. 
                   
                
                  
    
                      
  2. 
                        webkit下text-indent首行缩进文字效果
    3. 
                   
                
                  
    
                      
  3. 
                        CSS3实例教程:text-shadow属性完成字体阴影
    4. 
                   
                
                  
    
                      
  4. 
                        css3阴影属性box-shadow留意事项
    5. 
                   
                
                  
    
                      
  5. 
                        CSS教程：div设置float后高度不自动添加
    6. 
                   
                
                  
    
                      
  6. 
                        CSS实战:写CSS样式表的参考标准实战
    7. 
                   
                
                  
    
                      
  7. 
                        “顶级”CSS技巧
    8. 
                   
                
                  
    
                      
  8. 
                        CSS教程(2)：经过实例学习CSS背景
    9. 
                   
                
                  
    
                      
  9. 
                        样 式 表 全 接 触（7）
    10.