Tocas: 全新的 Tocas 3.0 命名方式：TSCSS

Created on 8 Nov 2018  ·  7Comments  ·  Source: teacat/tocas

TSCSS

TOCAS CSS 是專為 Tocas UI 3.0 所設計的新命名方法，這能夠有效解決對於 JavaScript 和 Vue.js（或 React.js）那樣模組操作樣式名稱時發生衝突的問題，同時能夠減少 CSS 選擇器的運用令整體程式更加地輕量化；同時，這個命名方案也會顛覆性地更改以往的習慣，並針對網格系統縮短樣式用法。

 

索引

 

舊有問題

在 Tocas 1.x 與 2.x 都採用了 Semantic UI 官方命名方式，其方法類似

<!-- Tocas 大的 按鈕 -->
<button class="ts large button"></button>

這個命名方式十分明確，但同時也帶來了困擾。例如說：一個置左對齊且置左浮動的按鈕。

<!-- Tocas 置左對齊 置左浮動 按鈕 -->
<button class="ts left aligned left floated button"></button>

在這種情況下，當透過 JavaScript 切換 left aligned 樣式時，其置左浮動的 left 也會一同受到干擾。在 HTML5 的文件中強調敘述了一件事情：

The classes that an HTML element has assigned to it consists of all the classes returned when the value of the class attribute is split on spaces. (Duplicates are ignored.)

（HTML 元素的樣式名稱以空白分隔，並且在作為資料回傳時會將所有重複的名稱去除）

這意味著採用 Semantic UI 的作法其實是由走在邊緣且不可靠的，這同時也在 GitHub 上有著類似的問題：

  1. Duplicate class names are removed by Meteor
  2. When the transition "fade out" ended, it removes all "out" classes in the element
  3. Word Order Dependency
  4. Class name order shouldn’t matter

針對這個方法，應該要在 Tocas UI 3 中獲得改進。

 

命名規範

新的 TSCSS 命名規範受到 RSCSS 和 SUIT CSS 的啟發，同時也盡可能地降低了像 BEM 那樣令人感到聒噪的問題。

 

私人規範

開發者自行命名元素與元件時所該遵循的事項。

唯一名稱

元素的唯一識別名稱的單字必須透過 -（減號）來作為分隔符號，這讓其風格符合修飾詞與其他用法。

<!-- ✓ 請這麼做 -->
<div id="block-container"></div>

<!-- ✖ 別這樣 -->
<div id="blockContainer"></div>

區塊／容器

一個區塊或容器的樣式名稱必須要有至少兩個單字，並且透過 -（減號）相隔。

<!-- ✓ 請這麼做 -->
<div class="search-form"></div>

<!-- ✖ 別這樣 -->
<div class="form"></div>

元素

在區塊內的元素（像是：收藏按鈕、圖片）都只能用上一個單字，且不可帶有任何分隔符號。

<!-- ✓ 請這麼做 -->
<div class="search-form">
     <input class="keyword" type="text">
     <button class="submit"></button>
</div>

<!-- ✖ 別這樣 -->
<div class="search-form">
     <input class="search-keyword" type="text">
     <button class="submit-button"></button>
</div>

JavaScript 代用詞

有些時候在元件上可能會使用到 JavaScript 代名詞，這讓你可以透過 jQuery 等函式庫直接選擇某個元件，而不需要透過 CSS 選擇器一層一層地慢慢選。JavaScript 代名詞的命名方式和修飾詞不太一樣，其名稱以 js- 作為前輟（而不是修飾詞的減號符號）。

<!-- ✓ 請這麼做 -->
<button class="ts js-reply -large button"></button>

<!-- ✖ 別這樣 -->
<button class="ts -js-reply -large button"></button>

CSS 選擇器

當撰寫 CSS 選擇器的時候，請直接指定樣式名稱而不是採用標籤作為選擇的重點。這能夠讓你的選擇器看起來更明瞭與簡潔，且不需要猜測其標籤元素的用意。

/* ✓ 請這麼做 */
.comment-container > .comment-item .avatar

/* ✖ 別這樣 */
.comment-container > .comment-item > figure > img

 

