CSS - 架構

MaintainableCSS

1. 原子類幾乎只有比行內樣式少寫幾個字符這一個優勢，缺點卻是一堆，最好別用
2. 一味追求 「永遠不要重複一樣的事情兩次」 會致使過分思考和過分設計，最終出現原子類
3. 用 ID 設置樣式很差，ID 應該用在表單字段、hash、ARIA 等特殊用途上
4. 使用.<module>[-<component>][-<state>] {}這種體現模塊和組件的命名方式
5. 建立可複用的模塊
6. 修改器用於在覆蓋樣式時使用，用來爲元素的不一樣狀態設置樣式
7. 全局 CSS 放在單獨的文件及，由於它不屬於任何模塊
8. 最終加載的 CSS 要限制在 31 個，由於多出來的 CSS 文件 IE9 會忽略掉，而且少的 CSS 文件能夠減小網絡請求

Code Guide by @mdo

CSS 屬性聲明順序：

• 首先是位置由於它跟文檔流相關，而且能夠覆蓋盒模型的樣式
• 其次是盒模型，聲明組件的尺寸和放置
• 最後是組價內部的，不會影響位置和盒模型的樣式

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

jareware/css-architecture

1. 用 class 不要用 ID 和元素選擇器。
2. 組件和樣式放在同一文件夾（好找）。
3. 一致的 class 命名app-Component-class。
4. 命名空間和文件名對應。
5. 防止組件內樣式向外泄露：class 加上命名空間防止組件內樣式泄露到外面。
6. 防止組件內樣式向內泄露：用 class 不要使用元素選擇器，若是想用元素選擇器要加上 > 限定。
7. 防止外部樣式進入組件：用權重比外部樣式高的樣式重置全部元素的樣式（會致使有用的外部樣式也被重置），all: initial，Shadow DOM，<iframe>。
8. 尊重組件的邊界，不要修改組件 「內」 的樣式。對於組件 「內」 的可繼承樣式，能夠設置在父元素讓組件繼承。
9. 鬆散地集成外部樣式：讓本身的 class 繼承外部樣式，不要給元素設置外部樣式的 class 使用樣式。

rscss

組件

最少兩個字符，用-分隔。

• A like button (.like-button)
• A search form (.search-form)
• A news article card (.article-card)
• A namespaced component (.rico-custom-header)

有的組件能夠用一個單詞就表示，這時能夠加後綴使它更清晰。

block-level element:

• .alert-box
• .alert-card
• .alert-block

Or for inlines:

• .link-button
• .link-span

元素

避免標籤選擇器。

儘可能使用>子元素選擇器，而不是後代選擇器。

儘可能一個單詞，多個單詞不要用橫線和下劃線連接，例如：

.profile-box {
  > h3    { /* ✗ avoid */ }
  .title     { /* okay */ }
  > .author  { /* ✓ better */ }
  
  > .firstname { /* ... */ }
  > .lastname { /* ... */ }
  > .avatar { /* ... */ }
}

變體

變體由橫線開頭。

.like-button {
  &.-wide { /* ... */ }
  &.-short { /* ... */ }
  &.-disabled { /* ... */ }
}
.shopping-card {
  > .title { /* ... */ }
  > .title.-small { /* ... */ }
}

橫線開頭的好處：

• 避免和元素弄混
• CSS 類名只能是-和_開頭
• 容易打
• 像 UNIX 命令的開關 (gcc -O2 -Wall -emit-last)

組件嵌套

不要進入組件修改樣式，而是使用變體。

不要這樣：

.article-header {
  > .vote-box > .up { /* ✗ avoid this */ }
}

要這樣：

<div class='article-header'>
  <div class='vote-box -highlight'>
    ...
  </div>
  ...
</div>

.vote-box {
  &.-highlight > .up { /* ... */ }
}

推薦使用繼承進行簡化。

不推薦：

<div class='search-form'>
  <input class='input' type='text'>
  <button class='search-button -red -large'></button>
</div>

推薦：

<div class='search-form'>
  <input class='input' type='text'>
  <button class='submit'></button>
</div>

.search-form {
  > .submit {
    @extend .search-button;
    @extend .search-button.-red;
    @extend .search-button.-large;
  }
}

佈局

由於組件會用在各類上下文，所以要避免使用：

• Positioning (position, top, left, right, bottom)
• Floats (float, clear)
• Margins (margin)
• Dimensions (width, height) *

上述 CSS 屬性應該設置在父元素，例如：

.article-list {
  & {
    @include clearfix;
  }

  > .article-card {
    width: 33.3%;
    float: left;
  }
}

