在开始一个新的网站项目时,只有这么多的全球CSS可以预见使用.(更新:在开发过程中你也可以选择很多东西.)
随着项目的推移,大家都增添了不少网页特异性class和ID在HTML选择的样式和布局与外部CSS文件.(我在这里定义"特定于页面的CSS"有点不同 - 我不是指<style>内部,<head>但是,例如,我通常给body每个页面一个唯一的ID.)
p,img,figure,
figcaption,section,article,div,等.padding,margins,font性能widths,
heights等等.问题是 - 一旦项目完成,并且创建了一个大的CSS文件 - 返回并减少/删除不必要的内容的最佳方法是什么？我的意思是,通过将CSS规则尽可能地组合为全局和全能(不破坏任何东西).
PS在HTML5中,我尽量避免将类或ID设置为元素,除非必须这样做.我相信一般规则可以很好地工作(当然,大多数情况下).
您应该阅读Johnathan Snook的书" 可扩展和模块化CSS",以获得处理此问题的一些见解.不使用元素类是您的特权,但它是我们编写可维护CSS的最强大的工具之一.Harry Roberts的"Big CSS"演示文稿还为所谓的"面向对象"的CSS提供了一些强大的见解和工具.所以,我的第一点建议是开始使用标记中的类.
我理解想要编写语义html的问题,这可能是你回避使用类的原因 - 但是html元素上的类不会减损语义,只要你聪明地编写它们.事实上,他们通常(总是,真的)提供有关元素的更多信息.
困难的部分是写一个类的语义,描述一个元素,而不是演示的功能.雅虎的设计模式库是获取语义类名称示例的一个非常好的地方,也是Web架构中许多有用设计模式的重要资源.
作为一个简短的tl;博士:
组织CSS时,请使用级联来获得优势.首先设置重置,然后设置全局样式 - 这些是直接应用于元素选择器的通用布局样式.接下来,编写您的模块 - 这些是您的类,它们应该与元素无关.
避免使用标签选择器限定您的课程.为了为维护您网站的任何其他人提供文档和指导,您应该使用"准合格选择器"
例如,而不是:
div.carousel { /* style information here */ }
改为写:
/* div */ .carousel { /* style information here */ }
使用这种技术,您可以提供有关如何使用组件的文档,而无需实际限定它们并提高其特性(从而破坏其模块化).
除此之外,请记住:平衡你的特异性.架构良好的CSS就位于一般和特定的尖端.您需要使用类才能使CSS模块化和可重用,但您还需要避免膨胀.