摘要:前端规范在实际开发中,由于团队成员编码习惯不一,技术层次不同,开发前定制并遵循一种代码规范能提高代码质量,增加开发效率。是定义了一种的命名规范,每个名称及其组成部分都是存在一定的含义。
前端规范
在实际开发中,由于团队成员编码习惯不一,技术层次不同,开发前定制并遵循一种代码规范能提高代码质量,增加开发效率。
JavascriptJavascript规范直接参考airbnb:
ES6 JavaScript Style Guide
ES5 JavaScript Style Guide
React/JSX Style Guide
CSS BEMBlock Element Modifier,它是一种前端命名方法,旨在帮助开发者实现模块化、可复用、高可维护性和结构化的CSS代码。
BEM是定义了一种css class的命名规范,每个名称及其组成部分都是存在一定的含义。
Block | Element | Modifier |
---|---|---|
独立且有意义的实体, e.g. header, container, menu, checkbox, etc. | Block的一部分且没有独立的意义, e.g. header title, menu item, list item, etc. | Blocks或Elements的一种标志,可以用它改变其表现形式、行为、状态. e.g. disabled, checked, fixed, etc. |
由拉丁字母, 数字, -组成css的单个名称.
Block
使用简洁的前缀名字来命名一个独立且有意义的抽象块或组件。
e.g.
.block
.header
.site-search
Element
使用__连接符来连接Block 和 Element。
e.g.
.block__element
.header__title
.site-search__field
Modifier
使用--连接符来连接Block 或 Element 和 Modifier。
e.g.
.block--modifier
.block__element--modifier
.header--hide
.header__title--color-red
.site-search__field--disabled
实例HTML
CSS
.form { } .form--theme-xmas { } .form--simple { } .form__input { } .form__submit { } .form__submit--disabled { }Buttons实例
HTML
CSS
.button { display: inline-block; border-radius: 3px; padding: 7px 12px; border: 1px solid #D5D5D5; background-image: linear-gradient(#EEE, #DDD); font: 700 13px/18px Helvetica, arial; } .button--state-success { color: #FFF; background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x; border-color: #4A993E; } .button--state-danger { color: #900; }FAQ
BEM - FAQ
OOCSSObject Oriented CSS,面向对象的CSS,旨在编写高可复用、低耦合和高扩展的CSS代码。
OOCSS是以面向对象的思想去定义样式,将抽象和实现分离,抽离公共代码。
区分结构和样式在定义一个可重用性的组件库时,我们仅创建基础的结构(html)和基础的类名,不应该创建类似于border, width, height, background等样式规则,这样使组件库更灵活和可扩展性。组件库在不同环境下的样式所要求不一样,若未能区分其结构和样式,给其添加样式,会使其变成一个特定的组件库,而难以重用。
e.g.
以下是一个基础库创建的样式:
.metadata{ font-size: 1.2em; text-align: left; margin: 10px 0; }
若在给其添加更多的样式:
.metadata{ font-size: 1.2em; margin: 10px 0; /*在基础组件上新加的样式*/ width: 500px; background-color: #efefef; color: #fff; }
这样就使前面创建的基础组件metadata变成了一个特定的组件了,使其在其他场景下较难复用。
区分容器和内容把容器和内容独立分区,使内容能作用于任何容器下。
e.g.
#sidebar h3 { font-family: Arial, Helvetica, sans-serif; font-size: .8em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px; }
上面我们定义了一个id为sidebar 中 h3的样式,但是我们发现在footer 中 h3的样式也基本一致,仅个别不一样,那么我们可能会这样写样式:
#sidebar h3, #footer h3 { font-family: Arial, Helvetica, sans-serif; font-size: 2em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px; } #footer h3 { font-size: 1.5em; text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px; }
甚至我们可能会用更糟糕的方式来写这个样式:
#sidebar h3 { font-family: Arial, Helvetica, sans-serif; font-size: 2em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px; } #footer h3 { font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px; }
我们可以看到上面的代码中出现了不必要的duplicating styles。而OOCSS鼓励我们应该思考在不同元素中哪些样式是通用的,然后将这些通用的样式从模块、组件、对象等中抽离出来,使其能在任何地方能够复用,而不依赖于某个特定的容器。
.title-heading { font-family: Arial, Helvetica, sans-serif; font-size: 2em; line-height: 1; color: #777; text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px; } #footer .title-heading { font-size: 1.5em; text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px; }SMACSS
Scalable and Modular Architecture for CSS,可扩展模块化的CSS,它的核心就是结构化CSS代码,提出了一种CSS分类规则,分为五种类型:
Base
Layout
Module
State
Theme
SMACSS定义了一种css文件的组织方式,其横向的切分,使css文件更具有结构化、高可维护性。
BaseBase是默认的样式,是对单个元素选择器(包括其属性选择器,伪类选择器,孩子/兄弟选择器)的基础样式设置,例如html, body, input[type=text], a:hover, etc.
e.g.
html, body { margin: 0; padding: 0; } input[type=text] { border: 1px solid #999; } a { color: #039; } a:hover { color: #03C; }
CSS Reset/Normalize就是一种Base Rule的应用.
Note:
在基础样式中不应该使用!important
Layout不明思议,是对页面布局元素(页面架构中主要和次要的组件)的样式设置,例如header, navigation, footer, sidebar, login-form, etc.
e.g.
.header, footer { margin: 0; } .header { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; } .navs { display: inline-block; margin: 0 auto; }Modules
对公共组件样式的设置,例如dropdown, tabs, carousels, dialogs, etc.
e.g.
.dropdown, .dropdown > ul { display: inline-block; border: 1px solid #283AE2; } .dropdown li:hover { background-color: #999; } .tabs { border: 1px solid #e8e8e8; } .tabs > .tab--active { border-bottom: none; color: #29A288; }State
对组件、模块、元素等表现行为或状态的样式修饰,例如hide, show, is-error, etc.
e.g.
.hide { display: none; } .show { display: block; } .is-error { color: red; }Theme
对页面整体布局样式的设置,可以说是一种皮肤,它可以在特定场景下覆盖base, layout等的默认样式。
e.g.
.body--theme-sky { background: blue url(/static/img/body--theme-sky.png) repeat; } .footer--theme-sky { background-image: blue url("/static/img/header--theme-sky.png") no-repeat center; }Others
SUITCSS
Atomic
Airbnb CSS Style Guide
Web Components这么多CSS规范,貌似还是有冲突等问题,咋办呀?
世上没有完美方案,只有合适/最佳方案~
让我门一起期待Web Components到来吧~
资源 在线实例 源代码文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/115259.html
摘要:前端规范在实际开发中,由于团队成员编码习惯不一,技术层次不同,开发前定制并遵循一种代码规范能提高代码质量,增加开发效率。是定义了一种的命名规范,每个名称及其组成部分都是存在一定的含义。 前端规范 在实际开发中,由于团队成员编码习惯不一,技术层次不同,开发前定制并遵循一种代码规范能提高代码质量,增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 ...
摘要:前端规范在实际开发中,由于团队成员编码习惯不一,技术层次不同,开发前定制并遵循一种代码规范能提高代码质量,增加开发效率。是定义了一种的命名规范,每个名称及其组成部分都是存在一定的含义。 前端规范 在实际开发中,由于团队成员编码习惯不一,技术层次不同,开发前定制并遵循一种代码规范能提高代码质量,增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 ...
摘要:前端规范在实际开发中,由于团队成员编码习惯不一,技术层次不同,开发前定制并遵循一种代码规范能提高代码质量,增加开发效率。是定义了一种的命名规范,每个名称及其组成部分都是存在一定的含义。 前端规范 在实际开发中,由于团队成员编码习惯不一,技术层次不同,开发前定制并遵循一种代码规范能提高代码质量,增加开发效率。 Javascript Javascript规范直接参考airbnb: ES6 ...
摘要:前端编码规范之使用规范前端编码规范之样式编码规范前端编码规范之结构规范前端编码规范之最佳实践前端编码规范之编码规范命名的原则是通俗易懂,尽量保持不重复冲突,尽量不要用。我觉得应该避免出现出现这种方式用预处理器拼接出来的名称,会生成。 前端编码规范之:Git使用规范 前端编码规范之:样式(scss)编码规范 前端编码规范之:HTML结构规范 前端编码规范之:Vue最佳实践 前端编码规范...
摘要:特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 特意对前端学习资源做一个汇总,方便自己学习查阅参考,和好友们共同进步。 本以为自己收藏的站点多,可以很快搞定,没想到一入汇总深似海。还有很多不足&遗漏的地方,欢迎补充。有错误的地方,还请斧正... 托管: welcome to git,欢迎交流,感谢star 有好友反应和斧正,会及时更新,平时业务工作时也会不定期更...
阅读 1956·2021-11-24 09:39
阅读 959·2021-11-11 16:55
阅读 1390·2021-10-09 09:43
阅读 1389·2021-10-08 10:17
阅读 1589·2021-08-25 09:41
阅读 394·2019-08-30 13:02
阅读 606·2019-08-29 15:14
阅读 961·2019-08-29 13:53