Tocas 規範

Tocas UI 在設計元件名稱與用法時所該遵循的注意事項和風格。

元件

元件是一個最上層的容器（像是：按鈕、選單、清單），其底下可能會有其他元件。一個元件的命名方式以小寫為主，中間不應安插任何符號。元件的名稱必須為一個單字。

<!-- ✓ 請這麼做 -->
<button class="ts button"></button>

<!-- ✖ 別這樣 -->
<button class="ts-button"></button>

修飾詞

任何更改元件的樣式、點綴都被稱作為「修飾詞」，所有的修飾詞都以 -（減號）作為開頭符號，遇到單字時再次透過 -（減號）作為分隔符號且不可有任何空白於其中，這讓你能夠一眼就看出來哪些字詞相互關聯。

修飾詞應該盡可能地保持在兩個單字以內，避免過長而造成閱讀不易。

<!-- ✓ 請這麼做 -->
<button class="ts -large -left-aligned button"></button>

<!-- ✖ 別這樣 -->
<button class="ts large left aligned button"></button>

子項目

當元素是某個合集（如：清單、選單、導航列）的項目時，沒有必要重新聲明這個項目屬於誰，這能夠大幅度減少 HTML 的重複與混濁度。子項目的命名方法與元件相同。

<!-- ✓ 請這麼做 -->
<div class="ts menu">
    <div class="item"></div>
</div>

<!-- ✖ 別這樣 -->
<div class="ts menu">
    <div class="menu-item"></div>
</div>

正因為子項目的命名方式與元件相同，因此子項目只能有一個單字作為名稱。在最壞的情況以下方範例來說，也能夠採用 subheader（不分大小寫與不帶分隔符號）作為命名的最終手段，但盡可能地不要將兩個單字混參著一起使用。

<!-- ✓ 請這麼做 -->
<div class="ts header">
    <div class="description"></div>
</div>

<!-- ✖ 別這樣 -->
<div class="ts header">
    <div class="sub header"></div>
</div>

語意與顏色

頁面上不應該充滿一堆顏色，請記住一點：「當所有事情都被凸顯，所有事情都將顯得不重要」，為此 Tocas UI 中也沒有顏色樣式，因為語意才是最重要的。將顏色以語意命名能夠限制你所使用的方式、避免濫用且導向正軌。

透過「負面的」、「警告的」來命名顏色，而不是「紅色」、「黃色」，這令你能夠替換樣式佈景的時候而不會因為改了顏色卻繼續使用像「黃色」這種制式名稱而有所不符。

<!-- ✓ 請這麼做 -->
<button class="ts -negative button"></button>
<button class="ts -warning button"></button>

<!-- ✖ 別這樣 -->
<button class="ts -red button"></button>
<button class="ts -yellow button"></button>

響應式可見詞

在 Tocas UI 中不會有任何的全域裝飾詞，唯一例外的是響應式可見詞。響應式可見詞是 Tocas UI 中唯一能夠套用到任何元件的樣式，這能夠切換某個元件出現的實機（例如：僅在手機出現），而這也被稱作為響應式設計（Responsive Design）。

響應式可見詞的命名方式為 _（底線）開頭，而單字之間仍保持以 -（減號）分隔。

<!-- ✓ 請這麼做 -->
<button class="ts _mobile-only -large button"></button>

<!-- ✖ 別這樣 -->
<button class="ts -large -mobile-only button"></button>
<button class="ts -large button" data-rwd="mobile only"></button>

網格尺寸

網格系統的寬度尺寸命名方式一直是 Tocas UI 1 與 2.x 中最為聒噪的一部分，而在新的 3.0 中，這也將被改善。其用法類似於裝飾詞皆以 -（減號）作為開頭，但將英文數字轉換成正統的阿拉伯數字，並且縮短了樣式名稱。

<!-- ✓ 請這麼做 -->
<div class="ts grid">
    <div class="-mobile-3 -widescreen-10 column"></div>
</div>

<!-- ✖ 別這樣 -->
<div class="ts grid">
    <div class="-three-wide-mobile -ten-wide-large-screen column"></div>
