CSS Methodology


Published on

Published in: Technology, Education
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

CSS Methodology

  1. 1. CSS Methodology by Zohar Arad
  2. 2. What is CSS? <ul><li>CSS stands for Cascading Style Sheets and is the language used for implementing designs on HTML documents. </li></ul><ul><li>CSS is a declarative language, not a programmable language. </li></ul><ul><li>Currently the main-stream version of CSS supported by all major browsers is CSS 2.1 </li></ul>
  3. 3. CSS Basics - Selectors <ul><li>CSS declarations are comprised of &quot;selectors&quot; and &quot;properties&quot;. </li></ul><ul><li>Selectors are used to select the element(s) in the page the declaration is applied to. </li></ul><ul><li>Properties are used to denote which styling properties should be applied to the selected element(s) </li></ul><ul><li>Example: </li></ul><ul><li>selector{ </li></ul><ul><li>     property:value; </li></ul><ul><li>} </li></ul>
  4. 4. CSS Basics - Selectors Selector Pattern Description Universal * Matches any element Type (element) E Matches any E element Class .class Matches any element with class=&quot;class&quot; ID #id Matches any element with id=&quot;id&quot; Descendant E D Matches any element D who is a descendant of element E Child E > D Matches any element D who is a direct child of element E Sibling E + D Matches any element D who is a direct sibling (adjacent) of element E Attribute E[attr] E[attr=val] E[attr~=val1 val2] E[attr|=val] Match element with attr attribute is equal to val attribute is equal to val1 or val2 attribute is not equal to val Pseudo-classes :hover, :active, :visited, :link, :first-child, :first-line, :first-letter :before, :after
  5. 5. CSS Basics - Selectors <ul><li>The following selectors are not supported in IE6: </li></ul><ul><ul><li>Child selectors - E > D </li></ul></ul><ul><ul><li>Sibling selectors - E + D </li></ul></ul><ul><ul><li>Attribute selectors - E[attr] ... </li></ul></ul><ul><ul><li>Multiple class selectors - E.myclass.active </li></ul></ul><ul><ul><li>Pseudo-classes - :before, :after, :first-child, :focus, :lang </li></ul></ul><ul><ul><li>:hover pseudo-class only works on <a> elements </li></ul></ul><ul><li>  </li></ul><ul><li>You can use this to target IE6 specific CSS: </li></ul><ul><li>  </li></ul><ul><li>#myID #container { background-image:url(/transparent.gif); } /* IE6 */ </li></ul><ul><li>#myID > #container { background-image:url(/transparent.png); } </li></ul>
  6. 6. CSS Basics - Conflict Resolution <ul><li>When two CSS selectors target the same element(s), how does the browser know which declaration (CSS block) should be applied? </li></ul><ul><li>This problem is known as CSS Conflict Resolution and is resolved on three levels: </li></ul><ul><ul><li>Cascade - selector level </li></ul></ul><ul><ul><li>Importance - declaration level </li></ul></ul><ul><ul><li>Specificity - selector level </li></ul></ul>
  7. 7. CSS Basics - Conflict Resolution p - 0,0,0,1   p.class - 0,0,1,1   #nav li.active - 0,1,1,1 .ie .menu a:hover - 0,0,3,1 form input[type=submit] - 0,0,0,2 inline styles ID selectors Class selectors Type selectors 1 1 1 1
  8. 8. CSS Basics - Conflict Resolution <ul><li>Using the specificity table above we can determine how the browser will choose between two selectors that target the same element(s). </li></ul><ul><li>Specific selectors will always take precedence over less specific selectors. </li></ul><ul><li>Specificity works at the selector level . </li></ul><ul><li>  </li></ul><ul><li>If two selectors with different specificity contain different CSS properties, there will be no conflict between them. </li></ul>
  9. 9. CSS Basics - Conflict Resolution <ul><li>For example: </li></ul><ul><li>  </li></ul><ul><li>a:hover{ /* specificity 0,0,0,1 */ </li></ul><ul><li>    color:blue; /* affects link color */ </li></ul><ul><li>} </li></ul><ul><li>li a:hover{ /* specificity 0,0,0,2 */ </li></ul><ul><li>    text-decoration:underline; /* affects link decoration */ </li></ul><ul><li>} </li></ul><ul><li>#post a:hover{ /* specificity 0,1,0,1 */ </li></ul><ul><li>    color:red; /* affects link color - conflicts with a:hover */ </li></ul><ul><li>} </li></ul>
  10. 10. CSS Basics - Conflict Resolution <ul><li>When two or more CSS selectors have the same specificity and target the same element(s), how will the browser choose which will take precedence? </li></ul><ul><li>According to the cascade, selectors are evaluated in the order they appear in the document. </li></ul><ul><li>  </li></ul><ul><li>Therefore, selectors that appear late in the document will take precedence over selectors that appear early in the document. </li></ul>
  11. 11. CSS Basics - Conflict Resolution <ul><li>When a browser evaluates CSS document it does so in the following order: </li></ul><ul><ul><li>User-agent CSS - lowest precedence </li></ul></ul><ul><ul><li>Developer CSS - second-lowest precedence </li></ul></ul><ul><ul><li>User-defined CSS - highest precedence </li></ul></ul><ul><li>  </li></ul><ul><li>The rules of the cascade will be applied to the above CSS in ascending order. </li></ul><ul><li>Like specificity, the cascade works at the selector level. </li></ul><ul><li>Two overlapping selectors with different CSS properties will not cause a conflict. </li></ul>
  12. 12. CSS Basics - Conflict Resolution <ul><li>When two conflicting selectors contain the same CSS property / properties, how does the browser choose which property to apply? </li></ul><ul><li>CSS properties can be marked as &quot;important&quot; which will mean they should take precedence over identical properties in conflicting selectors. </li></ul><ul><li>For example: </li></ul><ul><li>body { color:black !important; } </li></ul><ul><li>div a { color:blue; } </li></ul>
  13. 13. CSS Basics - Conflict Resolution <ul><li>Putting everything together: </li></ul><ul><li>When two or more selectors target the same element(s) the browser will: </li></ul><ul><ul><li>Try to resolve conflicting properties using specificity </li></ul></ul><ul><ul><li>Try to resolve conflicting selectors using the cascade </li></ul></ul><ul><ul><li>Try to resolve conflicting selectors using importance </li></ul></ul><ul><li>  </li></ul><ul><li>Specificity has the lowest precedence and importance has the highest precedence. </li></ul><ul><li>When resolving conflicts using importance, the rules of the cascade still apply! </li></ul>
  14. 14. CSS Basics - The Box Model <ul><li>The box model defines how the browser should handle the rectangular boxes that are generated for elements. </li></ul><ul><li>  </li></ul><ul><li>See image below or a 3D diagram </li></ul><ul><li>  </li></ul>
  15. 15. CSS Basics - The Box Model <ul><li>In simple terms we can say that the box model defines the calculation of box dimensions as following: </li></ul><ul><li>total width = border-right + padding-right + width + padding-left + border-left </li></ul><ul><li>total height = border-top + padding-top + height + padding-bottom + border-bottom </li></ul><ul><li>  </li></ul><ul><li>Why is this important you ask? </li></ul><ul><li>Simple - So we can calculate element dimensions when planning our layout. </li></ul>
  16. 16. CSS Basics - The Box Model <ul><li>A few things to remember: </li></ul><ul><li>Block-level elements have explicit dimensions </li></ul><ul><li>Inline-level elements have implicit dimensions </li></ul><ul><li>Floating an element will cause an element to lose its width, unless set explicitly (as required by CSS specifications) </li></ul><ul><li>Vertical margins are collapsed by the browser only so the larger of the two will take effect. </li></ul>
  17. 17. CSS Basics <ul><li>Feedback and 5min break </li></ul>
  18. 18. CSS Best Practices & Tips <ul><li>Reset styles to eliminate browser inconsistencies ( example ) </li></ul><ul><li>  </li></ul><ul><li>Use meaningful markup </li></ul><ul><li>Separate content from display </li></ul><ul><li>Use meaningful class and ID names </li></ul><ul><li>Use specific selectors for faster parsing </li></ul><ul><li>Harness the power of the cascade and CSS inheritance to your advantage </li></ul><ul><li>  </li></ul><ul><li>  </li></ul>
  19. 19. CSS Best Practices & Tips <ul><li>Plan your layout carefully during the HTML coding stage </li></ul><ul><li>Group similar-styled page components together </li></ul><ul><li>Define typography once at the beginning of your CSS document </li></ul><ul><li>Use browser-specific CSS handicap to your advantage when trying to handle browser-specific problems </li></ul><ul><li>#nav li a { ...some css for ie6 } </li></ul><ul><li>#nav li > a { ...some css for all browsers } </li></ul>
  20. 20. CSS Best Practices & Tips <ul><li>Use IE conditional comments to apply global IE selectors: </li></ul><ul><li>  </li></ul><ul><li><!--[if lt IE 7 ]> <body class=&quot; ie &quot; id=&quot; ie6 &quot;> <![endif]--> <!--[if IE 7 ]> <body class=&quot; ie &quot; id=&quot; ie7 &quot;> <![endif]--> <!--[if IE 8 ]> <body class=&quot; ie &quot; id=&quot; ie8 &quot;> <![endif]--> <!--[if !IE]><!--> <body> <!--<![endif]--> </li></ul>
  21. 21. Design Deconstruction <ul><li>When approaching a new project, it might be useful to deconstruct the design as follows: </li></ul><ul><ul><li>Look at content without design - Analyze what's the site's content structure so you can plan your HTML accordingly </li></ul></ul><ul><ul><li>Analyze the proposed layout and identify common patterns and pitfalls </li></ul></ul><ul><ul><li>Analyze the design's typographic structure and implement at the beginning of your CSS </li></ul></ul><ul><ul><li>Identify graphic patterns that should be grouped into a CSS sprite. Use as few sprites as possible. If needed separate pattern sprites from icon sprites. </li></ul></ul>
  22. 22. Design Deconstruction <ul><ul><li>Try to identify browser-specific pitfalls in the design and either account for them in your plan or remove from design </li></ul></ul><ul><ul><li>Try to identify what kind of interaction effects you should implement in the design and opt for CSS-driven effects whenever possible. </li></ul></ul><ul><ul><li>Implement your UI once! If there are UI inconsistencies, either ignore or educate your designer. </li></ul></ul><ul><ul><li>Identify resource-hungry decorations and put them on low-graphics diet. </li></ul></ul><ul><ul><li>Reuse! Reuse! Reuse! </li></ul></ul><ul><li>  </li></ul><ul><li>Lets look at Ars Technica , Smashing Mag. and Linux.com </li></ul>
  23. 23. Break... <ul><li>  </li></ul>
  24. 24. Javascript <ul><li>Javascript is a fickle friend!!! </li></ul><ul><li>Its a bit old, its a bit off-standard, it sort-of has an OOP model, but when you get to know it, its oodles of fun! </li></ul>
  25. 25. Javascript - The basics <ul><li>Javascript runs on the client which means that execution speed depends on the rendering engine and the user's computer </li></ul><ul><li>In other words - The same Javascript code will run differently on two computers. </li></ul>
  26. 26. Javascript - The basics <ul><li>If you can't beat them, join them! </li></ul><ul><ul><li>Minimize DOM complexity </li></ul></ul><ul><ul><li>Include your Javascript where appropriate in the DOM </li></ul></ul><ul><ul><li>Load Javascript on-demand if possible </li></ul></ul><ul><ul><li>Cache your Javascript whenever possible </li></ul></ul><ul><ul><li>Reduce file size to reduce initial parsing time </li></ul></ul><ul><ul><li>Reduce network traffic to minimum </li></ul></ul><ul><ul><li>Simplify your code to optimize execution time </li></ul></ul><ul><ul><li>Validate your code with JSLint or similar </li></ul></ul>
  27. 27. Javascript - The basics <ul><li>Understand Javascript variable-scope. </li></ul><ul><ul><li>Javascript variables has no private/public name-spaces </li></ul></ul><ul><ul><li>Variables can be either global or local - beware of collision </li></ul></ul><ul><ul><li>Declare variables explicitly to denote type and initial value and avoid name collisions </li></ul></ul><ul><ul><li>Optionally, use Javascript Objects as variable containers </li></ul></ul><ul><li>  </li></ul><ul><li>var params = { </li></ul><ul><li>    name : 'zohar', </li></ul><ul><li>    age : 34, </li></ul><ul><li>    height : 187, </li></ul><ul><li>    skills : ['css', 'js', 'xhtml'] </li></ul><ul><li>} </li></ul>
  28. 28. Javascript - The basics <ul><li>Know thy DOM </li></ul><ul><li>DOM is the mechanism we use to reference and manipulate our document's HTML. </li></ul><ul><li>  </li></ul><ul><li>The DOM is a programmatic, object-oriented way to represent and handle HTML (XML) structure. </li></ul><ul><li>  </li></ul><ul><li>In relation to text manipulation, DOM and XML parsing are very slow. </li></ul><ul><li>  </li></ul><ul><li>Each rendering engine implements the DOM a bit differently. </li></ul>
  29. 29. Javascript - The basics <ul><li>Know thy DOM </li></ul><ul><ul><li>DOM calls are expensive. Use the when appropriate </li></ul></ul><ul><ul><li>Be specific in your DOM calls. Use getElementById when possible </li></ul></ul><ul><ul><li>Cache DOM calls </li></ul></ul><ul><ul><li>Although considered &quot;less&quot; elegant, innerHTML is much faster than document .appendChild() </li></ul></ul>
  30. 30. Javascript - The basics <ul><li>Understand the meaning of &quot;this&quot; </li></ul><ul><li>&quot;this&quot; refers to the scope of code execution at any given point in the code, during execution time (not parse time). </li></ul><ul><li>The easiest way to remember what is &quot;this&quot; is as follows: </li></ul><ul><li>&quot;this&quot; will always refer to the object before the &quot;.&quot; sign in the calling code. </li></ul>
  31. 31. Javascript - The basics <ul><li>function test(){ </li></ul><ul><li>    var _this = this ; //this points to the window object </li></ul><ul><li>} </li></ul><ul><li>myObj = { </li></ul><ul><li>    run : function (){ </li></ul><ul><li>         console.log( this .name); // this points to myObj </li></ul><ul><li>    } , </li></ul><ul><li>    name : 'zohar' </li></ul><ul><li>} </li></ul><ul><li>myObj.run(); </li></ul><ul><li>myElement. onclick = function (){ </li></ul><ul><li>    this .className = 'active'; // this points to myElement </li></ul><ul><li>} </li></ul>
  32. 32. Javascript - Programming Tips <ul><li>Javascript short-hand is cool. Use it! </li></ul><ul><li>//one-line variable assignment </li></ul><ul><li>var i = 0, arr = [], el = document .getElementById(' id '); </li></ul><ul><li>  </li></ul><ul><li>// default value assignment </li></ul><ul><li>//arg1 is passed to the function </li></ul><ul><li>var status = arg1 || ' active ';  </li></ul><ul><li>//variable assignment in if statement </li></ul><ul><li>var el; </li></ul><ul><li>if ( el = document .getElementById(' id ') ){ ..... } </li></ul>
  33. 33. Javascript - Programming Tips <ul><li>// selective method execution </li></ul><ul><li>myObj = { </li></ul><ul><li>    func1 : function () {}, </li></ul><ul><li>    func1 : function () {} </li></ul><ul><li>} </li></ul><ul><li>function test( status ){ </li></ul><ul><li>    myObj[ status == 'active' ? ' func1 ' : ' func2 '](); </li></ul><ul><li>} </li></ul>
  34. 34. Javascript - Programming Tips <ul><li>Use JSON for both parameters and code clusters to make your code more ordered and readable. </li></ul><ul><li>var tabManager = { </li></ul><ul><li>    init : function (){ ... } </li></ul><ul><li>     onTabChange : function () { ... } </li></ul><ul><li>    params : { </li></ul><ul><li>        active : 'active', </li></ul><ul><li>        inactive : 'inactive' </li></ul><ul><li>        tabsParentID : 'tabs' </li></ul><ul><li>    } </li></ul><ul><li>} </li></ul>
  35. 35. Javascript - Programming Tips <ul><li>Try thinking OOP in Javascript: </li></ul><ul><li>  </li></ul><ul><li>var Class = function (obj){     return function (){         if( typeof obj.initialize === 'function' ){             obj.initialize. apply (obj,arguments);         }         return obj;     } } Function . prototype .bind = function (tgt){     var self = this ;     return function (){         self. apply (tgt, arguments);     }(); } </li></ul>
  36. 36. Javascript - Programming Tips <ul><li>Try thinking OOP in Javascript: </li></ul><ul><li>  </li></ul><ul><li>var Test = new Class({      initialize : function (){         console.log('starting', arguments , this );          this .run.bind( this );         bindTest.bind( this );     },      run :function(){         console.log( this ,'running');     } }); function bindTest(){     console.log( this ,'bindTest'); } var t = new Test(true,10); </li></ul>
  37. 37. Javascript <ul><li>Questions Time </li></ul>