您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > CSS

css常见样式命名规则

时间:2019-10-23 10:36:31  来源:  作者:

前言

也许你曾经看到过很多样式命名规则,也参考了我们制定的命名规范,但是大部分的具体样式还是不知道如何命名,主要思想或者标准是什么,也就是前面.m-panel-后面的应该如何命名,子模块与父模块依赖关系怎么体现,等等类似的问题。如何友好科学的解决问题,能够与最大程度的降低我们后期对样式的维护难度。

本文将带你了解目前前端基本的命名规则,各自的优劣,然后我们会给出具体的方案。

一 指定的格式

驼峰式命名

类似于.mLayerTitle这样形式的,但这个仅仅是格式,不代表命名规则,和应该如何去思考用什么名称。

以-格式分割开

类似于.m-layer-title ,这种格式也是很常见的。同样也是只有格式,没有命名方式的核心思想的。

二 样式组织思想

BEM(block+element+modify)

块级,元素,修改,它的主要设计思路是需要定义块级,对于子元素分别利用_区分,对于修饰的部分增加--实现。对于比较复杂的块级元素用-实现连接。举证如下:

site-nav
site-nav_logo
site-nav_login
site-nav--active
site-nav--active

OOcss

css常见样式命名规则

 

  1. OOCSS是object-oriented CSS的缩写. 主要有两个意思:
  2. 结构和设计分离
  3. 容器和内容分离
  4. 使用这种结构, 开发人员获得可以在不同地方使用的CSS类.
  5. 通常这时候总是会有两个消息(一个好消息和一个不好的消息):
  6. 好消息: 通过复用来减少代码量(DRY原则)
  7. 不好的消息: 维护非常困难(复杂). 当你修改某一个具体的元素的样式的时候, 大部分情况下, 除了修改CSS本身(因为多数的CSS类是通用的), 你还不得不添加更多的标记类(markup).
  8. 另外, OOCSS本身并不提供具体的规则, 而是抽象的建议, 所以这种方法在生产中的最终结果会有所不同.
  9. 事实上, OOCSS的想法启发了其他人创建自己的, 更具体的代码结构化方式.
  10. 具体的延伸就是我们将全局样式,布局、间距、模块样式区分开来,并辅以科学准确约定的方式。

SmacSS 可扩展和模块化结构的 CSS

css常见样式命名规则

 

SMACSS是可扩展和模块化结构CSS的简称. 该方法的主要目标是减少代码量并简化代码维护.

Jonathan Snook把它归纳为5个部分:

  1. 基本规则(Base rules): 为网址的主要元素设置样式, 如body, input, button, ul, ol等. 在这一步中, 我们主要使用html标签和属性选择器, 在特殊情况下, 使用CSS类(如: 如果您有JAVAScript-Style选择);
  2. 布局规则(Layout rules): 主要是些全局元素, 顶部, 页脚, 边栏等模块的大小. Jonathan建议使用ID选择器, 因为这些模块不太可能在同一个页面上出现多次. 然而, 本文作者认为这是个很不好的习惯(每当ID出现在样式文中, 感觉世界顿时变得灰暗, 有一股莫名的哀伤).
  3. 模块规则(Modules rules): 模块(类似于卡片布局)可以在一个页面中使用多次. 对于模块CSS类, 不建议使用ID和tag选择器(这是为了方便重用以及上下文独立).
  4. 状态规则(State rules): 在这一步中, 规定了模块的各种状态以及网站的基础部分. 这是唯一允许使用"!important"的地方.
  5. 主题规则(Theme rules): 设计您可能需要更换的样式.
  6. 我们推荐为属于某个组的CSS类定义命名空间, 并为JavaScript中使用的CSS类使用单独的命名空间.

Atomic CSS 原子 CSS

