请问诸位的 css 代码规范是怎样的呢？

This topic created in 3132 days ago, the information mentioned may be changed or developed.

css 初学者，发现如果代码规范不合理的话，在编写过程中容易混淆，隔段时间回头看几乎看不懂写的什么；

问了一个做前端的朋友，他说他公司小公司野路子乱搞，没啥代码规范，就他一个前端，只要同行能认出来就行。

只要别像他有时候 fuck1 fuck2 之类的都用上就行。

卒。。

参考了下网易 NEC，看了看张鑫旭博客上的一些关于 css 分离的思想，似乎有了点苗头。

今天断断续续写了几个小时一个设计图都没做完，而且感觉 css 是越写越乱了。

请教诸位的 css 代码规范都是怎么一个标准呢？

附上。半成品。狗屎一样的代码(如果可以称为代码的话)。

https://github.com/7zkizzz/BAIDU-IFE2016/tree/master/TASK6

https://7zkizzz.moe/TASK6.html

CSS

代码

规范

fuck2

20 replies • 2017-11-27 23:28:45 +08:00

Yuigahama

Nov 26, 2017

搜 bem
或者直接上 css modules 了

feiyuanqiu

Nov 27, 2017

以前学 css 的时候看的是 bootstrap 作者写的「 Code Guide by @mdo 」 http://codeguide.co/#css

现在前端发展这么快，应该有更细致的规范吧

chenjau

Nov 27, 2017

第一次看到有人这样写 css 的.

为什么默认 html 字体是 625%? 16px 或 100%不行? 不觉得因为 625%的原因, 导致所有的 rem 数值很 magic?
s-bg-4b 之类的名字确认不是混淆压缩过的吗? fuck1, fuck2 比这名字高多了.
.f-po-ab 诸如这种只有 position:absolute 这一条的有必要存在?

先取好名, 比如 .hero , .block, 不是 .hr , .blk.
合并和取消没有单独存在意义的样式.
就这个页面来看, 不需要绝对定位. 乱用绝对定位意味着你对布局不懂.
学习下 12 columns 的布局.
你用 font-family 的方式可能代表着你不懂'层叠'之意. 还是找本书, 先学基础知识.

shyling

Nov 27, 2017

先了解一下页面上的元素常用的命名... header, nav, content, aside 之类的，然后了解一下单位都应该用在什么地方。
然后再看一下 bem，最后看看 css processer

rabbbit

Nov 27, 2017

我一般都写 header banner artical 这种

http://htmlpreview.github.io/?https://github.com/Aaron-Bird/baiduIFE/blob/master/xiaowei_mission_6/index.html

rosu

Nov 27, 2017 via Android

我记得腾讯前端不是有一个代码规范？可以去看看

ByteRan

Nov 27, 2017

走的时候 BEM

overflowHidden

Nov 27, 2017

BEM 但是有的公司喜欢搞原子类那一套，color-red ,color-blue 那种，但是说实话很个人很排斥后者

leefly

Nov 27, 2017

简单说有语义就行，个人受到 Bootstrap 影响很大。
现在按着 BEM 的来比较好

lwbjing

Nov 27, 2017

.a{}
.a-1{}
.b{}
.b-1{}
.c-1-1{}

7zki

Nov 27, 2017

@Yuigahama 团子好评。bem 正在啃，不知道是不是我理解有误，bem 命名是简单了，但是 css 分离复用什么的还是没弄明白。

bem 把 css 抽象成了一个个模块-组件的方式，但是这样一来不同模块下相同属性的组件岂不是不能复用了？

把握不到样式分离的一个点

7zki

Nov 27, 2017

@feiyuanqiu 谢谢，大概看了一下，并没有谈到具体的一些规则，头疼中

7zki

Nov 27, 2017

@chenjau
感谢批评

当时是想着如果让 font-size 为 62.5%的话，1rem=10px 换算简单一点，但是 chrome 会把过小的字号解析成 12px，有误差，所以我就直接放大到 625%，这么做果然是不行的。

另外 css 命名这里，如果直接用尾：footer nav sidebar column 这些来命名的话的确是很语义化，修改什么的也方便

但是这样命名的话 css 属性相同的模块就不能重用了，看到一些博客上让 css 面向属性命名，我现在也是比较纠结怎样把握好一个度。

这是那篇文章，我可能理解有误，希望您能指点一下。

http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5%91%BD%E5%90%8D%E5%87%86%E5%88%99%E6%96%B9%E6%B3%95/

dumbass

Nov 27, 2017

@overflowHidden #8 哈哈哈，项目没用框架，公共 class 我就这么命名，感觉好傻

7zki

Nov 27, 2017

@overflowHidden 原子类重用性在某些情况下高一些吧，但是后期修改起来很麻烦的样子

7zki

Nov 27, 2017

看到诸位很多都推荐 BEM，但是 BEM 岂不是把组件都限制在了模块内部？重用性是不是有问题？我理解的感觉不对把

overflowHidden

Nov 27, 2017

@7zki BEM 只是说提供一种思路吧，和你发的链接里的文章也并不冲突，如果死扣 BEM 去命名你会发现结构一多就词穷了而且 css 名字又臭又长。。。css 命名总结就是做到能复用和可维护。你可以看一下这 https://www.zhihu.com/question/21935157

7zki

Nov 27, 2017

@overflowHidden 是滴，还是结合实际情况来做吧。

chenjau

Nov 27, 2017

你当前的做法, 不但 css 难以理解和维护, 而且 html 同样由于这个原因乱的很. 比如:
<p class="u-fo1 s-col2 f-po-ab f-po-ab2 f-flo-r">2016.03</p>,
完全无法判断是什么东西,
如果改为 <p class="publish-date">2016.03</p>, 不但语义清晰, 而且不影响重用, 要用到这个 date 的时候, 就用这个 class.

重用讲的是重用块, 或者重用更小的块中的某个元素, 而非重用某个 css 属性值.

要重用的话, 要从上往下看, 比如你页面中的 what when how, 显然可以重用一个样式, 将之提炼为一个块, 然后用之.

css 的重用有很大的缺点, 或者说是陷阱. 稍有不慎, 就会造成层叠失效, 或者牵一发动全身的局面, 而规范, 比如 BEM, 解决的就是上规模后代码的重用问题. 如果初学 css, 不必追求重用和精简, css 代码可以冗余, 当代码冗余之后, 可提炼和精简的部分也就很显然了, 然后可以尝试重构.

7zki

Nov 27, 2017

@chenjau 谢谢你的指点，今天我推倒重来，把这个页面重新做了一下，还没有完成，只做了一半。

昨天的页面里我用了很多的定位，有 v 友指出这是不对的，我今天没有用任何定位，主要是用行内块元素配合边距之类的完成的，浮动也很少用。

主要是苦恼命名时有些地方不知道怎么命名，直接翻译成英文吗？

BEM 今天也看了一下，可能是我没有理解透彻，总是感觉无从下手。

这是今天重新写的一点半成品，麻烦能指点一下，感激不尽！

https://github.com/7zkizzz/BAIDU-IFE2016/tree/master/TASK6

demo http://htmlpreview.github.io/?https://github.com/7zkizzz/BAIDU-IFE2016/blob/master/TASK6/index.html