実践 ã‚ã‚“ã©ã†ãã•ããªã„ BEM - ダーシマ・ヱンヂニヤリングã“ã®è¨˜äº‹ã¯ BEM Advent Calendar 2013 ã®ï¼‘ï¼’æ—¥ã‚ã®è¨˜äº‹ã§ã™ã€‚ BEM ã¯å„ªã‚ŒãŸæ–¹æ³•è«–ã ã¨æ€ã†ãŒã€å¤§å¤‰ã‚ã‚“ã©ã†ãã•ã„ã“ã¨ã‚’å¼·ã„ã¦ãã‚‹ã“ã¨ãŒã‚る。ã“ã®è¨˜äº‹ã§ã¯ãã‚“ãªã‚ã‚“ã©ã†ãã•ã„ BEM ã‚’ã€å°‘ã—ã§ã‚‚ã‚ã‚“ã©ã†ãã•ããªã„ BEM ã«å¤‰ãˆã‚‰ã‚Œã‚‹ã‹ã©ã†ã‹ã‚’æ€ç´¢ã™ã‚‹ã‚‚ã®ã§ã‚る。ãªãŠã€ã‚ã‚“ã©ã†ãã•ããªãã™ã‚‹éŽç¨‹ã§ã€Œãã‚Œã¯æ—¢ã« BEM ã§ã¯ãªã€ããªã£ã¦ã„ã‚‹é¢ã‚‚ã‚ã‚‹ã¨æ€ã†ãŒã€ãã“ã¯æ‰¿çŸ¥ã®ä¸Šãªã®ã§å¿µé ã«ç½®ã‹ã‚ŒãŸã—。 CSS セレクターã«ã‚¿ã‚°ã‚’書ãã®ã¯æœ¬å½“ã«ãƒ€ãƒ¡ãªã®ã‹ 例ãˆã°ä»¥ä¸‹ã®ã‚³ãƒ¼ãƒ‰ãŒã‚る。 <section class="item-list"> <h1>アイテム一覧</h1> <ul> <li> ... </li> <li> ... </li> <li> ... </li> </ul> </section> 上記ã®ã‚³ãƒ¼ãƒ‰ã¯ã‚·ãƒ³ãƒ—ルãªã®ã§ã€å„è¦ç´ ã«ã‚¹ã‚¿ã‚¤ãƒ«ã‚’当ã¦ã‚‹ã¨ã—ãŸã‚‰ã“ã®ã‚ˆã†ãª
BEMã¨ã„ã†å‘½åè¦å‰‡ã¨Sass 3.3ã®æ–°ã—ã„記法 - アインシュタインã®é›»è©±ç•ªå·
{{#tags}}- {{label}}
{{/tags}}