pro css

how to improve our css skills

Transcript

1. PRO CSS 2012.12.19 13年1月6⽇日星期⽇日
2. 专业和非专业的区别 13年1月6⽇日星期⽇日
3. 目的是要让大家可以区 分什么是好的，什么是 不好的。 如何写出好的 css 13年1月6⽇日星期⽇日
4. cೂޅิۚ$44ඣ௜ c$44ࡏܒ 13年1月6⽇日星期⽇日
5. 1.Don’t rush you code and keep it simple 13年1月6⽇日星期⽇日
6. cೂޅಀൌགྷĤ c໡֥Ϸم൞ቋႪ֥ગĤ cႵљ֥ϷمગĤ cೂޅಀႪ߄Ĥ 13年1月6⽇日星期⽇日
7. ᅧ໤ࠎЧᆩ്ࠣ࠯ె 13年1月6⽇日星期⽇日
8. %3: 对于其他语⾔言来说，可以通 过函数(function)之类的东东 来避免重⽤用， ⽽而在CSS⾥里， 可以通过编写可复⽤用的类 (class)来做到这⼀一点。不过有 时，通过简单的重构 (refactoring)就可以实现 13年1月6⽇日星期⽇日
9. .navigation li {color: #333;} .navigation li a {color: #333;} /*refatcoring 重构如下:*/ .navigation li, .navigation li a { color: #333; } 13年1月6⽇日星期⽇日
10. 4.OOCSS 13年1月6⽇日星期⽇日
11. ଢѓğิིۚੱބॖົ޹ྟ ൌགྷğ ࢲܒაຓܴٳ৖ ಸఖაଽಸٳ৖ ఙႨ*%࿊ᄴఖ
    Y 13年1月6⽇日星期⽇日
12. #my-button, .my-box, .my-box img { border: 1px solid #444; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .skin { border: 1px solid #444; border-radius: 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } 13年1月6⽇日星期⽇日
13. #main h2 { color: #343434; font-size: 25px; line-height: 20px; ... } 13年1月6⽇日星期⽇日
14. 5.CSS3 13年1月6⽇日星期⽇日
15. c ໡ᄸહҌିൌགྷᆃ۱ིݔĤ c ݺ֥đ໡ᆩ֡ᅇϷਔbᆃᇕٚم൞DTTॖၛൌགྷ֥હĤ c ॖၛđܣ൙ࢲඏ c ҂ॖၛđࣉྛֻ҄ c ᛍফఖ֥ᆦӻ౦ঃೂޅĤ c (PPEđཬၩනđܣ൙ࢲඏb c ҂ݺđࣉྛֻ҄ c ᆃᇕིݔđࣇࣇ൞ุဒ֥ิശđߎ൞ܱ࡯ۿି c ࣇࣇ൞ุဒ֥ิശğؓႿ҂ᆦӻ֥ᛍফఖ҂ቓԩ৘đࠇᆀ۳ԛ၂۱߭ ๼ٚσ GBMMCBDL c ൞ܱ࡯ۿିđࣉྛֻ҄ c ପીљ֥Ϸمਔđсྶေᅳ֞ࢳथ֥ٚم 13年1月6⽇日星期⽇日
16. DEMO 13年1月6⽇日星期⽇日
17. 13年1月6⽇日星期⽇日
18. 
    ᇯ҄ิശაႪ࿮ࢆࠩ 13年1月6⽇日星期⽇日
19. 其他 • CSS预处理器 • 关注未来 • 阅读其他⼈人的代码 • 不断实践 13年1月6⽇日星期⽇日
20. $44ࡏܒ 13年1月6⽇日星期⽇日
21. cॖყ࡮ྟ cॖᇗႨྟ cॖົ޹ྟ cॖঔᅚྟ ݺࡏܒ 13年1月6⽇日星期⽇日
22. ༵টुुّ૫࢝ҋ 13年1月6⽇日星期⽇日
23. ࠎႿڳჭ෍টྩڿቆࡱ֥ဢൔ .widget { background: yellow; border: 1px solid black; color: black; width: 50%; } #sidebar .widget { width: 200px; } body.homepage .widget { background: white; } 13年1月6⽇日星期⽇日
24. ݖႿگᄖ֥࿊ᄴఖ #main-nav ul li ul li div { } #content article h1:first-child { } #sidebar > div > h3 + p { } 13年1月6⽇日星期⽇日
25. ݖႿ௴๙ ၞᇗ଀ ֥DMBTT଀ӫ <div class="widget"> <h3 class="title">...</h3> <div class="contents"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum accumsan dignissim. <button class="action">Click Me!</button> </div> </div> .widget {} .widget .title {} .widget .contents {} .widget .action {} 13年1月6⽇日星期⽇日
26. ၂่ܿᄵ৚ቓݖ؟֥൙౦ .widget { position: absolute; top: 20px; left: 20px; background-color: red; font-size: 1.5em; text-transform: uppercase; } 13年1月6⽇日星期⽇日
27. ᄜটुुቋࡄൌ࡬ 13年1月6⽇日星期⽇日
28. ܿхԊ๬ /* Grenade */ #main-nav ul li ul { } /* Sniper Rifle */ .subnav { } 13年1月6⽇日星期⽇日
29. ٳطᇍᆭ ҃अބק໊ႋھႮః෰׿৫֥҃अဢൔ ࠇ׿৫֥ಸఖটڵᄳ 13年1月6⽇日星期⽇日
30. ଁ଀ॢࡗ /* High risk of style cross-contamination */ .widget { } .widget .title { } /* Low risk of style cross-contamination */ .widget { } .widget-title { } 13年1月6⽇日星期⽇日
31. ൐DTTࢲܒ۷Ⴕઆࠠྟ ࠎԤো྘ CBTF ҃अ MBZPVU ଆॶ NPEVMFT ሑ෿ TUBUF 13年1月6⽇日星期⽇日
32. ൐ႨDMBTTটקၬဢൔđ౏ࣇࣇ൞ קၬဢൔ js-* support-* 13年1月6⽇日星期⽇日
33. ۷Ⴕઆࠠྟ֥ଁ଀ /* A component */ .button-group { } /* A component modifier (modifying .button) */ .button--primary { } /* A component sub-object (lives within .button) */ .button__icon { } /* A layout class */ .l-header { } 13年1月6⽇日星期⽇日
34. BE PRO thanks 13年1月6⽇日星期⽇日