眾所周知的是，頁面的樣式渲染是由CSS來完成的。例如：width:100px;代表元素寬度為100畫素；height:50px;代表元素高度為50畫素；font-size:15px;代表元素中字型大小為15畫素；下面一段就是標準的CSS語句：
.css1 { width:100px; height:100px; line-height:100px; background:#ff0; }
上面的CSS程式碼，代表一個寬、高、行高為100px，並且背景色為黃色的方框元素，那麼，用Yus如何來實現上述CSS程式碼的功能呢，先直接給出例子：
<div class="us-w-100 us-h-100 us-lh-100 uc-bg-ff0"></div>
解釋如下：
us-w-100，代表寬度為100畫素，即：width:100px;
us-h-100，代表高度為100畫素，即：height:100px;
us-lh-100，代表行高為100畫素，即：line-height:100px;
us-bg-ff0，代表背景色為#ff0黃色，即：background:#ff0;
由於在Yus中，數值相同的情況下，中間的屬性可以用逗號分隔連續書寫，所以上邊的程式碼可以精簡為：
<div class="us-w,h,lh-100 uc-bg-ff0"></div>
US指令說明
| 專案 | 描述 |
| 語法 | 指令由三部分部分，第一部分us宣告尺寸指令，第二部分為引數屬性縮寫，第三部分為數值。 示例：us-屬性引數-數值。 |
| 屬性引數 | 是CSS屬性的縮略寫法，如w代表width，m代表margin，詳情參見下列《屬性引數列》 |
| 數值 | 數值為正數的情況下直接書寫，數值為負數的情況下，用ms或^符號來代替。 示例：us-t-ms100或us-t-^100 |
| n | 向下延伸層級，例如n為3時，影響第三代子元素，即children().children().children() |
| 單位 | 數值如果不帶單位的情況下，預設使用px畫素單位，us指令支援的尺寸單位包括px，pt，em，cm，vw，vh，vmin，vmax等，百分比可以使用%符號或pr |
屬性引數列
yus將css常用屬性簡單的劃分為兩大類，即尺寸、顏色。yus認為所有px，pt，em，cm，vw，vh或者百分比符號%，都是尺寸的計量單位，可以使用us命令進行渲染，下表列出所有尺寸單位涉及到的屬性引數：
| 屬性引數 | 示例 | CSS寫法 | 功能描述 |
| w | us-w-500 | {width:500px;} | 元素寬度，如果作用在<span>或<li>等標籤上，需要首先新增block或inline樣式，而這些class樣式是yus系統自帶的《內嵌樣式》，直接書寫呼叫即可。 例如： <span class="block us-w-300">或<li class="inline us-w-300"> |
| h | us-h-20vh | {height:20vh;} | 元素高度 說明一下vw、vh，vmin，vmax幾個尺寸單位，1vw等於視窗寬度的1%，1vh等於視窗高度的1%，vmax視窗寬度或高度相對大的，vmin視窗寬度或高度相對小的。 |
| lh | us-lh-30 | {line-height:30px;} | 文字行高 |
| fs | us-fs-15 | {font-size:15px;} | 文字大小 |
| t | us-t-10vh | {top:10vh;} | 上方距離，設定頂端距離的元素，必須同時設定position位置屬性，使用內嵌class樣式自帶的poa、por、pof都可以，參考 《內嵌樣式》。 |
| r | us-r-10 | {right:10px;} | 右側距離，需設定position位置屬性。 |
| b | us-b-10 | {bottom:10px;} | 下方距離，需設定position位置屬性。 |
| l | us-l-10 | {left:10px;} | 左側距離，需設定position位置屬性。 |
| m | us-m-2em | {margin:2em;} | 元素外邊距，此示例代表元素外邊距為2個字元。 CSS中margin屬性可以這些書寫：{margin:2cm 4cm 3cm 4cm;}或{margin:10px 5px;}。Yus同樣也支援這種書寫方式，只是在格式上稍有區別，同時對us-，uc-指令不再敏感。 例如： us-m-[2cm 4cm 3cm 4cm]或us-m-[10px 5px] |
| mt | us-mt-8 | {margin-top:8px;} | 元素上方外邊距。 |
| mr | us-mr-8 | {margin-right:8px;} | 元素右側外邊距。 |
| mb | us-mb-8 | {margin-bottom:8px;} | 元素下方外邊距。 |
| ml | us-ml-8 | {margin-left:8px;} | 元素左側外邊距。 |
| p | us-p-8px | {padding:8px;} | 元素內邊距。 |
| pt | us-pt-8 | {padding-top:8px;} | 元素上方內邊距。 |
| pr | us-pr-8 | {padding-right:8px;} | 元素右側內邊距。 |
| pb | us-pb-8 | {padding-bottom:8px;} | 元素下方內邊距。 |
| pl | us-pl-8 | {padding-left:8px;} | 元素左側內邊距。 |
| bw | us-bw-1 | {border-width:1px;} | 邊框寬度，設定元素邊框寬度，必須同時設定元素邊框的線型，例如：solid或dotted，內建線型class樣式參見 《內嵌樣式》。 |
| bt | us-bt-1 | {border-top-width:1px;} | 邊框上方寬度。 |
| br | us-br-1 | {border-right-width:1px;} | 邊框右側寬度。 |
| bb | us-bb-1 | {border-bottom-width:1px;} | 邊框下方寬度。 |
| bl | us-bl-1 | {border-left-width:1px;} | 邊框右側寬度。 |
| ra | us-ra-5 | {border-radius:5px;} | 元素邊框圓角。 |
| ls | us-ls-5 | {letter-spacing:5px;} | 元素字母間距。 |
| ti | us-ti-2em | {text-indent:2em;} | 段落首行文字縮排，例子中為縮排兩個字元。 |
| ws | us-ws-5 | {word-spacing:5px;} | 文字間距。 |
| ow | us-ow-2 | {outline-width:2px;} | 元素周圍輪廓線的寬度。 |
| oo | us-oo-5 | {outline-offset:5px;} | 輪廓線偏移量。 |
| xw | us-xw-500 | {max-width:500px;} | 設定最大寬度。 |
| nw | us-nw-500 | {min-width:500px;} | 設定最小寬度。 |
| xh | us-xh-500 | {max-height:500px;} | 設定最大高度。 |
| nh | us-nh-500 | {min-height:500px;} | 設定最小高度。 |
| va | us-va-5 | {vertical-align:5px;} | 設定元素的垂直對齊方式，注意此處只可以使用數值，如top、middle等值的寫法，下面另外說明。 |
| cp | us-cp-5 | {grid-column-gap:5px;} | 定義網格佈局中，列間隙的大小。 |
| rp | us-rp-5 | {grid-row-gap:5px;} | 定義網格佈局中，行間隙的大小。 |
| gap | us-gap-5 | {grid-gap:5px;} | 定義網格佈局中，行與列間隙的大小。 |
| z | us-z-10 | {z-index:10;} | 設定元素的堆疊順序。 |
| fw | us-fw-700 | {font-weight:700;} | 設定文字的粗細，其中數值700等價於bold。 |
| opa | us-opa-0.5 | {opacity:0.5;} | 設定元素的不透明級別。 |
| o | us-o-5 | {order:5;} | 設定彈性盒物件元素的順序。 |
| g | us-g-3 | {flex-grow:3;} | 設定或檢索彈性盒子的擴充套件比率。 |
| s | us-s-2 | {flex-shrink:2;} | 設定flex元素的收縮規則。 |
| fb | us-fb-80 | {flex-basis:80px;} | 設定彈性專案的初始長度。 |
| f | us-f-1 | {flex:1;} | 設定或檢索彈性盒模型物件的子元素如何分配空間。 |