.article-card {
  & { /* ... */ }
  > .image { /* ... */ }
  > .title { /* ... */ }
  > .category { /* ... */ }
}

輔助類

下劃線開頭，用來覆蓋某些屬性。不建議多用！

._unmargin { margin: 0 !important; }
._center { text-align: center !important; }
._pull-left { float: left !important; }
._pull-right { float: right !important; }

文件結構

一個文件一個組件，能夠 @import 'components/*'; 這樣引入所有組件的樣式。

最多使用一層嵌套，這樣可讀性好。

/* ✗ Avoid: 3 levels of nesting */
.image-frame {
  > .description {
    /* ... */

    > .icon {
      /* ... */
    }
  }
}

/* ✓ Better: 2 levels */
.image-frame {
  > .description { /* ... */ }
  > .description > .icon { /* ... */ }
}

RSCSS、BEM、SMACSS 名詞對比

RSCSS	BEM	SMACSS
Component	Block	Module
Element	Element	Sub-Component
Layout	?	Layout
Variant	Modifier	Sub-Module & State

ITCSS

ITCSS 表明_Inverted Triangle CSS_，它能夠幫助您組織項目 CSS 文件，從而能夠更好地處理（但並不老是易於處理）CSS 細節，例如全局命名空間，層疊和選擇器專注性。

ITCSS 的主要原則之一是將 CSS 代碼庫分爲幾個部分（稱爲_層_），這些部分採用倒三角形的形式：

• 設置（settings） –與預處理器一塊兒使用，幷包含字體，顏色定義等。
• 工具（tools） –全局使用的 mixins 和 functions。不要在前 2 層中輸出任何 CSS。
• 通用（generic） –重置（reset）或規範化（normalize）樣式，盒大小定義等。這是生成實際 CSS 的第一層。
• 元素（elements） –裸 HTML 元素（例如 H1，A 等）的樣式。這些帶有瀏覽器的默認樣式，所以咱們能夠在此處從新定義它們。
• 對象（objects） –定義未裝飾設計模式的基於類的選擇器，例如 OOCSS 的媒體對象。
• 組件（components） –特定的 UI 組件。這是咱們主要工做的地方，咱們的 UI 組件一般由對象和組件組成。
• 工具類（utilities） –工具類可以覆蓋三角形中以前發生的任何規則，例如：隱藏工具類。

倒三角形還顯示了選擇器表明的樣式在結果 CSS 中的排序方式：從通用樣式到顯式樣式，從低特定選擇器到高特定的選擇器（也不是很特定，由於不容許使用 ID），以及從普遍到局部。

ITCSS 與BEMIT 命名約定結合使用，使您能夠將更多精力放在解決前端挑戰上，而不用考慮名稱和樣式的位置。這是Xfive.co的main.scss

@import "settings.colors";
@import "settings.global";

@import "tools.mixins";

@import "normalize-scss/normalize.scss";
@import "generic.reset";
@import "generic.box-sizing";
@import "generic.shared";

@import "elements.headings";
@import "elements.hr";
@import "elements.forms";
@import "elements.links";
@import "elements.lists";
@import "elements.page";
@import "elements.quotes";
@import "elements.tables";

@import "objects.animations";
@import "objects.drawer";
@import "objects.list-bare";
@import "objects.media";
@import "objects.layout";
@import "objects.overlays";

@import "components.404";
@import "components.about";
@import "components.archive";
@import "components.avatars";
@import "components.blog-post";
@import "components.buttons";
@import "components.callout";
@import "components.clients";
@import "components.comments";
@import "components.contact";
@import "components.cta";
@import "components.faq";
@import "components.features";
@import "components.footer";
@import "components.forms";
@import "components.header";
@import "components.headings";
@import "components.hero";
@import "components.jobs";
@import "components.legal-nav";
@import "components.main-cta";
@import "components.main-nav";
@import "components.newsletter";
@import "components.page-title";
@import "components.pagination";
@import "components.post-teaser";
@import "components.process";
@import "components.quote-banner";
@import "components.offices";
@import "components.sec-nav";
@import "components.services";
@import "components.share-buttons";
@import "components.social-media";
@import "components.team";
@import "components.testimonials";
@import "components.topbar";
@import "components.reasons";
@import "components.wordpress";
@import "components.work-list";
@import "components.work-detail";

@import "vendor.prism";

@import "trumps.clearfix";
@import "trumps.utilities";

@import "healthcheck";

OOCSS

1. 結構與皮膚分開：着將重複的視覺特徵（例如背景和邊框樣式）定義爲單獨的 「皮膚」。
2. 容器和內容分開：減小使用位置相關的樣式，對象應該不管放在哪裏都看起來同樣。