更好、更直覺的開發體驗

Mike @ Laravel X Vue ConfTaiwan2022

當 Vue 遇上 Atomic CSS !

Mike

雷麒科技資深前端工程師
出過幾堂線上課程
Youtube 搜尋 @MikeCheng
2021 iThome 鐵人賽優選

What is Atomic CSS

( 原子化CSS )

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

原子化 CSS 是一種 CSS 的架構方式，它傾向於小巧且用途單一的 class，並且會以視覺效果進行命名。

Let’s Define Exactly What Atomic CSS is

的作者( John Polacek )在2013年的時候提到

簡單的來說，像這樣子的東西就是 Atomic CSS

<template>
  <div class="atomic-css">
    <div class="atomic-css-logo-wrapper">
      <SvgIcon name="logo" />
    </div>
    <div class="atomic-css-content">
      <h4 class="atomic-css-title">Atomic CSS</h4>
      <p class="atomic-css-message">這是一個很簡單的 atomic css 範例</p>
    </div>
  </div>
</template>

<style scoped>
  .atomic-css {
    display: flex;
    max-width: 500px;
    height: 100px;
    margin: 0 auto;
    padding: 20px;
    border-radius: 0.5rem;
    background-color: #fff;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.5);
  }
  .atomic-css-logo-wrapper {
    flex-shrink: 0;
  }
  .atomic-css-logo {
    height: 3rem;
    width: 3rem;
  }
  .atomic-css-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .atomic-css-title {
    color: #1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .atomic-css-message {
    color: #718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

一般的方式來撰寫的組件

使用 Atomic CSS 的 Framework 撰寫的組件

這跟寫行內樣式有甚麼差別 ?

這樣寫一點語意化的概念都沒有了 ?

拆得這麼細最後就演變成寫行內樣式一樣，然後再新開個命題 “如何更優雅的寫行內樣式”

難道只有我體會不出這種寫法的好在哪裡嗎?

因為你根本忽視它想解決的問題

.atomic-css {

display: flex;

height: 100%;

padding-top: 20px;

}

.atomic-css-title {

font-size: 14px;

}

.atomic-css-message {

display: flex;

font-size: 14px;

}

.atomic-css-box {

font-size: 14px;
padding-top: 20px;

}

.flex {

display: flex;

}

.h-full {

height: 100%;

}

.text-base {

font-size: 14px;

}

.pt-20px {

padding-top: 20px;

}

CSS 最小化，重用性最大化

專案的規模

CSS 的大小

Atomic CSS

一般寫CSS

更直覺的撰寫 style

不用一直想命名，其實我不愛取名字

最小單位的修改樣式

一個紅色各自表述

HTML結構變動時需要去調整CSS or SASS結構

避免HTML結構變動時 Style 跑掉

在搬家的時候可以很好的轉移樣式

列出幾個你可能用起來覺得不方便的地方！

講是這樣講但是可能也還好

有時候 class 可能有點太長

<div class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-12px text-white">

<div class="w-500px h-200px bg-white rounded-xl shadow">

// ...

</div>

需要去重新學習Atomic CSS 的 class 定義跟規則

w	width
h	height
text-red	color: red;
rounded	border-radius
flex	display: flex;
m	margin
p	padding

Atomic CSS

CSS

fixed

top-0

left-0

w-full

h-full

bg-black

bg-opacity-50

flex

justify-center

items-center

text-base

text-white

fixed

top-0

left-0

w-full

h-full

flex

justify-center

items-center

可能還會需要借助其他第三方工具像是 purgecss

去清除用不到的Class

我實際用到的Class

我沒用到的Class

Ｚ > Ｂ

Tailwindcss

Tachyons

ACSS

Windicss

Shed.css

Basscss

Expressive Css

fower

Windi CSS

2020

2021

v1.2

v2.1

Just-In-Time ( JIT )

Now

Windi CSS

生成所有的工具

掃描有用到的工具

移除不需要的工具

生成所需要的工具

掃描需要那些工具

提供的工具

你實際會用到的

沒有提供的

參數自動推導

結合 CSS 變數

可使用括號對相同的工具類進行群組

Responsive Web Design

	Default	<	@
sm	(min-width: 640px)	(max-width: 639.9px)	(min-width: 640px) and (max-width: 767.9px)
md	(min-width: 768px)	(max-width: 767.9px)	(min-width: 768px) and (max-width: 1023.9px)
lg	(min-width: 1024px)	(max-width: 1023.9px)	(min-width: 1024px) and (max-width: 1279.9px)
xl	(min-width: 1280px)	(max-width: 1279.9px)	(min-width: 1280px) and (max-width: 1535.9px)
2xl	(min-width: 1536px)	(max-width: 1535.9px)	(min-width: 1536px)