css常见样式命名规则

 

  • Atomic CSS是CSS架构的一种方法, 它的好处是写出基于视觉功能的小的, 单用途CSS类.这种类通常也被称为原子类。
  • 使用Atomic CSS, 为每个可重用的属性创建单独的CSS类. 例如, margin-top: 1px; 就可以创建一个类似于mt-1的CSS类, 或者width: 200px; 对应的CSS类为w-200.这样设计可以最大程度的统一页面的共用样式,便于管理,尤其在你采用了预处理器之后,可以使用继承,拓展等方式快速使用某常用代码段或者样式模块,最大程度的减少css代码数量。
  • 存在的缺点:
  • CSS类名是属性名称的描述, 而不是元素的自然语义. 这种想象很容易使人在开发过程中变得迷茫. 开发本身也十分容易复杂化.
  • 直接在HTML中进行显示设置.
  • 由于这些短板的存在, 这种做法遭到了大量的批评. 然而, 这种做法对于大型项目来说是有一定效果的.
  • 此外, Atomic CSS在各种框架中被用于校正元素样式以及某些层(layers)的其他方法.

MCSS 多层 CSS

css常见样式命名规则

 

  • MCSS指的是多层CSS(Multilayer CSS). 这种样式写法建议将样式分成多个部分, 每个部分称为层(layers).
  • 第0层或基础(Zero layer or foundation), 负责重置浏览器样式的代码(如: reset.css或者normalize.css);
  • 基层(Base layer), 包括可重用元素的样式: buttons, input, hints等等.
  • 项目层(Project layer), 包括单独的模块和"上下文" - 根据用户端浏览器或用于浏览的设备, 用户权限等对元素的样式进行调整.
  • 装饰层(Cosmetic layer), 使用OOCSS风格来书写样式, 对元素外观做微小的调整. 建议仅留下影响外观的风格, 而不能破坏网站的布局(例如颜色和非关键缩进等).
  • 层与层之间的交互层次是非常重要的:
  • 在基层(Base layer)中定义中性的样式, 并且不影响其它层.
  • 基层(Base layer)中的元素只能影响基层的CSS类.
  • 项目层(Project layer)中的元素可以影响基层和项目层.
  • 装饰层(Cosmetic layer)是以描述性OOCSS类("atomic"类)的形式进行设计, 不会影响其他CSS代码, 而是在标记中有选择的使用.

AMCSS 属性模块 CSS

css常见样式命名规则

 

AMCSS是"属性模块CSS"的缩写.

先让我们来看一个例子:

<div class="button button--large button--blue">Button</div>

如果这样写CSS类的链, 是有点复杂的, 所以让我们通过属性来为这些CSS类分组. 分组后就变成下面这样了:

<div button="large blue">Button</div>

为了避免属性名称冲突, 好的方式是为属性加上命名空间. 然后, 我们的button代码就变成这样了:

<div am-button="large blue">Button</div>

如果您使用了验证器去检查你的代码, 并且它(验证器)不喜欢类似于am-button这样的属性名称, 你可以把属性的命名空间(am-)换成data-. 例如: data-button.

使用一个不是那么常用的选择器"~="(IE7以上都支持), 它类似于CSS类属性: 所有属性值包含指定的单词(以空格分开)的元素都会被选中. 所以, 选择器[class ~= "link"][class~= "button"]相对于选择器a.link.button. 这种选择器(选择方式)同样适用于属性.

因此, CSS代码就可以这样写:

/* CSS类选择器 */
.button { ... }
.button--large { ... }
.button--blue { ... }
/* CSS属性选择器 */
[am-button] { ... }
[am-button ~= "large"] { ... }
[am-button ~= "blue"] { ... }

如果您认为这段代码十分的不寻常, 可以尝试使用较为温和的AMCSS 形式:

<div am-button am-button-large am-button-blue>Button</div>

FUN

FUN代表的是"Flat hierarchy of selectors, Utility styles, Name-spaced components."

每个名称前面的字母都代表着一定的原则:

F, 选择器的扁平的层次结构: 建议使用CSS类选择元素(items), 避免不必要的级联, 杜绝使用id.

U, 实用(功能)样式: 鼓励创建原子(atomic)样式来解决典型的修正(微调)任务, 例如: w100表示width: 100%; 或者fr表示float: right;

N, 名称分割组件: Ben建议添加命名空间来指定特定模块元素的样式. 这种方法将避免类的中重叠.

一些开发人员注意到, 使用这种原则来编写CSS代码是非常方便和容易维护的; 在某种程度上, 作者汲取了SMACSS的精华, 以简单并且简洁的方式阐述了这一技术.

