html - css中怎么命名颜色比较好?
大家讲道理
大家讲道理 2017-04-17 11:43:18
0
9
679

比如#ff0000,我该是用具体的颜色名来命名呢,还是用语义来命名呢?
1.用颜色名命名: .c-red{color:#ff0000;}
优点:是什么颜色一眼就能看出来,并且html中可以到处复用
缺点:如果我要修改#ff0000为#faf703(黄色),那么c-red和颜色值就对不上了 ,而且如果我有多个红色的时候不好区分。

2.用语义命名: .error{color:#ff0000;}
优点:改色值的时候不会影响语义
缺点:不能到处复用,可能会需要定义多个相同色值的语义类

我觉得这两种方式都有一定的局限性,不知道大家在工作中会怎样定义颜色的类名呢?

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

Antworte allen (9)
PHPzhong

有一个网站,专门做颜色命名的,大家都遵循这个规范的话,应该会好很多

http://chir.ag/projects/name-...

另外,我觉得应该是两种结合的,颜色可以作为变量来命名

    PHPzhong

    我的想法是:让设计师参与到前端构建流程中

    用 CSS 预处理器,把所有色值全部放在一个文件里,比如 color.scss,这个文件就交给设计师维护了,命名的事也都让设计去操心。
    设计师在交付设计稿标注时,也用颜色名去标注,而不是色值。

    这么做有三个优点:

    • 有一个文件记录了部件的色值定义,有利于设计师自己保持设计的一致性和对项目 UI 整体颜色的把控

    • 前端代码效果的一部分交给了设计去控制,当设计师想对项目的颜色进行调整时,不用找程序员去改代码,直接修改完自己的 color.scss,免去了沟通成本

    • 程序员减少了阅读成本(在标注稿上读六个字母,再写到编辑器里,这方面我是很担心出错的,每个色值至少对比两遍才放心)

    实际操作时,程序员要注意自己的代码里不能出现色值,保证自己的颜色都引用自 color.scss,这是坠吼的。

      PHPzhong

      建议用第一种,我反正用的第一种。
      第二种太过语义化,如果我仅仅是想用红色,似乎跟error没关系对吧~

        Peter_Zhu

        我是用第一种,如果像white black这些简单三个重复的我就用重复的部分命名:

        .black{color:#000} .black6{color:#666} .blackbg{background:#000} .black6bg{background:#666} .white{color:#fff} .whitee{color:#eee} .whitebg{background:#fff} .whiteebg{background:#eee}

        如果像你说的red 我就在后面加1,2,3...:

        .red{color:red} .red1{color:#ff0000;} .red2{color:#ff0001;}/*随便写的我不知道是不是红色系,反正就这个意思*/
          洪涛

          用第一种吧,颜色只是你加的一个类,所以不会影响语义,你可以给ERROR加样式,只是颜色直接用单独给,这样颜色的重用性也高

            PHPzhong

            第一种不错不错 学习了

              黄舟

              分情况讨论吧:整体来说命名偏向于语义化。
              第一种:如果你采用less,scss这种预编译处理,建议使用placeholder去替换,如果没有,也确实存在这种复用的情况,那就建议采纳这种原子性的命名方式。

              第二种: 如果像错误信息,提示信息,警告信息这种的,还是使用语义化命名吧。

                迷茫

                推荐用less

                @textRed: #ff0000; .classA { color: @textRed; }
                  迷茫
                  .bg-black{ background: #333; } .bg-gray{ background: #999; } .text-gray{ color: #999; } ...
                    Neueste Downloads
                    Mehr>
                    Web-Effekte
                    Quellcode der Website
                    Website-Materialien
                    Frontend-Vorlage
                    Über uns Haftungsausschluss Sitemap
                    Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!