Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CSSfmt
Search
Masaaki Morishita
August 27, 2015
Programming
2
220
CSSfmt
at HTML5 Beginners 12th
Masaaki Morishita
August 27, 2015
Tweet
Share
More Decks by Masaaki Morishita
See All by Masaaki Morishita
PostCSS: Build your own CSS processor
morishitter
6
4.7k
Houdini: Abracadabra CSS
morishitter
1
830
Modern CSS: architecture, future specs and build flow
morishitter
13
2.7k
PostCSS and cssnext
morishitter
11
1.8k
PostCSS 5.0: for Custom CSS Preprocessing
morishitter
10
1.1k
PostCSS for beginners
morishitter
6
1.4k
Introduction to CSS Architecture
morishitter
3
380
Introduction to PostCSS
morishitter
6
1.7k
Yet Another CSS Preprocessor
morishitter
1
5.5k
Other Decks in Programming
See All in Programming
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
490
私はどうやって技術力を上げたのか
yusukebe
43
17k
Model Pollution
hschwentner
1
180
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
ネイティブ製ガントチャートUIを作って学ぶUICollectionViewLayoutの威力
jrsaruo
0
130
AIで開発生産性を上げる個人とチームの取り組み
taniigo
0
130
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
120
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
3k
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
240
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
4.3k
GraphQL×Railsアプリのデータベース負荷分散 - 月間3,000万人利用サービスを無停止で
koxya
1
1.1k
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
570
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Docker and Python
trallard
46
3.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Invisible Side of Design
smashingmag
301
51k
Documentation Writing (for coders)
carmenintech
75
5k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Transcript
CSSfmt Format'your'(S)CSS'source'code in#ୈ12ճHTML5ϏΪφʔζ
About&me • Masaaki'Morishita • Twi.er:'@morishi.er_ • GitHub:'morishi.er • Blog:'h.p:/ /morishi.er.hatenablog.com
• αΠόʔΤʔδΣϯτʢ৽ଔ1ʣ
CSSfmtͱ
CSSfmt • Node.jsͷ(S)CSSίʔυܗπʔϧ • PostCSSͬͯ࡞ͬͯΔ • GofmtͷӨڹΛड͚ͯΔ • ϑΥʔϚοςΟϯάͷͨΊͷΦϓγϣϯͳ͍ •
created5by5morishi:er
Over%600%star!%in%GitHub
None
None
͍͕͋Δ![ཁग़య]
Example
//mixin for clearfix @mixin clearfix () { &:before, &:after {
content:" "; display : table; } &:after {clear: both;} }.class { padding:10px;@include clearfix();} //placeholder %base { padding: 12px }.bar { @extend %base; }
// mixin for clearfix @mixin clearfix () { &:before, &:after
{ content: " "; display: table; } &:after { clear: both; } } .class { padding: 10px; @include clearfix(); } // placeholder %base { padding: 12px; } .bar { @extend %base; }
Rules&(Ұ෦) • 2εϖʔεΠϯσϯτ • ෳηϨΫλʔͷͱ͖վߦ • ϓϩύςΟʔͱ:ͷؒεϖʔε͚͋ͳ͍ • :ͱvalueͷؒʹ1εϖʔε •
ηϛίϩϯ͚ͭΔ • etc...
1൪ଟ͘ͷਓ͕ͬͯͦ͏ͳϑΥʔϚοτ .foo, .bar { color: moccasin; float: left !important; padding:
5px 10px 10px; } /* comment*/ .class { }
How$to$use$CSSfmt
in#Command#line $ npm install -g cssfmt $ cssfmt style.css σΟϨΫτϦࢦఆ:
$ cssfmt -R src/scss
in#Command#line $ cssfmt --help Usage: cssfmt [options] input-file [output-file] Options:
-d, --diff output diff against original file -R, --recursive format files recursively -V, --versions output the version number -h, --help output usage information
in#λεΫϥϯφʔ • Grunt • gulp • fly
gulp%cssfmt var gulp = require('gulp'); var cssfmt = require('gulp-cssfmt'); gulp.task('cssfmt',
function () { return gulp.src('src/style.css') .pipe(cssfmt()) .pipe(gulp.dest('dist')); });
ΤσΟλϓϥάΠϯ • Sublime)Text • Atom • Vim • Emacs
atom%cssfmt h"ps:/ /github.com/1000ch/atom3cssfmt
ͦΜͳͻͲ͍ίʔυॻ͔ΜΘ!(!)
ʮ4εϖʔεΠϯσϯτ͕͍͍ʂʯ ʮΘ͠λϒ͡Όʯ ʮηϨΫλʔͱ{ͷؒʹվߦೖΕ͍ͨʂʯ ʮ1ߦͰϧʔϧηοτॻ͖͍ͨʂʯ
! ͦ͏͍͏ͷΈͷ
νʔϜͰʢϨϏϡʔ࣌ʹʣϑΥʔϚοτΛ ౷Ұͤ͞Δ͜ͱ͕େ
h"ps:/ /github.com/morishi"er/cssfmt
Thanks':D morishi'er