コードレビューはしていますか? CSSは言うまでもなく、エンドユーザにもっとも近い言語です。それゆえ、変更も多く『壊れやすい』言語です。 しかし、定常的にレビューを実施することで『壊れにくい』状態をキープすることができます。 コードレビューは決して特別なスキルを必要としません。 本セッションでは、明日からすぐ実践できるコードレビューへのアプローチと手法について紹介します。
CSSI: CSS InvestigationCSS؝٦سٖؽُ٦ך➬倯侄ִתׅby Yuya Saito @ Rich Media2014.11.08#cssؔآ؟ٝ
View Slide
Yuya SaitoUX Engineer @ RichMedia
Benefits of an Audit؝٦سٖؽُ٦ךⵃ挿
Reduce File Sizesؿ؋؎ٕ؟؎ؤך簭㼭
#perfmatters
؝٦سك٦أָ㣐ֹֽל㣐ְֹקוծغָؚ欰⳿ׁ堣⠓כ㟓ִկ
Ensure Consistencywith Guidelinesؖ؎سٓ؎ٝח״♧顐䚍ך然⥂
DocumentDocumentDocument
“— Raymond Chen, Developer at Windows؝٦سכ剅ֻ堣⠓״铣堣⠓ך倯ָ㖇⦜涸ח㢳ְկַֿծ׃ַה鎘歗ׅץֹկ
Standardize Your Code؝٦سك٦أך垥彊⻉
“— Nicolas Gallagherוֽ㢳ֻך➂ָ؝٦سك٦أח顀柃׃גְה׃גծ➂ָ؝٦س剅ְ״ֲח剅ֻֿהկ
➂כծػة٦ٝ钠陎遤ֲךָ䖤䠐
ず䠐ך♳ךأة؎ٕ٥ٕ٦ٕ
Increase Performanceػؿؓ٦وٝأぢ♳
Reduce HTTP Request
劤殢؟٦غדוך״ֲח$44ָㄎן⳿ׁגְךַ
Minify +Concatenation, etc.Build Process
؝٦سٖؽُ٦ך倯岀How to Audit CSS
䗰圓ִPreparation
倜ז؝٦س鷄⸇׃㢌刿׃׃זְկ
剅ֹ鴥דְְךכ؝ًٝزךկ
ًٝذشٝأ䚍ך넝ְ繟׃ְ؝٦سك٦أ䩛חⰅֿהկ
ֽדכזֻծ؝ٓنٖ٦ءّٝ׃װְׅ橆㞮䭯גֿהկ
غؚ䤄ד➂䤄ת׆
ر؍ؙٖزٔؿ؋؎ٕ圓鸡(File System) Architecture
㢌刿遤ֲֶהׅꥷחծוךؿ؋؎ٕח鎸鶢ׅלְְךַ
$44ָؿ؋؎ٕ׃ַזְ
؝ًٝزⵃ欽׃ג鎸鶢㜥䨽ⴓⶴ׃גֶֻկ
؝٦سك٦أⰋ⡤ך䪾䳢Inventory
StyleStatsby Koji Ishimotogithub.com/t32k/stylestats
CSS Digby Tom Genonigithub.com/tomgenoni/cssdig
Grep Your Styles TM
؝٦سك٦أךؙؔٔذ؍ثؑحؙLinting CSS
CSSLintby Nicole Sullivangithub.com/CSSLint/csslint
csslint file1.css file2.css
Ⰻ⡤䠬䪾䳢ׅח-JOU遤ֲկ
ة؎هؚٓؿ؍ה葿The Worst Offender:Typography and Color
Typography
Type-o-maticby Nicole Sullivangithub.com/stubbornella/type-o-matic
ل٦آקוثؑحؙ׃גծػة٦ٝ䱱կ
CSS Colorguardby Alex Sextongithub.com/SlexAxton/css-colorguard
CIEDE2000 algorithm
فٔؿ؍حؙأך鋅湫׃You Might Not NeedThose Prefix Anymore!
Autoprefixerby PostCSSgithub.com/postcss/autoprefixer
caniuse.com
劢⢪欽הꅾ醱ך涪鋅Find Unused / Duplicated
uCSSby Operagithub.com/operasoftware/ucss
UnCSSby Giacomo Martinogithub.com/giakki/uncss
؝٦سٖؽُ٦ך⾱Principle of Audit
The Design Principleرؠ؎ٝ⾱
Simple is Beautiful
荈ⴓָ剅ְךדծֲדזֻגծ䝤ְ؝٦س嗚濼דֹ湡균ֲկ
Separation of Concernsꟼ䗰ךⴓꨄ
“— Wikipediaفؚٗٓي堣腉חְֶג〳腉זꣲꅾ醱ָזְծ醱侧ך堣圓ח僇然חⴓⶴֿׅהְֲկֿֿדְֲչꟼ䗰 ꟼ䗰✲պהכծفؚٗٓيך֮堣腉װ䮶莸ְծ湡涸ךֿהד֮կ
CSSHTMLJavaScript
OOCSS
Separate Structure and Skin
Structure
Skin
Separate Container and Content
Same Module
Single ResponsibilityPrinciple⽃♧顑⟣ך⾱
“— Robert C. Martinؙٓأח㢌刿ָ饯ֿ椚歋כծ♧אד֮ץֹկ
䌢ח㢌⻉実$44ך顑ח㼎׃ג㹋ꥷ⚺纏涸ז滠㖑挿鋅ְ׃װֻׅזկ
2㢌刿ך椚歋ָא֮㜥さծךؙٓأכאחⴓⶴׅץֹկאך㢌刿ָאךؙٓأחתָזծךؙٓأכאח窟さׅץֹկ
“— Meְְؙٓأせָ䙼ְאְծ➬✲ךכ穄גְկ
Principle ofLeast Knowledge剑㼭濼陎ך⾱
“— Wikipedia⟣䠐ךؔـآؙؑزָ荈ⴓ⟃㢩؟ـ؝ٝه٦طٝزろך圓鸡װفٗػذ؍ח㼎׃ג䭯גְ⟎㹀剑㼭ꣲחׅץֹד֮կ
SMACSSby Jonathan Snooksmacss.com
21. Category2. Depth of Applicability
#sidebar div {border: 1px solid #333;}#sidebar div h3 {margin-top: 5px;}#sidebar div ul {margin-bottom: 5px;}
〳腉זꣲ)5.-ך圓鸡ח⣛㶷׃זְ״ֲח鎸鶢ׅկ
CSS Code Smells䝤ְ؝٦سךחְֶ
Harry RobertsA.K.A CSS Wizardly
Code smells in CSSby Harry Robertscsswizardry.com/2012/11/code-smells-in-css
Code smells in CSSby Mearticle.enja.io/articles/code-smells-in-css.html
Undoing Stylesأة؎ٕךٔإحز
ٕ٦ٕإحزכ䌢ח竰䪫ך遤ֲץֹדծ⟃ךךח鷄⸇ׅץֹד֮ծٔإحزׅץֹדכזְկ
Magic Numbersوآحؙشٝغ٦
وآحؙشٝغ٦הכծ椚歋זֻչ⹛⡲ַׅպהְֲֽד⢪גְ⦼կ
.site-nav { [ελΠϧ] }.site-nav > li:hover .dropdown {position: absolute;top: 37px; /*ϚδοΫφϯόʔ*/left: 0;}
Qualified selectorsⵖꣲך䓼ְإؙٖة
ul.nav {...}a.button {...}div.header {...}
إؙٖةכ〳腉זꣲ剑㼭ꣲח姺ץֹկ
Documentation椚䚍⥂אך繎ꆙ湍
“— The Boy Scout Rule荈ⴓךְ㜥䨽כծֿ⳿ג遤ֻהֹծ勻儗״ְֹח׃זֽלזזְկ
؝٦سك٦أ椚鍑ׅחծسًُؗٝز剅ֻ״ֲחׅկ
In Closing穄ח
Bret VictorThe Future of Programming@DBX Conference 2013
“— Bret VictorThe most dangerous thoughtyou can have as a creative person isto think you know what you're doing.
㼰׃׆אד滠㹋חկ
Thank You!Follow Me @ cssradar
studiomohawk
77web
kanamasa
yuhei_fujita
yuya4
sji
ohnoeight
masayaaoyama
j5ik2o
uhooi
microcms
mkeeda
star_zero
jrom
jonrohan
marktimemedia
jonyablonski
eileencodes
jponch
dougneiner
danielanewman
philhawksworth
chriscoyier
sachag
kneath