在前端開發中，我們會嘗試去定一些規則和約定，來讓項目質量更高，更易于維護。而對于這些規則和約定，我們也會希望它內容簡單，容易理解。
rscss和rsjs是一套比較新，也比較小巧的前端開發規則和約定，其中rs代表Reasonable System，所以可以理解為，追求“合理”的css和js。本文除了介紹它們，還會有一點補充以及我自己的看法，也推薦你點擊鏈接閱讀原作者給出的完整內容。
從css的疑問開始
rscss希望有效地改善寫css中的這樣幾個常見問題（css哲學三問）：
組件原則
rscss首先推崇的是以組件（Components）為基礎的思考方式。在各類前端框架中，幾乎都可以看到組件，如Bootstrap和Materialize：
一個組件是這樣的感覺：
小到一個按鈕，大到整個web應用，可見的視覺元素都可以這樣當做一個組件。
組件的命名
rscss推薦組件至少使用兩個單詞的命名，中間用短橫線（-）連接：
.search-form { /* ... */ }.article-card { /* ... */ }組件的元素
組件內部的更細小的部分，當做組件的元素（Elements）。
元素的命名
為了和前面的組件區分開來，元素的命名只使用一個單詞。
顯然，只有一個單詞是很容易沖突的，因此rscss建議以關系選擇符把元素和組件關聯起來：
.search-form > .field { /* ... */ }.search-form > .action { /* ... */ }推薦子選擇符 > 而不是包含選擇符 (空格)，以更好地避免沖突：
.article-card .title { /* okay */ }.article-card > .author { /* ? better */ }如果確實需要用到多個單詞，直接連接它們（不使用短橫線等分隔符），以體現區別：
.profile-box > .firstname { /* ... */ }為每一個組件的元素使用class名，不要使用標簽選擇符。有名字的元素會更有語義。
多種屬性或狀態
無論是組件還是元素，都可以有多種屬性或狀態（Variants，也可以叫變體）：
屬性或狀態的命名
使用短橫線（-）開頭來命名表示屬性或狀態的class。
/* component variants */.like-button.-wide { /* ... */ }.like-button.-disabled { /* ... */ }/* element variants */.shopping-card > .title.-small { /* ... */ }對命名方式的解釋
rscss推薦的短橫線作為前綴的class名可能會讓你有一點驚訝，可以這樣寫的嗎？答案是的確可以，而且搭配得還相當巧妙。為什么這么說呢？請看w3c對css標識符的解釋：
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+0080 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit.
其中ISO 10646等同于Unicode。可以看到，w3c特意在css標識符一般使用的英文字母、數字以及一部分Unicode字符（U+0080以上）之外，提到了短橫線（-）和下劃線（_）也是可用的。
以短橫線作為前綴的class名相當于有了一個特殊的標記，一眼就可以提醒你這是一個表示屬性或狀態的class。
組件嵌套
組件是可以嵌套的。
對應html類似這樣：
<div class="article-link"> <div class="vote-box"> ... </div> <h3 class="title">...</h3> <p class="meta">...</p></div>
嵌套中的屬性或狀態
當一個組件位于另一個組件內部的時候，可能會想要這個組件表現得特別一點。這個時候，建議不要使用關系選擇符把它們耦合在一起：
.article-header > .vote-box > .up { /* ? avoid this */ }建議的做法是為組件增加一個屬性或狀態class：
<div class="article-header"> <div class="vote-box -highlight"> ... </div> ...</div>
然后以這個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理論中也有類似的存在。它們比較起來是這樣的：
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 class="main-navbar" data-js-collapsible-nav> <button class="expand" data-js-expand>Expand</button> <a href="/">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 class="user-info" data-js-user-info='{"email":"john@gmail.com","id":9283}'> 如果是多個組件使用的數據，可以使用<head>里的meta標簽。
<head> ... <!-- option 1 --> <meta property="app:user_data" content='{"email":"john@gmail.com","id":9283}'> <!-- option 2 --> <meta property="app:user_data:email" content="john@gmail.com"> <meta property="app:user_data:id" content="9283">命名空間
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則已經比較成熟。很推薦試試其中你也認為合理的建議！
新聞熱點
疑難解答
