[link]_CSS

系列文章

• CSS系列 - PJCHENder

• [iT邦] 重新認識 CSS - Titangene - 2019

• 金魚系列

  • CSS系列 - CSScoke
  • [iT邦] 金魚都能懂的CSS必學屬性 - CSScoke - 2020

工具

• CSS速查表

• reset

  • normalize.css

基礎

• CSS選取器

  • [iT邦] 金魚都能懂的 CSS 選取器 - CSScoke - 2019

• CSS模組化(設計模式)

  • [PPT]漫談 CSS 架構方法 - 以 OOCSS, SMACSS, BEM 為例 - Kuro Hsu - 2014
  • OOCSS、SMACSS、BEM、CSS Modules、CSS in JS - Summer。桑莫。夏天 - 2018
  • BEM，CSS 設計模式 - 竹白記事本 - 2019

• CSS變數

  • CSS變數實用指南及注意事項 - ITREAD01 - 2018
  • 原生 CSS 變數運用技巧 - W3HexSchool - 2019
  • 自定義變數帶你隨心所欲，一鍵換膚 - MdEditor - 2019
  • CSS 自定義屬性的策略指南 - ITREAD01 - 2019

• CSS權重

  • 小事之 CSS 權重 (css specificity) - 小艾iris - 2018

• 垂直置中

  • CSS垂直置中技巧 - CSScoke
  • [iT邦] 連續30天的超實務網頁設計的垂直置中教學

• Grid

  • [Youtube] CSS GRID / CSS格線好好玩【完整版】 | CSS教學 | CSS格線 - CSScoke
  • [互動] - Grid - 蘿蔔
  • Css Grid 概念介紹及使用教學 - Ballaedi

• Flex

  • [Youtube] 玩轉 CSS FLEX | CSS教學 | 網頁教學 | 網頁設計 - CSScoke
  • [互動] - Flex - 青蛙
  • [iT邦] flex 1 - yachen
  • [iT邦] flex 2 - yachen
  • [iT邦] flex 3 - yachen
  • [iT邦] flex 4 - yachen
  • [iT邦] flex 5 - yachen
  • [iT邦] flex 6 - yachen
  • [iT邦] flex 7 - yachen

• line box

  • [iT邦] 淺談 line box 高度 - yachen

• box-shadow

  • [iT邦] 番外篇 - 胡搞 box-shadow (上) - yachen
  • [iT邦] 番外篇 - 胡搞 box-shadow (中) - yachen
  • [iT邦] 番外篇 - 胡搞 box-shadow (下) - yachen

• calc

  • calc 結合變數，從 CSS、SCSS 喇到 Styled Components - Robby - 2020

Animation

• CSS animation 設定 - Mozilla

npm 套件

• Animate.css

其他議題

• Collapsing margins

  • [iT邦] Collapsing margins - yachen

• 滿版

  • object-fit - CSS-TRICKS

• 判斷觸控設備

  • CSS any-hover any-pointer media查询与交互体验提升 - 鑫空間,鑫生活 - 2020

• 幾何圖形

  • 用純css做幾何圖形的技巧 (一) - 每日頭條 - 2019
  • 用純css做幾何圖形的技巧（二）clip-path - 每日頭條 - 2019

• postcss

  • cssnext

    • postcss-cssnext features - CSDN - 2018
    • PostCSS以及cssnext語法 - 程式前沿

  • pxtorem

    • px轉rem - npm

神人膜拜區

• Moustached Nanny - Julia Miocene、作者 - Julia Miocene
• A love for Cats - Charisse

跨平台解法

• Safari

• overflow:hidden
• Preventing body scroll for modals in iOS