Bem Study27. Doesn’t it cover 90% of your styling needs? Max Shirshin 14å¹´1月7æ—¥ç«æ›œæ—¥
Sassã¨BEM
SCSSファイルを整ç†ã—ç›´ã—ã¦ã„る時ã€ä¸€æ°—ã«BEMãªã‚¯ãƒ©ã‚¹ã‚’使ã£ã¦æ›¸ããªãŠã—ã¦ã‚„ã‚ã†ã‹ã¨ã‚‚考ãˆã¦ã„ãŸã€‚ã‘ã©é€”ä¸ã§Sassãªã‚‰SCSSファイルã®åˆ†å‰²ã¨ãã®ä¸ã§ã®å·¥å¤«ã«ã‚ˆã£ã¦BEMã®æ§‹é€ を表ç¾ã§ããã†ã¨æ„Ÿã˜ãŸã®ã§ã€ä»Šã¯ãã†ã„ã†æ–¹å‘ã§è©¦è¡ŒéŒ¯èª¤ã—ã¦ã„る。実際BEMã®ã‚¦ã‚§ãƒ–サイトã§ã‚‚ファイルシステムを使ã£ãŸBEMã®è¡¨ç¾æ–¹æ³•ã¨ã„ã†ä¼¼ãŸè©±ãŒæ›¸ã‹ã‚Œã¦ã„ã‚‹ã®ã§è’å”無稽ãªè€ƒãˆã§ã¯ãªã•ãã†ã€‚ SCSSファイルåã§blockã‚’è¡¨ç¾ ãã®ä¸ã§placeholder selectorを使ã£ã¦elementã¨modifierã‚’è¡¨ç¾ å¤–ã‹ã‚‰ã¯ã“ã®placeholder selectorã¯ä½¿ã‚ãªã„ æ—¢å˜ã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—を利用ã—ãŸã‚»ãƒ¬ã‚¯ã‚¿ãƒ¼ã‹ã‚‰@extendã§BEMæ§‹é€ ã‚’é–¢é€£ä»˜ã‘ HTMLファイルã§ã¯BEMãªã‚¯ãƒ©ã‚¹ã¯æŒ¯ã‚‰ãªã„ å¿…è¦ãªå ´åˆã¯ã‚·ãƒ³ãƒ—ルãªã‚¯ãƒ©ã‚¹ã‚’振る イメージã¯ã“ã®ã‚ˆã†ãªæ„Ÿã˜ã€‚HTMLã§ã®ãƒžãƒ¼ã‚¯ã‚¢ãƒƒãƒ—ã®ç°¡æ½”ã•ã¯ç¶æŒã§
BEMã¨ã„ã†å‘½åè¦å‰‡ã¨Sass 3.3ã®æ–°ã—ã„記法 - アインシュタインã®é›»è©±ç•ªå·
BEMを使ã£ãŸå‘½åãŒã¨ã¦ã‚‚明快ã§ã€ã“ã®ã¨ã“ã‚HTMLã‚„CSSを書ãã®ã«ã‚ˆã使ã£ã¦ã„る。CSSã®ã‚¯ãƒ©ã‚¹åã¨ã—ã¦æ›¸ãå ´åˆã¯ã€BEMã‚’CSS用ã«ä½¿ã„ã‚„ã™ãã—ãŸMindBEMdingã¨ã„ã†æ›¸ã方を採用ã—ã¦ã„る。最åˆã«ã“れを知ã£ãŸã¨ãã¯ã€Œã“ã‚“ãªæ±šã„記述ã®ä»•æ–¹ã¯ä½¿ã„ãŸããªã„ã€ã¨æ€ã£ã¦ãŸã‚“ã ã‘ã©ã€ã™ã£ã‹ã‚Šæ…£ã‚Œã¦ã€ä»Šã§ã¯ãã®æ˜Žå¿«ã•ã«ã¡ã‚‡ã£ã¨å¿ƒé…”ã—ã‹ã‘ã¦ã„ã‚‹ã»ã©ã€‚ BEMã®æ–¹æ³•è«–ã¨MindBEMdingã®ãƒ«ãƒ¼ãƒ«ã«ã¤ã„ã¦ã¯ãã‚Œãžã‚Œã®æ–‡æ›¸ã‚’èªã‚“ã§ã‚‚らã†ã¨ã—ã¦ã€ãれらをã²ã£ãã‚‹ã‚ã¦å¤§é›‘把ã«èª¬æ˜Žã™ã‚‹ã¨ã€BEMã¨ã¯Blockã€Elementã€Modifierã®é æ–‡å—ã‚’å–ã£ãŸã‚‚ã®ã§ã€æ§‹æˆã™ã‚‹è¦ç´ ã‚’ãã®ã©ã‚Œã‹ã«å½“ã¦ã¯ã‚ã¦å‘½åã—ã¦ã„ã方法。ã©ã®å ´åˆã§ã‚‚å¿…ãšBlockã‚‚ã—ãã¯ãã®ModifierãŒãƒ«ãƒ¼ãƒˆã«ã‚ã‚Šã€ãã®ä¸ã«ã€æ‰€å±žã™ã‚‹Elementã‚‚ã—ãã¯ãã®ModifierãŒå«ã¾ã‚Œã‚‹æ§‹æˆã«ãªã‚‹ã€‚ Block - 構æˆã®ãƒ«ãƒ¼ãƒˆã¨ãª
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
処ç†ã‚’実行ä¸ã§ã™
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
{{#tags}}- {{label}}
{{/tags}}