• Like
CSS Methodology
Upcoming SlideShare
Loading in...5
×

CSS Methodology

  • 5,564 views
Uploaded on

 

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,564
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
21
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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