Ruby China

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

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

比如说：页面一，body 的样式设置为：

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

页面二的样式设置为：

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

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

adamshen #1 2016年06月03日

layout 里加个判断

或者干脆把样式放在 erb 里

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

1 个赞
lzm420241 #2 2016年06月03日

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

adamshen #3 2016年06月03日

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

chenjau #4 2016年06月04日

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

qinfanpeng #6 2016年06月04日

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

tomatoo #7 2016年06月04日

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

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

lzm420241 #8 2016年06月21日

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

tomatoo #9 2016年06月23日

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

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

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