这种方式对项目和代码结构施加了很多的要求, 它仅仅建立了记录选择器的首选形式以及它们在标记中的使用方式. 但在小型项目中, 这些规则足以帮助构建高质量的CSS代码.

结论

这些样式的的设计思想中没有完全符合实际需求的,项目实践中建议根据自己的业务以及成员需求,选择合适的样式明明规则,可以是上面一种,也可以是其中几种混合的结果,最终目的都是让你的样式便于维护而已。

这里,个人建议的是用SMAC+Atomic,并且综合归结到了基本的css代码规范中。



Tags:css 命名规则   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
前言也许你曾经看到过很多样式命名规则,也参考了我们制定的命名规范,但是大部分的具体样式还是不知道如何命名,主要思想或者标准是什么,也就是前面.m-panel-后面的应该如何命名,...【详细内容】
2019-10-23  Tags: css 命名规则  点击:(196)  评论:(0)  加入收藏
▌简易百科推荐
Chrome 正在试验 CSS @container 查询器功能,这是由 Oddbird 的 Miriam Suzanne 和一群网络平台开发者支持的 CSS 工作组 Containment Level 3 规范。@container 查询器使我...【详细内容】
2021-12-23  前端晚间课    Tags: CSS   点击:(8)  评论:(0)  加入收藏
CSS选择器很强大下面是我在工作中使用最多的一些选择器:相邻元素, 英文称为sibling, 也就是兄弟姐妹的意思.其实很形象, 比喻两个dom是相邻的.但是邻居很多, 紧密相邻的, 还...【详细内容】
2021-12-23  不只是个小前端    Tags:CSS选择器   点击:(7)  评论:(0)  加入收藏
这篇文章重点介绍一些强大的 CSS 代码片段,用它们可以执行一些繁重的布局编程工作,还能帮助我们构建强大的新式CSS布局。这里我们会介绍10 种新式 CSS 布局和大小调整技术,突出...【详细内容】
2021-12-21  前端晚间课    Tags:CSS   点击:(9)  评论:(0)  加入收藏
CSS框架提供了设计一致解决方案的基本结构,以解决前端web开发中的常见问题。它们提供了通用功能,可以针对特定场景和应用程序进行覆盖。这大大减少了开始创建应用程序和网站所...【详细内容】
2021-12-06  粤嵌教育    Tags:v   点击:(15)  评论:(0)  加入收藏
作者:前端进阶者来源:前端进阶学习交流一、前言 我们经常在网页上 ,游戏界面加载时会看到加载进度条的效果,我们往往会以为这些加载进度条的效果,很难实现。今天教大家JS+CSS结合...【详细内容】
2021-11-05  Nodejs开发    Tags:CSS   点击:(45)  评论:(0)  加入收藏
<template> <div> <div class="triangle"></div> </div></template><style scoped> .triangle { width: 0; height: 0; border-width: 20px; border-styl...【详细内容】
2021-11-04  荣邦小伙917    Tags:css   点击:(40)  评论:(0)  加入收藏
一提起图标,大家可能第一个会想到PS、美工等词语,但很多小图标现在根本都不需要再打开PS了。1、常见的括号( 前进或后退“>” ).arrow{ width:12rpx; height:12rpx; border-...【详细内容】
2021-10-12  滇東小贰锅    Tags:css   点击:(55)  评论:(0)  加入收藏
在过去的几年里,Web开发已经变得非常流行。每年都会发布许多前端框架,Bootstrap一直是最受欢迎的一个,但是,还有许多其他的框架,你可能没有听说过,但绝对值得一试。想学的同学可以...【详细内容】
2021-09-27  粤嵌教育    Tags:CSS框架   点击:(74)  评论:(0)  加入收藏
水平和垂直对齐第一种方式 : grid + place-items .parent { display: grid; place-items: center; } /*注: place-items 是 justify-items 和 align-items 的简写属性 */...【详细内容】
2021-09-02  又菜又爱学习的程序员    Tags:CSS   点击:(84)  评论:(0)  加入收藏
5个有用的 CSS 布局生成器1、 cssgr.id如果你是前端开发人员,这是一个非常有用的网站。你可以首先指定所需的行数和列数,或者在给定的选项中进行选择,然后为其生成代码。这使你...【详细内容】
2021-08-26  程序员文周    Tags:css布局   点击:(144)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条