at DevFest Tokyo 2016.
Modern CSS: architecture, future specs and build flow
at DevFest Tokyo 2016.
morishitterã®CSSã®æ›¸ã方（2016å¹´å¤ï¼‰ - morishitter blog
今ã€è‡ªåˆ†ãŒã©ã†ã‚„ã£ã¦CSSを書ã„ã¦ã„ã‚‹ã®ã‹ã«ã¤ã„ã¦ã¾ã¨ã‚る。 CSSを書ãå‰ã«ã™ã‚‹ã“㨠æŒè«–ã ãŒã€ã€Œãƒ‡ã‚¶ã‚¤ãƒ³ã®æ„図をæ£ç¢ºã«ç†è§£ã—ãŸä¸Šã§æ›¸ã‹ã‚ŒãŸCSSã¯ç ´ç¶»ã—ãªã„ã€ã¨æ€ã£ã¦ã„る。 ã—ã‹ã—ã€è‡ªåˆ†ã²ã¨ã‚Šã§ã‚µãƒ¼ãƒ“スを作るã¨ãよã†ãªã€ãƒ‡ã‚¶ã‚¤ãƒ³ã®æ±ºå®šæ¨©ã‚’æŒã¤äººã¨UI実装者ãŒåŒã˜ã§ã‚ã‚‹å ´åˆã‚’除ã„ã¦ã€ãƒ‡ã‚¶ã‚¤ãƒ³ã®æ„図をæ£ç¢ºã«ä¼ãˆã€ç†è§£ã™ã‚‹ã“ã¨ã¯é›£ã—ã„。 僕ãŒ1番時間を使ã†ã®ãŒã“ã®å·¥ç¨‹ã 。 今ã®ä»•äº‹ã§ã¯ãƒ‡ã‚¶ã‚¤ãƒŠãƒ¼ãŒSketchファイルを作æˆã—ã€ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢ãŒãれを元ã«å®Ÿè£…ã™ã‚‹ã€‚ Sketchファイルを開ãã€ã‚¢ãƒ¼ãƒˆãƒœãƒ¼ãƒ‰ã‚’ã²ãŸã™ã‚‰çœºã‚デザインã®çŸ›ç›¾ãŒãªã„ã‹ã‚’確èªã—ã€ã€Œãªãœã“ã®ã‚ˆã†ãªãƒ‡ã‚¶ã‚¤ãƒ³ãªã®ã‹ã€ã‚’質å•ã—ã¾ãる。 ã“ã“ã§è‰¯ã„質å•ã¨æ案をã™ã‚‹ãŸã‚ã«ã‚‚ã€ã‚¨ãƒ³ã‚¸ãƒ‹ã‚¢å´ã«æœ€ä½Žé™ã®ãƒ‡ã‚¶ã‚¤ãƒ³ã«å¯¾ã™ã‚‹çŸ¥è˜ãŒå¿…è¦ã ã¨æ€ã†ã€‚ 最近èªã‚“ã 本ã ã¨ã€ã€Œã¿ã‚“ãªã§ã¯ã˜ã‚るデザイン批評―目的é”æˆã®ãŸã‚ã®ã‚³ãƒ©ãƒœãƒ¬ãƒ¼ã‚·ãƒ§ãƒ³&コミュニケーション改善
CSSã®æœ€æ–°ä»•æ§˜ã¯ã“ã‚“ãªã«ã™ã”ã„ï¼ PostCSSプラグインã§æœªæ¥ã‚’å…ˆå–ã‚Š
ã©ã‚“ã©ã‚“進化ã—ã¦ã„ã‚‹CSS。コーディングãŒæ—ã‚‹æ–°ã—ã„プãƒãƒ‘ティや値を使ã„ãŸã„ã‘ã©ã€ãƒ–ラウザー対応ãŒâ€¦ã€‚ã§ã‚‚ã€CSS変æ›ãƒ„ール「PostCSSã€ã®ä¾¿åˆ©ãªãƒ—ラグインを利用ã—ãŸã‚‰ã€CSSã®æœ€æ–°ä»•æ§˜ã‚’心置ããªã使ãˆã¡ã‚ƒã†ãã†ã§ã™ã‚ˆã€‚ å‰ã«SitePointã§æ›¸ã„ãŸè¨˜äº‹ã€ŽThe PostCSS Guide to Improving Selectors and Media Queriesã€ã®èª¬æ˜Žã‹ã‚‰å¼•ã続ãã€CSSã®åˆ©ç”¨ç¯„囲を広ã’ã‚‹PostCSSプラグインを紹介ã—ã¾ã™ã€‚以å‰ã®è¨˜äº‹ã§ã¯ã‚»ãƒ¬ã‚¯ã‚¿ãƒ¼ã¨ãƒ¡ãƒ‡ã‚£ã‚¢ã‚¯ã‚¨ãƒªã‚’æ‹¡å¼µã™ã‚‹ã“ã¨ã§ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®æ§‹é€ 改善ã«ä¸»çœ¼ã‚’ç½®ãã¾ã—ãŸã€‚今回ã¯ã€æœ€æ–°ä»•æ§˜ã®ãƒ—ãƒãƒ‘ティや値ã®å®Ÿè£…ã‚’ä¸å¿ƒã«ç´¹ä»‹ã—ã¾ã™ã€‚記事ã§ç´¹ä»‹ã™ã‚‹ãƒ—ラグインã«ã¯ãã‚Œãžã‚Œç•°ãªã£ãŸæ©Ÿèƒ½ãŒå‚™ã‚ã£ã¦ãŠã‚Šã€ãƒ‹ãƒ¼ã‚ºã«å¿œã˜ã¦å˜ä½“ã§ã‚‚ã€çµ„ã¿åˆã‚ã›ã¦ã‚‚効果的ã«åˆ©ç”¨ã§ãã¾ã™ã€‚ ç§ãŒå€‹äººçš„ã«æ°—ã«å…¥ã£ã¦ã„ã‚‹ã‚‚ã®ã‹ã‚‰ç´¹ä»‹ã—ã¾ã™ã€‚ リセッ
『PostCSSを使ã£ãŸãƒ¢ãƒ€ãƒ³CSS開発環境ã€
1 pixel｜サイãƒãƒ¼ã‚¨ãƒ¼ã‚¸ã‚§ãƒ³ãƒˆå…¬å¼ã‚¯ãƒªã‚¨ã‚¤ã‚¿ãƒ¼ã‚ºãƒ–ãƒã‚° サイãƒãƒ¼ã‚¨ãƒ¼ã‚¸ã‚§ãƒ³ãƒˆã®ã‚¯ãƒªã‚¨ã‚¤ã‚¿ãƒ¼ã®å–り組ã¿ã‚’紹介ã™ã‚‹ã‚ªãƒ•ã‚£ã‚·ãƒ£ãƒ«ãƒ–ãƒã‚°ã§ã™ã€‚最新技術ã¸ã®æŒ‘戦やサービス誕生ã®è£è©±ã€å‹‰å¼·ä¼šã‚„イベントã®ãƒ¬ãƒãƒ¼ãƒˆãªã©CAクリエイターã®æƒ…å ±ãŒæº€è¼‰ã§ã™ã€‚ ã¯ã˜ã‚ã¾ã—ã¦ã€‚2015年度新å’入社ã®æ£®ä¸‹(@morishitter)ã§ã™ã€‚ 今ã¯755ã®ãƒ•ãƒ«ãƒªãƒ‹ãƒ¥ãƒ¼ã‚¢ãƒ«ã«å‘ã‘ã¦ã€Webフãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰ã®é–‹ç™ºã‚’担当ã—ã¦ã„ã¾ã™ã€‚ ãã®å‚らã§OSS活動も行ã£ã¦ãŠã‚Šã€æœ¬ã‚¨ãƒ³ãƒˆãƒªãƒ¼ã§ç´¹ä»‹ã™ã‚‹PostCSSã¯ã€GitHub上ã§åƒ•ãŒãƒ¡ãƒ³ãƒãƒ¼ã®1人ã§ã‚‚ã‚るプãƒã‚¸ã‚§ã‚¯ãƒˆã§ã™ã€‚ PostCSSã¨ã¯ PostCSSã¯Node.js製ã®CSSã®ãƒ‘ーサーã§ã€ãã®AST(パースçµæžœã®JSオブジェクト)ã‚’æ“作ã™ã‚‹ãŸã‚ã®ä¾¿åˆ©ãªAPIã‚’æä¾›ã—ã¦ã„ã¾ã™ã€‚PostCSS自体ãŒæä¾›ã™ã‚‹æ©Ÿèƒ½ã¯ãŸã£ãŸã“ã‚Œã ã‘ã§ã€éžå¸¸ã«å°ã•ã„ライブラリã§ã™ã€‚ ASTã‚’æ“作ã—ã€
cssnextを使ã£ã¦æœ€æ–°ã®css syntaxã§é–‹ç™ºã™ã‚‹ã®ãŒè‰¯ã•ãã†
ã“ã“最近CSSを扱ã†ã“ã¨ãŒå¤šã‹ã£ãŸã®ã§ã€ãã®éš›ã«Postprocessorを検討時ã«cssnextã«ã¤ã„ã¦ã¾ã¨ã‚ãŸå‚™å¿˜éŒ²ã€‚ JavaScriptã®æœ€è¿‘ã®äº‹æƒ…javascriptã§ã¯ES6ã§ã‚³ãƒ¼ãƒ‰ã‚’書ãã€Babelã§Transplieã™ã‚‹ã¨ã„ã†æµã‚ŒãŒå®šç€ã—ã¤ã¤ã‚る。 ã“ã‚Œã¯ã€ã“ã‚Œã¾ã§å¿…è¦ã ã£ãŸãƒ©ã‚¤ãƒ–ラリãŒä¸è¦ã«ãªã‚Šã€ã‚³ãƒ¼ãƒ‰ãŒä¾å˜ã™ã‚‹ãƒ©ã‚¤ãƒ–ラリを減らã™ã“ã¨ãŒã§ãã€altJSã«é ¼ã‚‰ãªã„ã§é–‹ç™ºã§ãã‚‹ã¨ã„ã†åˆ©ç‚¹ã‹ã‚‰ã§ã‚る。 åŒã˜ã“ã¨ãŒCSSã§ã‚‚èµ·ãã¦ã„る。ã¾ãšã“ã‚Œã¾ã§CSSを牽引ã—ã¦ããŸSassã«ã¤ã„ã¦ã€‚ Sassã®å•é¡Œç‚¹æœ€è¿‘ã®CSSã®é–‹ç™ºã«ã¯altCSSã¨ã—ã¦Sass,Less,Stylusãªã©ã®PreprocessorãŒä½¿ç”¨ã•ã‚Œã¦ã„る。 特ã«Sassã¯JavaScriptã§è¨€ã†æ‰€ã®jQueryã«è¿‘ã„å˜åœ¨ã«ãªã‚Šã€APIもやや複雑ã«ãªã£ã¦ã„ã‚‹æ„Ÿã˜ãŒã‚る。 Sassを使ã£ã¦ã„ã¦ã‚‚実際ã¯ãã®ã»ã‚“ã®ä¸€éƒ¨ã®
JavaScript/CSS 2015 Autumn
ã¾ã‚‹ã§ãƒ‰ãƒƒã‚°ãƒ»ã‚¤ãƒ¤ãƒ¼ã®ã”ã¨ã変化ã™ã‚‹ãƒ•ãƒãƒ³ãƒˆã‚¨ãƒ³ãƒ‰é–‹ç™ºã«ç–²ã‚Œã¦ã„ã¾ã›ã‚“ã‹ï¼Ÿæœ¬ã‚»ãƒƒã‚·ãƒ§ãƒ³ã§ã¯ã€Babelã‚„PostCSSã®å°Žå…¥ã®ä»•æ–¹ã‚„使ã„方を解説ã™ã‚‹ã“ã¨ã«ã‚ˆã£ã¦ã€æ¬¡ä¸–代ã®æ¨™æº–仕様ã§ã‚ã‚‹EcmaScript 6ã‚„CSS 3ã‚’å…ˆå–ã‚Šã—ã€é•·ã使ãˆã‚‹æŠ€è¡“を身ã«ã¤ã‘ã¾ã™ã€‚æµã‚Œã®é€Ÿã•ã«æƒ‘ã‚ã•ã‚Œãªã„よã†ã«ã—ã¾ã—ょã†ã€‚ Koji Ishimoto @IWATE HTML5 COMMUNITY #3 on October 14 https://www.facebook.com/events/674956182641567/Read less
PostCSSã£ã¦ãªã«ï¼Ÿå°Žå…¥å‰ã«çŸ¥ã£ã¦ãŠããŸã„ã“ã¨ã‚’箇æ¡æ›¸ãã§ã¾ã¨ã‚ã¦ã¿ãŸ
PostCSS ã£ã¦æœ€è¿‘ã¡ã‚‰ã»ã‚‰ç›®ã«ã™ã‚‹ã‚ˆã†ã«ãªã£ãŸã‘ã©ã„ã£ãŸã„ãªã«ï¼Ÿã¨æ€ã£ã¦ã„ã‚‹æ–¹ã„ã¾ã›ã‚“ã‹ï¼Ÿåƒ•ã¯ãã®ä¸€äººã§ã™ã€‚ãªã‚“ã¨ãªãã“ã‚“ãªã‚‚ã‚“ã‹ãªï¼Ÿã¨ã„ã£ãŸæ„Ÿã˜ã§æ›–昧ã«ã—ã‹ç†è§£ã—ã¦ã„ãªã‹ã£ãŸã®ã§ã€Œã¨ã‚Šã‚ãˆãšã“ã‚Œã ã‘知ã£ã¦ãŠã‘ã°ã„ã„ã€ã¨ã„ã†æƒ…å ±ã‚’ç°¡å˜ã«ã¾ã¨ã‚ã¦ã¿ã¾ã—ãŸã€‚ ã¯ã˜ã‚ã« PostCSSをノートPCã«ä¾‹ãˆã‚‹ã¨â€¦ Sassã‚’VAIOã®ã‚ˆã†ãªãƒ¡ãƒ¼ã‚«ãƒ¼ãŒä½œã£ã¦ãƒ‘ッケージã—ãŸãƒŽãƒ¼ãƒˆPCã«ä¾‹ãˆã‚‹ã¨ã€PostCSSã¯ãƒžã‚¶ãƒ¼ãƒœãƒ¼ãƒ‰ã‹ã‚‰ãƒ—ãƒã‚»ãƒƒã‚µãƒ¼ã‹ã‚‰ã‚±ãƒ¼ã‚¹ã¾ã§ã€ã™ã¹ã¦è‡ªåˆ†ã§é¸ã‚“ã§çµ„ã¿ç«‹ã¦ã‚‹è‡ªä½œPCã§ã™ã€‚ ã‹ãªã‚Šè‰¯ã•ãㆠçµè«–ã‹ã‚‰è¨€ã£ã¦ã—ã¾ã†ã¨ã€ã‹ãªã‚Šè‰¯ã•ãã†ãªã®ã§æ—©é€Ÿä½¿ã„始ã‚ã¦æã¯ãªã„ã¨æ€ã„ã¾ã™ã€‚大ããªå°Žå…¥ãƒªã‚¹ã‚¯ã‚„デメリットã¯æ€ã„ã‚ãŸã‚‰ãªã„ã—ã€ã™ã§ã«ãƒ“ルドツールを使ã£ã¦ã„ã‚Œã°å°Žå…¥ã‚³ã‚¹ãƒˆã‚‚å°‘ãªãã™ã¿ã¾ã™ã€‚å°‘ãªãã¨ã‚‚試ã—ã¦ã¿ã‚‹ä¾¡å€¤ã¯å二分ã«ã‚ã‚Šãã†ã§ã™ã€‚ã‚‚ã¡ã‚ã‚“ã€é–‹ç™ºä½“制や環境ã€ãƒ—ãƒã‚¸ã‚§ã‚¯ãƒˆã®æ€§è³ªã«ã‚ˆã‚‹ã‚“ã§ã—
Home | Stylelint
A mighty CSS linter that helps you avoid errors and enforce conventions. Features​ It's mighty as it: has over 100 built-in rules for modern CSS syntax and features supports plugins so you can create your own custom rules automatically fixes problems where possible supports shareable configs that you can create or extend can be customized to your exact needs has 15k unit tests making it robust is
PostCSSã¨cssnextã§æœ€æ–°CSS仕様を先å–ã‚Šï¼
ã©ã†ã‚‚ã€Kaizen Platform, Inc.ã®@t32kã§ã™ã€‚今日ã¯PostCSSã«ã¤ã„ã¦è§£èª¬ã—よã†ã¨æ€ã„ã¾ã™ã€‚PostCSSã«ã¤ã„ã¦ã¯ãれを解説ã—ãŸåŒåƒšã®ã‚¹ãƒ©ã‚¤ãƒ‰ã‚‚ç´ æ™´ã‚‰ã—ã„ã®ã§ã€ãã¡ã‚‰ã‚‚å‚考ã«ã—ã¦ã‚‚らãˆã°å¹¸ã„ã§ã™ã€‚ PostCSS ã¨ã¯ä½•ã‹ // Speaker Deck PostCSSã¨ã¯ãªã«ã‹ï¼Ÿ PostCSSã¯ã€Autoprefixerã®ä½œè€…ã§ã‚‚有åãªãƒã‚·ã‚¢ã®Andrey Sitnikæ°ãŒé–‹ç™ºã—ã¦ã„るツールã§ã™ã€‚ postcss/postcss å…¬å¼ã®ãƒ¬ãƒã‚¸ãƒˆãƒªã®READMEã«ã¯ä»¥ä¸‹ã®ã‚ˆã†ã«æ›¸ã‹ã‚Œã¦ã„ã¾ã™ã€‚ PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax,
CSSã®ãƒ—リプãƒã‚»ã‚¹ã¨ãƒã‚¹ãƒˆãƒ—ãƒã‚»ã‚¹ã€ãã—ã¦Reworkã¨PostCSS - morishitter blog
ã“ã®æŠ•ç¨¿ã¯Frontrend Advent Calendar 2014ã®7日目ã®è¨˜äº‹ã§ã™ã€‚ CSSプリプãƒã‚»ãƒƒã‚µãƒ¼ã¨ãƒã‚¹ãƒˆãƒ—ãƒã‚»ãƒƒã‚µãƒ¼ã€ãã—ã¦ãれらをビルドã™ã‚‹ãƒ„ールã§ã‚ã‚‹Reworkã¨PostCSSã«ã¤ã„ã¦ã€‚ CSSプリプãƒã‚»ãƒƒã‚µãƒ¼ã€ãƒã‚¹ãƒˆãƒ—ãƒã‚»ãƒƒã‚µãƒ¼ ã¾ãšã¯ç”¨èªžã®å®šç¾©ã‚’確èªã™ã‚‹ã€‚CSSプリプãƒã‚»ãƒƒã‚µãƒ¼ï¼ˆã¾ãŸã¯ãƒ¡ã‚¿è¨€èªžï¼‰ã¨ã¯ã€CSSã¨ã¯ç•°ãªã‚‹ç‹¬è‡ªã®æ§‹æ–‡ã§è¨˜è¿°ã•ã‚ŒãŸæ–‡å—列を入力ã¨ã—ã€ãƒ–ラウザãŒè§£é‡ˆå¯èƒ½ãªCSSコードを出力ã™ã‚‹ã‚‚ã®ã€‚Sassã‚„Lessã€Stylusç‰ãŒãã®å®Ÿè£…ã«å½“ãŸã‚‹ã€‚ 次ã«CSSãƒã‚¹ãƒˆãƒ—ãƒã‚»ãƒƒã‚µãƒ¼ã¨ã¯ã€CSSを入力ã¨ã—ã€ã‚ˆã‚ŠåŠ¹æžœçš„ãªCSSã«å¤‰æ›ã—ã€æœ€é©åŒ–ã™ã‚‹ã‚‚ã®ã€‚例ãˆã°ã€ã‚³ãƒ¼ãƒ‰ã‚’圧縮ã—ãŸã‚Šã€è‡ªå‹•ã§ãƒ™ãƒ³ãƒ€ãƒ¼ãƒ—リフィックスを付与ã—ãŸã‚Šã€ãƒ—ãƒãƒ‘ティ宣言ã®é †ç•ªã‚’èªã¿ã‚„ã™ã„よã†ã«ä¸¦ã³å¤‰ãˆãŸã‚Šã™ã‚‹ã‚‚ã®ã§ã€CSSWringã‚„Autoprefixerã€CSSCombãŒãã®å®Ÿè£…。ã„ã‚ゆるオプ
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
Why Should You Use PostCSS - FROMDEV
PostCSS and cssnext
postcss.parts
{{#tags}}- {{label}}
{{/tags}}