在前端开发中，我们会尽量制定一些规则和约定，让项目质量更高，更容易维护。对于这些规则和惯例，我们也希望它们的内容简单易懂。

Rscss和rsjs是一套比较新且紧凑的前端开发规则和约定，其中rs代表rational system，所以可以理解为追求“合理”的css和js。除了介绍他们之外，本文还会有一点补充和我自己的看法。我也建议你点击链接阅读原作者给出的完整内容。

从css的问题开始

Rscss希望能有效改善css写作中的这类常见问题(css哲学的三个问题):

这门课到底是什么意思？这个班有什么用的地方吗？我的新班级会有冲突吗？组件策略

Rscss首先倡导一种基于组件的思维方式。在各种前端框架中，几乎可以看到所有的组件，比如Bootstrap和物化：

一个组件是这样的：

从一个按钮到整个web应用程序，可见的可视元素可以这样看作一个组件。

组件的命名

Rscss推荐的组件应至少用两个字命名，中间用破折号(-)表示：

元素。搜索表单{/*.*/}.文章卡{/*.*/}组件

组件内的较小部分，用作组件的元素。

元素的命名

为了区别于前面的组件，元素的命名只使用了一个词。

显然，只有一个词容易冲突，所以rscss建议将元素和组件与关系选择器相关联：search-form.field {/*.*/}.search-form.action {/*.*/}建议使用子选择器，而不是包含选择器(空格)，以更好地避免冲突：article-card . title {/* ok */}。article-card . author {/* better */}如果您真的需要使用多个单词，请直接连接它们(不使用破折号等分隔符)以显示区别：轮廓盒。名字{/*.*/}为每个组件的元素使用类名，而不是标记选择器。有名字的元素更有语义。

多个属性或状态

组件和元素都可以有多个属性或状态(变体，也称为变体):

属性或状态的命名

使用破折号(-)从代表属性或状态的类开始。

/*组件变体*/。像按钮一样。-全{/*.*/}.像按钮一样。-已禁用{/*.*/}/*元素变量*/。购物卡.标题-小号{/*.*/}命名方法说明

rscss推荐的以短横线为前缀的类名可能会让你有点意外，可以这样写吗？答案是肯定的，而且相当聪明。为什么这么说？请参见w3c对css标识符的解释：

在CSS中，标识符(包括选择器中的元素名、类和id)只能包含字符[a-zA-Z0-9]和ISO 10646字符U 0080及更高，加上连字符(-)和下划线(_)；它们不能以一个数字、两个连字符或一个连字符后跟一个数字开始。

ISO 10646相当于Unicode。可以看到，w3c特别提到，除了英文字母、数字和css标识符中常用的一些Unicode字符(U 0080以上)之外，短横线(-)和下划线(_)也是可用的。

以破折号为前缀的类名相当于有一个特殊的标记，一眼就能提醒你是代表属性或状态的类。

组件嵌套

组件可以嵌套。

对应的html如下所示：

Div class='文章链接' div class='投票框'./div H3类=' title './H3 p class=' meta './p/div嵌套属性或状态

当一个组件位于另一个组件内部时，您可能希望这个组件是特殊的。此时，建议不要使用关系选择器将它们耦合在一起：article-header . vote-box . up {/* reverse this */}建议在组件中添加属性或状态类：

Div class='文章-标题' div class='投票-框-突出显示'./div./div然后基于此类定义特殊样式：投票箱。-highlight.up {/*.*/}这样做的目的是使组件的样式独立于其位置。OOCSS的原则之一，分离容器和内容，是同样的想法。

布局思想

Rscss建议，除了一些具有固定宽度和高度的特定元素(如头像和徽标)，组件本身不定义任何影响布局位置的属性：

定位(位置、顶部、左侧、右侧、底部)浮动(清晰)外边距(宽度、高度)这意味着如果将组件视为一个整体，它应该是自适应的。

当需要定义布局位置属性时

如果要定义影响布局位置的组件属性，建议使用关系选择器将组件与其环境相关联：文章列表。物品卡片{宽度： 33.3%；向左浮动：}.文章卡{/*.*/}.article-card.image {/*.*/}.article-card.title {/*.*/}.article-card.category {/*.*/}在上面的代码中，可以注意到"，

辅助类

Rscss建议Helpers类单独存储一个文件，类名以下划线(_)开头。经常使用辅助类！重要的，相应的，应该尽量少用辅助类。_向左拉动{左侧浮动：重要；}._向右拉{右侧浮动：重要；}下划线(_)作为类名的前缀，如前所述，也是一个特殊的标记，提醒您这是一个辅助类，请谨慎使用。

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

rscss与其他css理论的比较

在边界元法和最小二乘支持向量机等支持向量机理论中，支持向量机的成分和元素有着相似的存在。他们这样比较：

