这是一个创建于 2019 天前的主题，其中的信息可能已经有所发展或是发生改变。
嗯, 就譬如 css zen garden 说的, 用 语义化的 class 来布局
我现在主要的问题是, 不知道要如何命名 一个控件的 class 比较合适
现在用的是 bootstrap , 然后 直接在前端上 写 col-8 什么鬼的(但是我觉得这个是不符合语义的, 不符合 css zen garden 的)
譬如 我想换个样式, 调整界面布局, 就会受到影响, 嗯, 应该是 写 语义的 class ,然后 在 sass 之类的, 把 布局信息 编辑到对应的 class 中, 这样 设计师, 可以给前端缓换布局(只要换个 css 文件即可, 而无需改动 html 代码)
我需要 语义化 css class 设计的 一些原则, 和 对应的实践习题
希望大家分享下, 哪些资源适合
谢谢
===============
搜到 oocss
 |
1
ruandao OP 想了下
这里面 匮乏的 主要是分类能力, 给一个东西, 分类 和 命名 |
 |
2
loading 2019-06-10 21:26:20 +08:00 via Android  1
semantic-ui
这是语义化比较出色的，可以学习一下。 |
 |
3
leafiy 2019-06-10 22:13:43 +08:00 via Android 1
senmantic 的 css ……卧槽……太优美了。
如果想实战练手，themeforest 找个销量好的 wp 主题，那 css 真的是精品 |
 |
4
P233 2019-06-10 22:56:23 +08:00 1
OOCSS 不是语义化，是指导样式复用的两个关键原则。
命名方面，可以看一下 BEM 的命名规范，然后多参考几个框架的命名方式，很多都大同小异，比如圆角的按钮叫 pill，空心的按钮叫 ghost 等。 追求这个的重点在于提高代码的可读性，class 命名不是给机器看的，而是给人看的，这个人可能是同事，也可能是几个月后的自己。依靠 CSS module，最后编译后的 CSS 基本都是 .a .b .c 这类，所以开发过程中命名长短无所谓，便于 class 的自说明更重要。 最后，Bootstrap 的 col-8 很好用的！ |
 |
5
Tonni 2019-06-10 23:11:19 +08:00 1
没了解过 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/ |
Select Language