FLOCSSを使ã£ã¦CSSファイルを20,000è¡Œã‹ã‚‰9,000è¡Œã«ã—ãŸè©± - Qiita
入社ã—ã¦åƒ•ãŒæœ€åˆã«ã‚¢ã‚µã‚¤ãƒ³ã•ã‚ŒãŸã®ãŒã“ã®ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã€‚ サービスをスタートã•ã›ãŸã®ã¯ä»Šå¹´ã®ï¼’月。最åˆã¯å¤–注ã§ã¨ã‚Šã‚ãˆãšã‚µãƒ¼ãƒ“スを作るã“ã¨ã«é›†ä¸ã—ã¦ã„ãŸã‚‰ã—ã„... ãã®çµæžœã€ã©ã®ã‚¹ã‚¿ã‚¤ãƒ«ãŒã©ã“ã«ä½œç”¨ã™ã‚‹ã‹å…¨ã分ã‹ã‚‰ãªã„CSSã®é”境ã§ã—ãŸã€‚ ã“ã‚Œã§ã¯ç°¡å˜ãªãƒšãƒ¼ã‚¸ã‚’è¿½åŠ ã™ã‚‹ã«ã‚‚一苦労。 ãã“ã§ã€20,000è¡Œã‚ã‚‹CSSファイルã®ãƒªãƒ•ã‚¡ã‚¯ã‚¿ãƒªãƒ³ã‚°ã«è¸ã¿åˆ‡ã‚Šã¾ã—ãŸã€‚ 当時ã®å•é¡Œ スタートアップã®ã‚µãƒ¼ãƒ“スãªã®ã§ã‚‚ã£ã¨æ©Ÿèƒ½ã‚’è¿½åŠ ã—ãŸã‚Šã€å¤‰æ›´ã—ãŸã‚Šã—ãŸã„ã¨è¨€ã†è¦æœ›ã¯æ—¥ã«æ—¥ã«å¤§ãããªã£ã¦ã„ã¾ã—ãŸã€‚ 一方ã§ã€å®Ÿéš›ã«æ©Ÿèƒ½ã‚’作ã£ãŸã¨ã—ã¦ã‚‚ãれを view ã«åæ˜ ã•ã›ã‚‹ã®ã‚‚æ—¥ã«æ—¥ã«è‹¦ã—ããªã£ã¦ã„ã¾ã—ãŸã€‚ 僕ãŸã¡ã‚’苦ã—ã‚ã¦ã„ãŸç†ç”±ã¯ä»¥ä¸‹ã®é€šã‚Šã§ã™ã€‚ ã©ã“ã«ã‚¹ã‚¿ã‚¤ãƒ«ãŒä½œç”¨ã—ã¦ã„ã‚‹ã‹åˆ†ã‹ã‚‰ãªã„ã®ã§ã€CSSを安易ã«å¤‰æ›´ãŒã§ããªã„。 æ–°ã—ã„部å“を付ã‘足ã™æ™‚ã«CSSã®å½±éŸ¿ç¯„囲を考慮ã—ãªãã¦ã¯ãªã‚‰ãšã€ãƒ—ãƒãƒ€ã‚¯ãƒˆã®UI変更ãŒå›°é›£
脱・CSS無法地帯。FLOCSSã§æŒ‡é‡ã®ã‚ã‚‹è¨è¨ˆã‚’。 - Qiita
#FLOCSSã®å°Žå…¥äº‹ä¾‹ã®å…±æœ‰ 2017å¹´ã®6月ã«ãƒªãƒ‹ãƒ¥ãƒ¼ã‚¢ãƒ«ã—ãŸè»¢è·ãƒŠãƒ“〠最も大変ã ã£ãŸäº‹ã®ä¸€ã¤ã¯FLOCSSã®å°Žå…¥ã§ã—ãŸã€‚ FLOCSS㯠命åè¦å‰‡ã«MindBEMdingを採用 ファイル・ディレクトリ構æˆã‚’定義 カスケーディングã¨è©³ç´°åº¦ã®ç®¡ç†æ–¹æ³•ã«ã‚‚è¨€åŠ ã¨ã„ã†ç‰¹å¾´ã‚’ã‚‚ã£ãŸã€CSSè¨è¨ˆæŒ‡é‡ã§ã™ã€‚ FLOCSSã®ãƒ‰ã‚ュメントã¯ä¸–ã«æ•°æœ‰ã‚‹ã‘ã‚Œã©ã‚‚導入事例や知見ãŒã‚‚ã†å°‘ã—欲ã—ã‹ã£ãŸãªã¨ã€‚ ã“ã¡ã‚‰ã®è¨˜äº‹ã§ã¯è»¢è·ãƒŠãƒ“ãŒFLOCSSã‚’å°Žå…¥ã—ãŸæ™‚ã®ãŠè©±ã‚’ã•ã›ã¦ã„ãŸã ãã¾ã™ã€‚ ãã‚‚ãも「CSSè¨è¨ˆã£ã¦ãªã‚“ã‚„ãã‚“ã€ã£ã¦æ–¹ã¯ã€æ‰‹å‰å‘³å™Œã§ã¯ã”ã–ã„ã¾ã™ãŒã€ã‚ˆã‚ã—ã‘ã‚Œã°ã“ã¡ã‚‰ã®è¨˜äº‹ã‚’ã©ã†ãžã€‚ CSSè¨è¨ˆã‚’勉強ã™ã‚‹ãªã‚‰ã¾ãšã“れを見ãŸã‚‰è‰¯ã„ã‹ã‚‚ CSSè¨è¨ˆã§è§£æ±ºã—ãŸã‹ã£ãŸèª²é¡Œ ãã‚‚ãも転è·ãƒŠãƒ“ã®CSSè¨è¨ˆã‚’å†å®šç¾©ã™ã‚‹ã“ã¨ã§è§£æ±ºã—ãŸã‹ã£ãŸèª²é¡Œã¯ï¼’ã¤ã‚ã‚Šã¾ã™ã€‚ オレオレã«ãªã‚ŠãŒã¡ãªå‘½åè¦å‰‡ プレフィックス
Webサービス開発ã§ã®CSSè¨è¨ˆã‚’考ãˆã‚‹ - 人類ã¯CSSè¨è¨ˆã«æ•—北ã—ãŸã®ã‹ï¼Ÿ - - Qiita
AdventCalendar åˆæŠ•ç¨¿ã§ã™ã€‚ 人類ã¯ã¾ã 敗北ã—ã¦ã„ã¾ã›ã‚“（ãŸã¶ã‚“） BtoBtoCã®Webサービス開発を何回ã‹è¡Œã£ã¦ããŸçµæžœã€FLOCSSã¨ECSSを組ã¿åˆã‚ã›ãŸCSSè¨è¨ˆã«è½ã¡ç€ã„ãŸã®ã§ã€ãã®ãƒ‡ã‚£ãƒ¬ã‚¯ãƒˆãƒªæ§‹æˆã«è‡³ã‚‹ã¾ã§ã®çµŒç·¯ã¨ã€å®Ÿéš›ã®ã‚³ãƒ¼ãƒ‰ãƒ»å¤±æ•—談や良ã‹ã£ãŸã“ã¨ã‚’ã¾ã¨ã‚ã¾ã™ã€‚ Webサービスã®ãƒšãƒ¼ã‚¸æ§‹æˆ ページ数ã®å·®ã¯ã‚ã‚‹ã¨æ€ã„ã¾ã™ãŒã€ãŠãŠã‚€ã以下ã®ã‚ˆã†ãªãƒšãƒ¼ã‚¸æ§‹æˆã‚’ã¨ã£ã¦ã„ã‚‹ã®ã§ã¯ãªã„ã§ã—ょã†ã‹ã€‚ サービスページ（トップページやå„コンテンツ） マイページ ãã®ä»–ã®ãƒšãƒ¼ã‚¸ï¼ˆåˆ©ç”¨è¦ç´„ã€ãƒ—ライãƒã‚·ãƒ¼ãƒãƒªã‚·ãƒ¼ãªã©ï¼‰ ページã”ã¨ã«é©ã™ã‚‹è¨è¨ˆã‚’考ãˆã‚‹ サービス全体ã§ã²ã¨ã¤ã®CSSè¨è¨ˆã‚’é¸æŠžã™ã‚‹ã‚ˆã‚Šã‚‚ã€ãƒšãƒ¼ã‚¸ã®ç‰¹æ€§ã”ã¨ã«å…±é€šåŒ–ã™ã‚‹or共通化ã—ãªã„ã€ã¨ã„ã†æ–¹é‡ã‚’é¸æŠžã™ã‚‹ã“ã¨ã«ã‚ˆã£ã¦ã€ã‚¹ãƒ ーズãªã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ãŒã§ãã‚‹ã“ã¨ã«æ°—ã¥ãã¾ã—ãŸã€‚ サービスページ トップページや一覧ページã€è©³ç´°ãƒšãƒ¼ã‚¸ãª
æ ªå¼ä¼šç¤¾ãƒ„ナググループ・ホールディングス
人æã®ç¢ºä¿ãŒé›£ã—ã„時代ã«ã‚ã£ã¦ã‚‚〠ãã®çŠ¶æ³ã‚’鮮やã‹ã«ä¸€å¤‰ã•ã›ã‚‹ã‚«ãƒ¼ãƒ‰ã¯ ãã£ã¨ã‚る。 ç§ãŸã¡ã¯æ¥ç•Œã®ã‚¤ãƒ³ãƒ•ãƒ©ã¨ãªã£ã¦ ã•ã¾ã–ã¾ãªã‚µãƒ¼ãƒ“スを展開ã—〠採用シーンã®ã‚らゆる課題を 解決ã«å°Žãã¾ã™ã€‚ ãã®æ™‚々ã€ãã‚Œãžã‚Œã®å ´é¢ã§ 最善ã®ä¸€æ‰‹ã‚’考ãˆç¶šã‘〠先進的ã‹ã¤ãƒ¦ãƒ‹ãƒ¼ã‚¯ãª 人æ調é”・活èºæ”¯æ´ã‚µãƒ¼ãƒ“スã®åŠ›ã§ ã¤ãªãŒã£ãŸå…ˆã®æ™¯è‰²ã¾ã§æ”¯ãˆã¦ã„ãã¾ã™ã€‚
CSSã®è¨è¨ˆ – FLOCSSをベースã«ã—ãŸãƒ•ã‚¡ã‚¤ãƒ«ã®æ§‹æˆã¨å‘½åè¦å‰‡ã‚’考ãˆã‚‹ ｜ Tips Note by TAM
「ã©ã†ã‚„ã£ã¦ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ã‚’ã—ã¦çµ„ã¿ç«‹ã¦ã¦ã„ã“ã†ã‹ï¼Ÿã€ ã„ãã¤ã‚‚ã®æ¡ˆä»¶ã‚’経験ã—ã¦ã‚‚ã€ã„ã¤ã‚‚æ‚©ã‚“ã§ã—ã¾ã†ã®ãŒCSSã®æ›¸ãæ–¹ã§ã™ã€‚「ãã‚Œãªã‚‰è‡ªåˆ†ãªã‚Šã®è€ƒãˆã‚’ã¾ã¨ã‚ã¦ãƒ«ãƒ¼ãƒ«ã‚’作ã£ã¦ã—ã¾ãŠã†ã€ã¨è€ƒãˆã€CSSè¨è¨ˆã«é–¢ã™ã‚‹æƒ…å ±ã‹ã‚‰è‡ªåˆ†ãªã‚Šã«ã‚³ãƒ¼ãƒ‡ã‚£ãƒ³ã‚°ãƒ«ãƒ¼ãƒ«ã‚’作りã¾ã—ãŸã€‚ 今回ã®å†…容ã¯ç¤¾å†…勉強会ã§ç™ºè¡¨ã—ãŸã€ŒCSSã®ãƒ•ã‚¡ã‚¤ãƒ«æ§‹æˆã¨å‘½åè¦å‰‡ã€ã®è³‡æ–™ã‚’å†ç·¨ã—ãŸã‚‚ã®ã§ã™ã€‚ ã™ã¹ã¦ã®æ¡ˆä»¶å†…容ã§æœ€é©ãªæ–¹æ³•ã§ã¯ãªã„ã“ã¨ã‚‚ã‚ã‚‹ã¨æ€ã„ã¾ã™ã®ã§ã€1ã¤ã®è€ƒãˆæ–¹ã ã¨æ‰ãˆã¦ã„ãŸã ã‘ã‚‹ã¨ã‚ã‚ŠãŒãŸã„ã§ã™ã€‚ 詳ã—ã„コードやルールã¯GitHub（個人ã®ã‚¢ã‚«ã‚¦ãƒ³ãƒˆï¼‰ã‚’å‚ç…§ã—ã¦ãã ã•ã„。「使用ã—ã¦ã„るテンプレートã€ãƒªãƒ³ã‚¯å…ˆã®style.scssã§å®Ÿéš›ã®å…¨ä½“ã®æ§‹æˆãŒç¢ºèªã§ãã¾ã™ã€‚ 使用ã—ã¦ã„るテンプレート CSSコーディングルール CSSã¯å½±éŸ¿ç¯„囲ã®ç®¡ç†ãŒé›£ã—ã„ CSSã§é›£ã—ã„ã“ã¨ã®ã²ã¨ã¤ã¯ã€Œå½±éŸ¿ç¯„囲ã€ã‚’管ç†ã™ã‚‹ã“ã¨ã ã¨æ€ã„ã¾ã™ã€‚ クラスを追
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
FLOCSS vs ECSS – DesignChips – Medium
{{#tags}}- {{label}}
{{/tags}}