CSS 起手式


Posted by mijouhsieh on 2022-01-05

  1. wirerame + BEM命名

    • 分析結構
    • 定義區塊、class name
  2. 使用 CSS Preprocessor CSS預處理器: Sass/SCSS
    Codepen環境,Setting > CSS > CSS Preprocessor >SCSS
    Node.js環境的sass工具包
    npm install -g sass npm install -g sass --force
    確認安裝成功 which sass sass --version
    內建說明書 sass -help

  3. Reset CSS
    依需求找範本,設定把瀏覽器給HTML元素的CSS屬性預設值歸零。
    button { border: 0;}

  4. .editorconfig檔
    縮排設定
  5. CSS variable
    全域設定 :root {}
    建立變數 --變數名稱: 值
    顏色和svg檔給予變數名稱
  6. data-theme屬性
    同HTML架構,變換模式
  7. width: device-width; 讓網頁內容與裝置螢幕寬度一致
    viewport-setting.png
  8. .container { max-width: ~px;}
  9. 元素應使用相對寬度,而非絕對寬度,可確保元素符合 viewport大小。
    => 因為 不同裝置 有不同螢幕解析度&像素密度
  10. 字體 使用 相對單位 em
    父元素 font-size: 16px;
    子元素 font-size: 1em (= 16px); | 0.5em (= 8px)
  11. 限制彈性 e.g.: img 隨父元素縮放。 用 max, min來控制。
    img { 
    width: 100%;
    max-width: 960px;
    }
    

style.css

html, body {
  padding: 0;
  margin: 0;
  background: #eee;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: #000;
}
ul, li {
 list-style: none;
}
button {
  border: none;
}

CSS Reset 與 CSS normalize


#css #note #CSS Reset







Related Posts

React(3) - class component & state

React(3) - class component & state

解題 - 找出所有等腰三角形

解題 - 找出所有等腰三角形

Inside look at modern web browser

Inside look at modern web browser


Comments