我该如何组织CSS文件的内容？

这个问题是关于在.css文件中组织实际的CSS指令.在开发新页面或一组页面时,我通常只是手动将指令添加到.css文件中,尽可能尝试重构.过了一段时间,我有数百(或数千)行,在调整布局时很难找到我需要的东西.

有没有人对如何组织指令有建议？

我应该尝试自上而下组织,模仿DOM吗？

我应该在功能上进行组织,将支持UI相同部分的元素的指令放在一起吗？

我应该按选择器按字母顺序排序所有内容吗？

这些方法的某些组合？

另外,在将文件分成单独的文件可能是个好主意之前,我应该在一个文件中保留多少CSS？说,1000行？或者将整个事物放在一个地方总是一个好主意？

相关问题:组织CSS规则的最佳方法是什么？

看看这三个幻灯片共享演示文稿开始:

美丽的可维护CSS

可维护的CSS

高效,可维护,模块化的CSS

首先,最重要的是,记录您的CSS.无论您使用何种方法来组织CSS,都要保持一致并记录它.在每个文件的顶部描述该文件中的内容,可能提供一个目录,可能引用易于搜索的唯一标记,以便您在编辑器中轻松跳转到这些部分.

如果要将CSS拆分为多个文件,请务必执行此操作.Oli已经提到额外的HTTP请求可能很昂贵,但您可以充分利用这两个方面.使用某种构建脚本将已记录良好的模块化CSS发布到压缩的单个CSS文件中.在锐压缩机可以压缩帮助.

与其他人到目前为止所说的相反,我更喜欢在单独的行上编写每个属性,并使用缩进来对相关规则进行分组.例如,遵循Oli的例子:

#content {
    /* css */
}
    #content div {
        /* css */
    }
    #content span {
        /* css */
    }
    #content etc {
        /* css */
    }

#header {
    /* css */
}
    #header etc {
        /* css */
    }

这样可以很容易地遵循文件结构,特别是有足够的空格和组之间清晰标记的注释(虽然不容易快速浏览)并且易于编辑(因为您不必涉及单个长行的CSS对于每个规则).

理解并使用级联和特异性(因此按字母顺序排序选择器是正确的).

我是否将我的CSS分成多个文件,以及哪些文件取决于网站和CSS的大小和复杂程度.我总是至少有一个reset.css.这往往伴随着layout.css一般的页面布局,nav.css如果网站导航菜单有点复杂,forms.css如果我有足够的CSS来设计我的表单.除此之外,我还在自己搞清楚.可能我colors.css和type.css/fonts.css拆断的颜色/图形和排版,base.css为所有的HTML标签提供完整的基本样式...

2> wusher..：

---

我倾向于像这样讨价还价我的css:

reset.css

base.css:我为页面的主要部分设置了布局

一般风格

头

导航

内容

页脚

additional- [页面名称] .css:仅在一个页面中使用的类

---

@ user371699有人会争辩说使用``比使用`

可爱的天使keven_464

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

• ajax
• bootstrap
• chart
• chrome
• css
• css3
• firebug
• firefox
• html
• html5
• javascript
• jquery
• json
• node.js
• npm
• postman
• vue.js
• webkit

RankList | 热门文章

• 1UISearchBar与iOS7中UITableView标头中的UISearchDisplayController链接
• 2mosquitto MQTT代理和带有SSL/TLS的Java客户端
• 3Haskell的Control.Concurrent.Async.mapConcurrent当前有限制吗？
• 4在Wordpress页面和帖子中插入PHP代码
• 5c#linq从linq返回一个多维数组
• 6128位结构或2个64位记录,用于提高性能和可读性
• 7从.bat调用Gradle会导致批处理执行停止
• 8如何在SQL Server 2005中更新视图
• 9在Haskell中对无限列表进行燕尾迭代
• 10如何在每个输出记录中显示结果集的总计数？
• 11JCabi方面@RetryOnFailure如何抛出异常
• 12iOS7:UICollectionView出现在UINavigationBar下
• 13Resharper重新格式化String.Format()参数
• 14无法在终端中找到XML架构命名空间错误的Spring NamespaceHandler
• 15RENAME语句实际上如何工作？
• 16在ArrayAdapter中重写getDropDownView时的样式问题
• 17从DynamoDB导出数据
• 18中型设备上的Bootstrap 3行中断
• 19在Django中搜索并获取匹配的LDAP用户列表
• 20InnoSetup - 代码签名证书