css 语义化, 有什么练习的网站 或者 书籍

[ruandao]

嗯, 就譬如 css zen garden 说的, 用 语义化的 class 来布局

我现在主要的问题是, 不知道要如何命名 一个控件的 class 比较合适

现在用的是 bootstrap , 然后 直接在前端上 写 col-8 什么鬼的(但是我觉得这个是不符合语义的, 不符合 css zen garden 的)

譬如 我想换个样式, 调整界面布局, 就会受到影响, 嗯, 应该是 写 语义的 class ,然后 在 sass 之类的, 把 布局信息 编辑到对应的 class 中, 这样 设计师, 可以给前端缓换布局(只要换个 css 文件即可, 而无需改动 html 代码)

我需要 语义化 css class 设计的 一些原则, 和 对应的实践习题

希望大家分享下, 哪些资源适合

谢谢

===============

    搜到 oocss

[ruandao]

想了下

这里面 匮乏的 主要是分类能力, 给一个东西, 分类 和 命名

[loading]

semantic-ui

这是语义化比较出色的，可以学习一下。

[leafiy]

senmantic 的 css ……卧槽……太优美了。
如果想实战练手，themeforest 找个销量好的 wp 主题，那 css 真的是精品

[P233]

OOCSS 不是语义化，是指导样式复用的两个关键原则。

命名方面，可以看一下 BEM 的命名规范，然后多参考几个框架的命名方式，很多都大同小异，比如圆角的按钮叫 pill，空心的按钮叫 ghost 等。

追求这个的重点在于提高代码的可读性，class 命名不是给机器看的，而是给人看的，这个人可能是同事，也可能是几个月后的自己。依靠 CSS module，最后编译后的 CSS 基本都是 .a .b .c 这类，所以开发过程中命名长短无所谓，便于 class 的自说明更重要。

最后，Bootstrap 的 col-8 很好用的！

[Tonni]

没了解过 css zen garden，我说下我们使用的 css 命名规范吧，希望对你有帮助。

> 我现在主要的问题是, 不知道要如何命名 一个控件的 class 比较合适

可以学习下 BEM 命名规范，进阶一点可以学习下 BEMIT 命名规范。拿到设计稿时把设计稿综合对比，划分好模块和给每个模块对应的名字，比如一个 `navigation` 模块，开发时大家从一个基础的 layout 开始开发每个模块，因为在前期审核设计稿时就已经给每个模块命名了，所以多人开发时也不会有命名冲突。

BEM 表示 block__element--modifier，刚才我们举例说的 `navigation` 是一个 block，block 是一个独立的模块，下面的子元素是 element，比如 navigation__link 表示 navigation 模块下的链接，如果 navigation 下的链接有多种样式的话就要使用 modifier 来声明了，比如 navigation__link--big 表示大的链接，navigation__link--small 表示小的链接，navigation__link 定义的是默认链接的样式。同理 modifier 也可以直接和 block 一起使用，比如在首页 navigation 是暗黑色的主题，默认的 navigation 模块定义的也是暗黑色的主题，但是到了另外页面变成了红色的主题，这个时候可以声明一个 modifer navigation--red 来 override 默认样式。

默认样式：

<nav class="navigation">
<a class="navigation__link" href="/">Home</a>
</nav>

红色主题

<nav class="navigation navigation--red">
<a class="navigation__link" href="/">Home</a>
</nav>

通过这种方式也可以实现你提到的不改变 HTML 更改前端的样式，只不过这里是细分到模块的样式，不是整个页面的样式。如果你想实现一个 class/css 改变整个页面的样式的话可以看下 BEMIT 里面的 theme 的概念。

http://getbem.com/naming/
https://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/
https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/