Presented by Dave Shea

Transcription

1 Presented by Dave Shea

2 General Management Strategies

3 Tip #1 Ensure your CSS caches properly. Asegúrate de que tu CSS se guarda en cache correctamente.

4 Inline: No!

5 External Files: Yes!

6 Caching Trick: Date in URL

7 Caching Trick: Querystring

8 Tip #2 Code Formatting is Important. El formato del código es importante.

9 Condensed Formatting?

10 Standard Formatting

11 Tip #3 Comment Your Code. Comenta tu código.

12 Comment Tricky Selectors

13 Commenting Sections

14 Commenting </div>

15 Commenting Hacks

16 Use White Space for Commenting

17 Server-side Comments

18 Tip #4 Code Consistently. Escribe código de forma coherente.

19 Naming Conventions.content #mainarea #column3

20 Semantics in the Wild source: westciv.typepad.com/dog_or_higher/2005/11/real_world_sema.html

21 Source Order

22 Tip #5 Understand the Cascade. Comprende la jerarquía en cascada.

23 Basic Cascade <h2 class="contact"> Contact </h2> h2 { font-size: large; h2.contact { font-size: small;

24 Basic Cascade <h2 class="contact"> Contact </h2> h2 { font-size: large; h2.contact { font-size: small;

25 Decipherable CSS vs. the Cascade <div id="header"> <h2 class="contact"> Contact </h2> </div> #header h2 { font-size: large; p { font-size: 1.2em; line-height: 1.6; margin: 0.8em 0; color: #333; li { font-size: 1.5em; color: #999; list-style: square; padding: 0; margin: em; line-height: 2;

26 Decipherable CSS vs. the Cascade <div id="header"> <h2 class="contact"> Contact </h2> </div> #header h2 { font-size: large; p { font-size: 1.2em; line-height: 1.6; margin: 0.8em 0; color: #333; li { font-size: 1.5em; color: #999; list-style: square; padding: 0; margin: em; line-height: 2;.contact { font-size: small;

27 Decipherable CSS vs. the Cascade <div id="header"> <h2 class="contact"> Contact </h2> </div> #header h2 { font-size: large; p { font-size: 1.2em; line-height: 1.6; margin: 0.8em 0; color: #333; li { font-size: 1.5em; color: #999; list-style: square; padding: 0; margin: em; line-height: 2;.contact { font-size: small;

28 Decipherable CSS vs. the Cascade <div id="header"> <h2 class="contact"> Contact </h2> </div> #header h2 { font-size: large; p { font-size: 1.2em; line-height: 1.6; margin: 0.8em 0; color: #333; li { font-size: 1.5em; color: #999; list-style: square; padding: 0; margin: em; line-height: 2; #header h2.contact { font-size: small;

29 Keep Selectors Short h2 h2.contact #header h2.contact body #header h2.contact body.container #header h2.contact body.container div#header h2.contact body#homepage.container div#header h2.contact

30 Breaking up CSS by Section <div id="header"> <h2> Contact </h2> </div> #header h2 { font-size: large; p { font-size: 1.2em; line-height: 1.6; margin: 0.8em 0; color: #333; li { font-size: 1.5em; color: #999; list-style: square; padding: 0; margin: em; line-height: 2; /* overrides selector in design.css */ #header h2 { font-size: small;

31 Tip #6 Take Advantage of the Cascade. Saca provecho de la jerarquía en cascada.

32 Body IDs and Classes

33 Body Class = Design Control

34 Body Class = Design Control

35 Body Class = Design Control

36 Body Class = Design Control

37 Body Class CSS

38 Body ID: Gemination source: csszengarden.com/062

39 Body ID: Gemination in IE6 source: csszengarden.com/062

40 Tip #7 Logically Break Down CSS Files. Separa los archivos CSS de forma lógica.

41 Granular CSS Files #home h2 { color: red; #services h2 { color: green; #contact h2 { color: blue; #home h2 { color: red; #services h2 { color: green; #contact h2 { color: blue;

42 Inner Layout Differences (1)

43 Inner Layout Differences (2)

44 Abstracting Design Components

45 File Management

46 Server-Side Imports

47 Tip #8 Reset Browser Formatting. Modifica los estilos por defecto del navegador.

48 Unstyled Markup

49 REALLY Unstyled Markup

50 undohtml.css source:

51 Tip #9 Learn How to Debug CSS. Aprende a depurar las CSS.

52 Acid2 Test source: webstandards.org/action/acid2

53 Debugging Strategy Take the time to understand why a bug is occurring.

54 Position is Everything source: positioniseverything.net/explorer.html

55 Tip #10 Use CSS Hacks Judiciously. Utiliza los hacks con lógica.

56 Hack Philosophy Build for the ideal, correct for the exception.

57 IE5 Filters IE5/Mac Band Pass Filter "ie5mac.css" /**/ IE5/Win Mid Pass tty { i{content:"\";/*" url('ie5win.css'); /* "; /* */

58 IE6 Targetting = IE5 Overrides ie6win.css... ie5win.css ie6win.css * html #header { margin: 5px 10px; ie5win.css * html #header { margin: 10px;

59 Tip #11 IE7? Don t Panic! IE7? Qué nadie se asuste!

60 IE7: No More Hacks

61 IE7 > IE6

62 IE Conditional Comments <!-- [if IE 7]> <style> #header { margin: 5px 10px; </style> <![endif]-->

63