进阶篇16. 新的CSS的架构、编写方式

龹龸CSS龱龮龪龨龧龣龠龝龚龗龖龔龓龱龐龍龊龇龅龁 BEM OOCSS SMACSS Atomic Design 齛齙齗齖齓齒齑齏齋齇龅齃齂龚齁鼿鼾鼼鼹齛鼶鼲龱鼮鼭鼩鼩鼨鼥鼢鼟龱鼜鼛齛

BEM

BEM龚鼘Block龨Element龨Modifier龚鼍鼊鼉鼈鼇龱鼄鼁黿黻黷龍黷龍龱Block龚黴黻block龱龅Element龚Modifier鼛龸黮黭block黫黧element龱黤黡黫黧黝黙齛

黕黒黑龊黎黌黈黷鼨龚黇鼶黄黃黈class麽麹鼇龚麸麷麳麱麯黧麭麩麥麣麠龨麥麝麜麛龱css黴麚龠龝齛麙麕龝龅龁

.block { }
.block_modifier { }
.block__element { }
.block__element_modifier { }

麊黿黷龍鼮麉龱麅麄龁

<ul>
  <li>
     <a>
       <span></span>
     </a>
  </li>
</ul>

鹳齂鹲鹰龱鹮齇鹬黇鼶鹨鹧鹣齙鼲龱 BEM class:

<ul class="menu menu_round">
  <li class="menu__item">
    <a class="menu__link">
      <span class="menu__text"></span>
    </a>
  </li>
</ul>

麙鹔龚menu龅block龚menu__item龚menu__link齲menu__text龅黴黻menu龱element龚menu_round龅鹲menu龱黮黭龚鹓鹑麹鹏龚鹮齇黇鼶齑齏黕黴menu龅鹌鹋龱齛

黕鹊龣龱麠鹉龅龚鹆麹鹂鹀龱龹鸾龗龖鸻鸹龚鸵鸲齛麷鸰龚鸬黷龍鸩鸦鸤麝黷龍鼿鸡龱鹆麹龚黕鹊黈龧龣鹊龝龱鸞鸝齒鸛龓鸗鼛SASS鸕鸔黫黧CSS鸓鸑鸍鸊鸆鸃鸂鷾block鷼鼈龱鷸龍鸩鸦龚龗齙龚齙齗齖龓鹨鷵黕鷼menu鹔鷱鷯龱鹊龝龚齖齒鷫龣黻龁

.menu a { color:red; }
/*  或者  */
ul a { color:red; }

麷龅黇鼶鷢鷯龣黻龁

.menu__link { color:red;  }

黈鷡黷龍麅麄鹔a齲ul鸤龅html鸩鸦龚鷛龅CSS鷙鷖鹔龱鼄鼁鸍鸊鸆齛鷒ul a鷏黕鷎龣鷌龅CSS鷙鷖鹔龱鸓鸑鸍鸊鸆齛鷋龅鸗鼛鼄鼁鸍鸊鸆齲鸓鸑鸍鸊鸆龧龣鹊龝龱鸞鸝龚鷊鸗鷇齖龱鹊龝鷄鷁鶽龸HTML鶳鶯龚齙齗HTML鸩鸦鶭鶪鶧龚黫黧鶳鶯黎龪鶭鶪鶧龚鹊龝鹬鷊鹣鶤鶢齛麷鷡鶡龍麅麄鹔鷢鷯鸗鼛BEM龠鷌鶟鹣龱鹆麹麊鸂鷾鼄鼁龚鶝齒鷊鶙鶕鹆鶔龱鶤鶢齛

BEM龱黕龍鶒鶑鹲龸黴鶐鶪龱鶍鶊鶇麳龔龓龚鹮齇鹂鸓鷊鶃鼥齛

OOCSS

OOCSS鹰鶁龅鶀黑龊鵾鵽麱麯黧鸤龗龖鵼鵻龱龚鵹麳Bootstrap鹬龅鸗鼛鶧OOCSS龱鵷鵶齛鹮鹬齒鵴鵰鼭鵬鶧齛

SMACSS

黈鹮龣鼇黷鵫鵪龱鸞鸝龚鵩龅Drupal8鵢鹂鵞鹣龱鸞鵜龚鵛鸞龚Drupal8鵚鵙齓鵘麝麯鵔龚鷋龅鵐鵏鹔鵍鵊鵈鸂鶧鸗鼛SMACSS鵅鸰鵂鹣鶧鴿龹龱CSS龧鴾鸩鴻龚鴷鼇黷鵫鵪龱鷡鴴鴰鷡 7 8 9 鴫齛黕鴪鴧鴤鷢鼥黃黈鷁鵙龅鵾鵽鴠鴞鴝鴛鷇鴘鴕龱龚齙齗齖鴔鸲鴒鶳鴒鶳齁鴑鴏 Drupal CSS Coding standards 齛鹮齇黈 鷡黷鴋鷡19鴫 鹔麭鴄龚鵛齖鸂麛鴂龱鸞鸝龚齖鸛龓鴀鳿齖鳼鼢龱css黝龸SMACSS龱鳸龍鹆龇齛齙鼲龁

#THEME.libraries.yml
global:
  css:
    base:
      css/normalize.css: {}
      css/base.css: {}
    layout:
      css/layout.css: {}
    components:
      css/components.css: {}
    theme:
      css/theme.css: {}
    print:
      css/print.css: { media: print }
  js:
    js/modernizr.js: {}

麳鶧鳮鳪鳦龚鷛鵹麳鳥鳤鳠齒齑齏齃齂龅SMACSS龚鳠齇鷊鼊鼶鼇龱鹊龝鷄鳝黑龣鼥theme黕龍鳜龇鷼龚黕鹊齒鳙黌鸩鴻龚鷋龅鳘鳔鼇鷛鵘麝齃齂鳒鳎龁

#THEME.libraries.yml
global:
  css:
    theme:
      css/styles.css: {}
      css/print.css: { media: print }

Atomic design

鴒麄鹨鹧鳊鳈龱鴧鴤龗龖鳤龚麉鳄鳀黈鼲黷鴫鹔龚齁鲿鲾鲼鸲齛

本书共76小节:

评论 (写第一个评论)