组件块模块元素元素子组件布局？布局变体修改器子模块状态

这就是rscss的主要内容。让我们来看看rsjs。

Rsjs专注于传统的web应用程序

Rsjs专注于非SPA的web应用，也就是我们通常理解的页面很多，主要使用jQuery，每个页面都可以有自己的。js文件。

现在有一个JavaScript代码风格指南可以遵循。因此，rsjs只对其他一些关键点给出建议，比如命名空间和文件组织。

行为原则

Rsjs建议将JavaScript实现的交互功能视为一次只影响一个组件的行为。以下是一个参考示例：

div class=' main-nav bar ' data-js-collapsable-nav button class=' expand ' data-js-expandex pand/button a href='/' Home/a ul./ul/div/* Behavior-Behavior/collapsed-nav . js */$(function(){ var $ nav=$('[data-js-collapsed-nav]')；if(！$nav.length)返回；$导航。on('click '，'[data-js-expand]'，function(){ $ nav . addclass('-expand ')；}) .on('mouseout '，function(){ $ nav . remove class('-expanded ')；});});它包含一些建议。

使用数据属性

建议使用html5的数据自定义属性data-js-___来标记与某个行为相关的DOM元素。

与使用ID和类选择元素相比，这种形式的数据属性一方面有更明确的含义，提醒你它是一个与交互行为相关的元素，另一方面更容易重用，在任何一个DOM结构中添加这样的数据属性都可以得到相应的行为。

为每个行为创建一个单独的文件

建议将每个行为对应的JavaScript代码单独分成一个文件，用文件名表示。文件名可以引用属性名data-js-___中对应的名称，这样根据属性名很容易找到对应的JavaScript代码。

可能的文件目录结构：

javascripts/behaviors/可折叠的化身弹出的通知不使用内联JavaScript

不要以脚本的形式在html中添加内联JavaScript代码./script或onclick=' '。通过保持行为逻辑代码独立于html，您可以使代码更容易维护。

从rsjs的内容来看，“行为独立于内容”的约定对于传统的基于jQuery的Web应用仍然有意义。

初始数据采集方式

传统网站的一个常见场景是，后端语言在页面中提前输出一些数据，然后JavaScript会取用它们。您可能已经看到了以下脚本标记的实现，但是很明显，根据前面的建议，应该避免这种情况。

script window . user data={ email : '[email protected]'，id: 9283}/scripttrsjs建议，如果只有一个组件需要使用这些数据，则可以通过使用前述数据属性(保存为值)的行为的JavaScript代码来检索这些数据。

！-由user-info行为使用-div class=' user-info ' data-js-user-info=' { ' email ' : '[email protected]'，' id' :9283} '如果是多个组件使用的数据，可以在head中使用meta tags。

头.-选项1 -元属性='app:user_data '内容=' { ' email ' : '[email protected]'，' id':9283} '！-option 2-meta property=' app : user _ data : email ' content='[email protected]' meta property=' app 3360 user _ data : id ' content=' 9283 '命名空间

Rsjs建议使用尽可能少的全局变量。常见的类和函数放在一个对象中，例如应用程序：

if(！窗户。App)窗口。app={ }；App。Editor=function() { //.};可以在多个行为中重用的帮助方法可以独立创建对象，并将其保存在帮助器中/:

/* helper/format _ error . js */if(！窗户。助手)窗口。助手={ }；helper . format error=function(err){ return ' ' err . project _ id ' error : ' err . message；};第三方图书馆的处理

Rsjs建议，如果引入第三方库，也应该做成组件行为的形式。例如，Select2的函数只能影响属性数据为-js-select2的元素。

//select2.js -影响`[data-js-select2]` $(function(){ $('[data-js-select2]'). select2()；});所有第三方库的代码都可以集中到一个类似于vendor.js的文件中，该文件独立于站点本身的代码。这样，当网站更新代码时，用户可以直接使用缓存，不需要再次获取这些第三方库代码。

Rsjs对自己的归纳

Rsjs认为它的内容对开发者更友好，也就是更容易维护，而它的性能(用户友好)可能不是最好的。上述所有建议也各有利弊，rsjs只是在权衡利弊的基础上得出更有利于长期维护的结论。

Rsjs不是万能药，不适合单页应用(SPA)等复杂的前端功能。它专注于传统的有多个网页的网站，每个网页都有一点JavaScript交互。

结论

rscss和rsjs使用的“合理”这个词是一个很棘手的表达，不是完美的，不是最好的，也不是优秀的，它只是意味着我们希望代码能够“合理”。Rscss和rsjs大概就是这样，追求“小而合理”，风格简单，篇幅短。

目前rsjs还在更新中(正在进行中)，而rscss相对成熟。强烈建议尝试一些你认为合理的建议！