---
tags: CSS
title: CSS筆記
description: CSS筆記
---

CSS筆記
===
- [CSS筆記](https://hackmd.io/@ZYL/CSS?type=view)

**CSS**
>層疊樣式表（Cascading Style Sheets, CSS）是用來描述 HTML 或 XML（包含 SVG 或 XHTML 等各種 XML 變形）文件外觀的樣式表語言。CSS 會描述文件裡的結構化元素，該如何呈現在螢幕、紙、語音報讀、或其他媒介上。
CSS 是開放網路的核心語言之一，具有標準化的 W3C 規範。歷經不同層級的開發，CSS1 目前已被棄用、CSS2.1 是建議規範，而 CSS3 目前被分作數個較小的模組，持續在標準化的路上行進。

**CSS3**
>- 強化網頁視覺效果
>- 簡化網頁動畫的製作
>- 適應各種終端裝置的設計

學習重點
---
1. 基礎語法
2. 選擇器
3. 權重&繼承
4. 區塊模型 (Box Model)
5. 定位
6. 排版
7. 動畫
8. 媒體查詢

預處理器(Preprocessors)
---
- [Sass(SCSS)](https://sass-lang.com/)
- [Less](http://lesscss.org/)
- [Stylus](https://stylus-lang.com/)

處理器(Processor)
---
- [PostCSS](https://postcss.org/)

架構心法
---
提高 CSS 的重用性、可維護性與延展性

- [OOCSS(Object-Oriented CSS)](http://oocss.org/)
>使用 class 撰寫樣式，每個 class 有其各自用途。
- [SMACSS(Scalable and Modular Architecture for CSS)](http://smacss.com/)
>具結構分類、命名規則的限制。
- [BEM(Block Element Modifier)](http://getbem.com/)
>將介面切割成許多獨立的區塊，以區塊（Block）、元素（Element）和修飾子（Modifier）來命名。
- CSS Modules
>解決全域污染的問題，解法是讓樣式變成限定範圍的。
- CSS in JS
>在 JS 中撰寫 inline-style，每個元件只管自己的樣式即可。
- [MaintainableCSS](https://maintainablecss.com/)
>編寫CSS時不必擔心過分的，預先存在的樣式會引起問題。可維護CSS是一種編寫模塊化，可伸縮和可維護CSS的方法。
- [MVCSS(Modular View CSS)](https://mvcss.ycnets.com/)
>是一個以 Sass 為基礎的 CSS 架構，用於建立可預測與可維護的應用程式樣式。
- [RSCSS(Reasonable System for CSS)](https://rscss.io/)
>在不失去理智的情況下樣式化CSS。
- [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)[target=_blank]
>可擴展且可維護的CSS架構。

教學
---
- [CSS | MDN](https://developer.mozilla.org/zh-TW/docs/Web/CSS)[target=_blank]
- [CSS 基本教學](https://docs.google.com/presentation/d/1dY4PyAzQA-3_pXnGzFHRY1TOSqtcFtR33T6AjtEt7wU/edit#slide=id.p)
- [CSS 3 常用設定](https://docs.google.com/presentation/d/130fVVD6MsVMEVLtKFuOMecEnPZqIjNh9AIXhNh5woYU/edit#slide=id.p)
- [網路字型 Web Font](https://docs.google.com/presentation/d/1naqTiF5J1b1FKQykqxaBdquJKjgn6mcBKRn4O5C8h3k/edit#slide=id.p)

參考
---
- [CSS 的模組化方法：OOCSS、SMACSS、BEM、CSS Modules、CSS in JS](https://cythilya.github.io/2018/06/05/css-methodologies/)
- [淺談 CSS 方法論與 Atomic CSS](https://blog.techbridge.cc/2017/04/29/css-methodology-atomiccss/)

補充
---
- [CanIUse](https://caniuse.com/)
- [The 100% correct way to do CSS breakpoints](https://www.freecodecamp.org/news/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862/?gi=2f6c0c5f72ef)[target=_blank]
- [CSS In JS: It’s a Trap!](https://ilikekillnerds.com/2015/10/css-in-js-its-a-trap/)

{%hackmd ZdTiDds5StKRf3TMZLUGIQ %}