</div>

有限度縮寫

在 Tocas UI 中可以使用縮寫，但不應該過度縮寫（因此這也被稱為有限度縮寫）。

| 全名 | 縮寫 | 含意 | 可供採用 |
|-------------------------- |------------ |------------ |---------- |
| left、right | l、r | 左、右 | ✖ |
| vertical、horizontal | x、y | 垂直、水平 | ✖ |
| x wide device | device-x | 裝置寬度 | ✓ |

 

🎨 CSS 💣 大型異動 🔄 規則變更 🚨 高優先度
Source
picture YamiOdymel
👍6 🎉3 ❤1

All 7 comments

我只覺得更難懂。

pan93412 picture pan93412 on 9 Nov 2018
😕4 👎2 😄1

想知道3.0是否有網站範例或說明文件可查看

city8208 picture city8208 on 9 Nov 2018

@city8208 目前 Tocas UI 3.0 還在奠定當中，還沒有已經上線的網站或文件可以參閱。

從 https://github.com/TeaMeow/TocasUI/milestone/14 可以知道 Tocas UI 3.0 會追加還有修復什麼功能。

YamiOdymel picture YamiOdymel on 9 Nov 2018

好的，因為我這邊規畫要做一套可以串接Mysql/Mssql/ERP SAP/HANA的ERP串接工具
目前已經做PHP的部分，打算開始做ASP的版本(之後也會在Git上public共享)
所以想確認3.0版本的完成時間

city8208 picture city8208 on 9 Nov 2018

更新：我漏看舊有問題的段落了，抱歉

但我覺得原本的可讀性很高
如果是類似 -3-wide-mobile 這種寫法呢？

--
我覺得有點偏離 Semantic UI 精神

-mobile-3 -widescreen-10 這種寫法
跟 Bootstrap 式的命名法想法上應該比較接近？
例如 Bootstrap 4 的 col-lg-2

goodjack picture goodjack on 9 Nov 2018

@city8208 預計應該是 12 月初完成。

@goodjack 確實，那部分我還有在思考要怎麼命名。

因為如果單純用 -mobile-3 的話，會沒辦法用上全域寬度（例如：-wide-3 很不直覺）。

Foundation 的做法是直接以 -mobile-3 當作全域寬度的用法，就是說如果你希望所有裝置都是 3 格寬，那麼就直接用 -mobile-3。

因為這樣看起來也不太直覺，所以我也有想過照樣沿用舊的命名方式（例如：-3-wide-mobile），這樣的話就可以在不需要指定裝置的時候用上 -3-wide。

然後同時將 large screen 更改名稱為 widescreen，這樣就能用上 -3-wide-widescreen 而不是 -3-wide-large-screen 所以看起來就不會被分很多段，不過 wide-widescreen 看起來有點贅詞。

（_widescreen 在 Semantic UI 裡面是比起 large screen 還要大的螢幕裝置，但是 Tocas UI 本來就沒有加入 widescreen 的支援_）。

編輯：順便說一下現在 TSCSS 命名面臨到的另一個問題。

通常來說在舊有的 Tocas UI 中會用到像是 top left corner button（靠左上的角落按鈕），但是在 TSCSS 中…應該是 -top-left -corner button　還是 -top-left-corner button 呢…。

雖然說前者應該會比較好點，但基於 -right-floated 的時候，位置是跟後面單字黏在一起的，看起來好像也不得不用 -top-left-corner。

這個問題同樣發生在 -secondary -opinion button（或 -secondary-opinion button）。

YamiOdymel picture YamiOdymel on 9 Nov 2018 
<!-- ✓ 現在是這麼做 -->
<div class="ts cards">
    <div class="ts card"></div>
</div>

<!-- 🤔 該這樣ㄇ -->
<div class="ts cards">
    <div class="card"></div>
</div>
gnehs picture gnehs on 10 Nov 2018
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

goodjack picture goodjack  ·  5Comments
racterub picture racterub  ·  4Comments
YamiOdymel picture YamiOdymel  ·  5Comments
gnehs picture gnehs  ·  4Comments
MiliChang picture MiliChang  ·  6Comments