CSS模块化规则CSS模块设计原则：可重用、可维护、可扩展1常见问题1.1直接基于父组件修改样式。widget{background:yellow;边框：1px纯黑色；颜色：黑色;宽度：50%；}#sidebar.widget{宽度：200px；}body.homepage.widget{背景：白色；套用其他编程语言中类的概念，直接修改父组件的样式等同于修改类的定义，违反了开闭原则：对扩展开放；closedformodification1.2使用复杂选择器#main-navulliullidiv{}#contentarticleh1:first-child{}#sidebar>div>h3+p{}依靠选择器和HTML元素标签的组合，HTML代码很干净，但是CSS变得凌乱，增加了CSS和HTML结构的耦合度。1.3一个CSS选择器做了太多事情。widget{position:absolute;顶部：20px；左：20px；背景色：红色；字体大小：1.5em；文本转换：大写；}.小部件选择器同时设置组件的位置和外观。组件外观可以是通用的，但位置不能。1.4总结以上问题的意愿：一个类承载了太多的样式。项目整体的复杂度是一定的，但是各个模块的复杂度是不一样的。使用复杂的选择器，一个类承担多个功能，可以简化开发过程；但维护和重复使用很麻烦。模块划分会增加CSS开发的复杂度，但同时减少了CSS维护和复用的麻烦。2尽可能选择CSS可能包含较少的HTML结构：使用嵌套较少的选择器；CSS只定义模块外观样式，在HTML页面调用：较少的CSS被更多的HTML结构调用，可以在容器中定义抽象样式Medium3Recommendation3.1重点使用类选择器定义元素样式，应用即可类到元素；不要写深度嵌套的CSS选择器/*Grenade*/#main-navulliul{}/*SniperRifle*/.subnav{}3.2模块化组织良好的组件层可以解决HTML和CSS之间的耦合关系。CSS定义组件的外观，而不是位置和布局。使用背景、字体等简写属性时，要注意位置和布局的样式（background-position等）。布局和位置由单独的布局类或单独的容器元素组成。3.3命名空间和修饰符组件的每个子元素都使用一个命名空间，每个元素在不同的上下文中使用修饰符进行扩展。使用BEM（Block__Element--Modifier）规则进行命名，减少已有的类名冲突。.btn.btn__item.btn__item--info.btn__item--danger3.4将CSS组织成一个逻辑结构《SMACSS》中提到，CSS可以分为4个不同的类：basicbase,layoutlayout,modulemodules和statestatebase：包括复位原理和元素初值；layoutlayout：在整个站点中定位元素（类似于网格系统）modulesmodules：可重复使用的视觉元素statestate：不同状态触发的样式（通过JavaScript启用和关闭）3.5根据样式和样式使用类名在web前端最后，类名有四个作用：HTML样式、JavaScript钩子、函数检测、自动化测试。为了区分不同功能的类，建议给它们加上前缀：js——用于JavaScript操作
