.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理论中也有类似的存在。它们比较起来是这样的：
RSCSS BEM SMACSS 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）。下面是一个参考示例：
<div data-js-collapsible-nav> <button data-js-expand>Expand</button> <a href="https://www.jb51.net/">Home</a> <ul>...</ul> </div> /* 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中不要以<script>...</script>或onclick=""等形式添加行内JavaScript代码。通过保持行为的逻辑代码独立于html，可以使代码更易于维护。
从rsjs的内容来看，在已有React、Vue等库的今天，“行为独立于内容”的约定仍然对传统的以jQuery为主的Web应用有一定意义。
初始数据的获取方式
传统Web站点的一个常见的场景是，后端语言在页面中预先输出某些数据，然后JavaScript会取用它们。你可能见到过下面这样<script>标签的实现方式，但显然，根据上一条建议，这是应避免的。
<script> window.UserData = { email: "john@gmail.com", id: 9283 } </script>
rsjs建议的方案是，如果这些数据只需要一个组件使用，可以利用之前提到的data属性（保存为值），由行为的JavaScript代码来自行取出。
<!-- ✓ Used by the user-info behavior --> <div data-js-user-info='{"email":"john@gmail.com","id":9283}'>
如果是多个组件使用的数据，可以使用<head>里的meta标签。