前端理论之rscss和rsjs的示例分析

.search-form { /* ... */ }
.article-card { /* ... */ }

.search-form > .field { /* ... */ }
.search-form > .action { /* ... */ }

.article-card .title { /* okay */ }
.article-card > .author { /* ✓ better */ }

.profile-box > .firstname { /* ... */ }

/* component variants */
.like-button.-wide { /* ... */ }
.like-button.-disabled { /* ... */ }

/* element variants */
.shopping-card > .title.-small { /* ... */ }

 
 ...
 

.article-header > .vote-box > .up { /* ✗ avoid this */ }

 
 ...
 

然后以这个class为基础来定义特别的样式：

.vote-box.-highlight > .up { /* ... */ }

这样做的目的是让一个组件的样式不依赖其所处的位置。OOCSS的原则之一，Separate container and content，也是这样的理念。

布局思想

rscss推荐除一些具有固定宽高的特定元素（如头像，logo）外，组件本身不定义任何影响布局位置的属性：

• 定位（position、top、left、right、bottom）

• 浮动（float、clear）

• 外边距（margin）

• 尺寸（width、height）

这样做的意思是说，如果把组件看做一个整体，它应该是自适应的。

需要定义布局位置属性的情况

如果要定义组件的影响布局位置的属性，建议使用关系选择符把组件和它所处的环境关联起来：

.article-list > .article-card {
 width: 33.3%;
 float: left;
}

.article-card { /* ... */ }
.article-card > .image { /* ... */ }
.article-card > .title { /* ... */ }
.article-card > .category { /* ... */ }

在上面这段代码可以注意到，“组件本身的外观”与“组件在某一环境中的位置”被明确地分离了。

辅助类

rscss推荐辅助类（Helpers）单独存放一个文件，且class名以下划线（_）开头。辅助类也常会用到!important，对应的，应尽可能少使用辅助类。

._pull-left { float: left !important; }
._pull-right { float: right !important; }

下划线（_）作为前缀的class名，如前文已经解释过的那样，也是作为一个特殊的标记提醒你这是一个辅助类，请谨慎使用它。

辅助类在前端框架中也很常见。

rscss与其他css理论的比较

rscss的组件（Component），元素（Element）等概念，在BEM、SMACSS这些css理论中也有类似的存在。它们比较起来是这样的：

RSCSSBEMSMACSS Component Block Module Element Element Sub-Component Layout ? Layout Variant Modifier Sub-Module & State

以上就是rscss的主要内容了，下面来看看rsjs。

关注传统web应用的rsjs

rsjs关注的是非单页应用（non-SPA web application），也就是我们通常理解的有很多页，主要使用jQuery，而且每个页都可以有自己的.js文件的传统网站。

现在已经有了可遵循的JavaScript代码本身的风格指南，因此，rsjs只对一些其他的要点提出建议，如命名空间，文件组织方式。

行为原则

rsjs推荐把由JavaScript实现的交互功能当做一次只影响一个组件（Component）的行为（Behavior）。下面是一个参考示例：

 Expand

 Home
 
...

/* Behavior - behaviors/collapsible-nav.js */

$(function () {
 var $nav = $("[data-js-collapsible-nav]");
 if (!$nav.length) return;

 $nav
 .on("click", "[data-js-expand]", function () {
  $nav.addClass("-expanded");
 })
 .on("mouseout", function () {
  $nav.removeClass("-expanded");
 });
});

这其中包含了多项建议。

使用data属性

建议使用html5的data自定义属性data-js-___来标记和一个行为有关的DOM元素。

相比用ID和class来选取元素，这种data属性的形式一方面更具有明确的意义，提醒你这是一个和交互行为有关的元素，另一方面更易于复用，在任何DOM结构里添加这样的data属性即可获得对应的行为。

为每个行为单独建立文件

建议每一个行为对应的JavaScript代码都分离到单独的文件里，并以文件名明示。文件名可以参照data-js-___这个属性名里的对应名称，这样，根据属性名就很容易找到对应的JavaScript代码。

一个可能的文件目录结构：

└── javascripts/
 └── behaviors/
   ├── collapsible-nav.js
   ├── avatar-hover.js
   ├── popup-dialog.js
   └── notification.js

不使用行内JavaScript

在html中不要以或onclick=""等形式添加行内JavaScript代码。通过保持行为的逻辑代码独立于html，可以使代码更易于维护。

从rsjs的内容来看，在已有React、Vue等库的今天，“行为独立于内容”的约定仍然对传统的以jQuery为主的Web应用有一定意义。

初始数据的获取方式

传统Web站点的一个常见的场景是，后端语言在页面中预先输出某些数据，然后JavaScript会取用它们。你可能见到过下面这样

rsjs建议的方案是，如果这些数据只需要一个组件使用，可以利用之前提到的data属性（保存为值），由行为的JavaScript代码来自行取出。

如果是多个组件使用的数据，可以使用里的meta标签。

 ...
 
 

 
 
 

命名空间

rsjs建议使用尽可能少的全局变量。共用的类，函数，放到单个Object里，比如叫App：

if (!window.App) window.App = {};

App.Editor = function() {
 // ...
};

在多个行为之间可复用的帮助方法，可以单独建立Object，并将它们分文件保存在helpers/：

/* helpers/format_error.js */
if (!window.Helpers) window.Helpers = {};

Helpers.formatError = function (err) {
 return "" + err.project_id + " error: " + err.message;
};

第三方库的处理

rsjs建议如果引入第三方库，也做成组件行为的形式。比如，Select2的功能，可以只影响带有属性data-js-select2的元素。

// select2.js -- affects `[data-js-select2]`
$(function () {
 $("[data-js-select2]").select2();
});

所有第三方库的代码可以集中到一个类似vendor.js的文件，并和站点本身的代码各自独立。这样，当站点更新代码的时候，用户可以直接利用缓存，而并不需要再次获取这些第三方库代码。

rsjs对自己的归纳

rsjs认为自身的内容更偏向于对开发者友好，也就是更易于维护，而在性能上（对用户友好）可能没有做到最好。以上提到的各项建议，也是有利有弊，rsjs只是在权衡了利弊的基础上得到的更利于长期维护的结论。

rsjs不是万金油，它不适用于单页应用（SPA）等前端功能很复杂的情况。它关注的是的那种多个网页，每个网页一点JavaScript交互的传统网站。

结语

rscss和rsjs所用的“合理”是一个很取巧的表述，不是完美，不是最好，也不是出色，它只是在说希望代码能“合乎道理”。rscss和rsjs大概就是这样，以简约的风格，不长的篇幅，追求着“小而合理”。

目前rsjs还在更新中（work-in-progress），rscss则已经比较成熟。很推荐试试其中你也认为合理的建议！

以上是“前端理论之rscss和rsjs的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！