HTML/CSS 关于样式覆盖问题有没有什么好的解决办法?

lzm420241 · 2016年06月03日 · 最后由 tomatoo 回复于 2016年06月23日 · 7769 次阅读

比如说:页面一,body 的样式设置为:

body{
  background-color: #b47146;
  margin: 0;
  color: #f0f0f0;
}

页面二的样式设置为:

body{
    background-color: #ffb94a;
    background-size: 100%;
    margin: 0;
}

rails 将两个样式全部放入 application 中按照这种顺序,那么页面一的 background-color 样式就会被覆盖掉,有没有好的办法能确保页面一样式使用样式一,页面二样式使用页面二的样式?

layout 里加个判断

或者干脆把样式放在 erb 里

不过,最方便的方法还是给 body 加个 class 吧

#1 楼 @adamshen 如果页面过多,class 可能会出现一些重复,css 里面有类似 js 模块化的功能么?

#2 楼 @lzm420241 你是说将一些样式打包?用 sass 吧

#2 楼 @lzm420241 class 已经到了不可重用, 且会多到重复, 无法想象这是什么样的应用场景. 我觉得设计方面可能已经存在问题. 如果样式变化比较大且较多, 我建议是做容器而不是各种覆盖. 举例: .page-article, .page- music, .page-books.

#2 楼 @lzm420241 推荐看上面 rei 说的那个连接,我们团队也推广这套命名规范。

不太推荐给 body 加一个 class,然后页面的样式全部嵌套在这个 class 之内的方式。原因:生成的 css 体积变大;选择器权重高不利于覆盖;

强烈建立给 css 添加命名空间,公用样式模块化, 同时多用组合少用嵌套和继承。

@tomatoo 公用模块化,我之前想过,这是写静态 web 页面好用,但是在 rails 中很不好用,原因是:rails 将所有 css 文件放入 application 中,如果想模块化,那么你很多 css 文件都需要分离出来.不知道你考虑过这个问题没?我觉得最好的解法就是通过命名元素的方式.看到这么多,我觉得最好的方法还是@rel 那个最适合 rails

#8 楼 @lzm420241 “写静态 web 页面好用,但是在 rails 中很不好用”,不太明白这句话的意思?

css 文件要小一点,毕竟有样式表预处理工具可以进行合并嘛。对于如何组织样式,可以推荐读一下 http://www.w3cplus.com/preprocessor/architecture-sass-project.html, 之后有疑惑或者是建议,欢迎交流。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号