サードパーティの CSS アトミック ライブラリの欠点
例えば、tailwindcssは学習コストがかかる、最初に書いたときは手書きほど効率が良くないかもしれない、設定が必要、元のスタイルが上書きされてしまう問題もある、要するにたった一言重
自分で擦るメリット
- 学習コストが低い
- フレキシブル
- 副作用はありません
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let str = "";
function createClass(classPrefix,cssAttrs,num=41){
for (let i = 0; i < num; i++) {
str = str +`.${
classPrefix}${
i}{ ${
cssAttrs}: ${
i}px};`;
}
}
// margin
createClass('ml-','margin-left')
createClass('mr-','margin-right')
createClass('mt-','margin-top')
createClass('mb-','margin-bottom')
// padding
createClass('p-','padding')
createClass('pl-','padding-left')
createClass('pr-','padding-right')
createClass('pt-','padding-top')
createClass('pb-','padding-bottom')
// font-size
createClass('fs-','font-size')
// width、height
createClass('w-','width')
createClass('h-','height')
// row-gap、column-gap
createClass('row-gap-','row-gap')
createClass('column-gap-','column-gap')
console.log(JSON.stringify(str));
</script>
</body>
</html>