CSS Best Practices

Presented at Geeksquad drills

Transcript

1. CSS
   BEST PRACTICES
   Vinay M ( )
   artminister.com
   

   View Slide

2. CSS RESET
   NOT ALL WEB BROWSERS ARE CREATED EQUAL
   

   View Slide

3. CSS RESET
   Reset Default Browser Styles
   Better control elements in your page
   Cross browser compatiblity
   ERIC MEYER'S CSS RESET
   NORMALIZE CSS
   http://meyerweb.com/eric/tools/css/reset/
   http://necolas.github.com/normalize.css/
   

   View Slide

4. <
   !
   D
   O
   C
   T
   Y
   P
   E h
   t
   m
   l
   >
   <
   h
   t
   m
   l
   >
   <
   h
   e
   a
   d
   >
   <
   t
   i
   t
   l
   e
   >
   C
   S
   S R
   e
   s
   e
   t
   s D
   e
   m
   o
   <
   /
   t
   i
   t
   l
   e
   >
   <
   l
   i
   n
   k r
   e
   l
   =
   "
   s
   t
   y
   l
   e
   s
   h
   e
   e
   t
   " h
   r
   e
   f
   =
   "
   c
   s
   s
   /
   r
   e
   s
   e
   t
   .
   c
   s
   s
   "
   >
   <
   l
   i
   n
   k r
   e
   l
   =
   "
   s
   t
   y
   l
   e
   s
   h
   e
   e
   t
   " h
   r
   e
   f
   =
   "
   c
   s
   s
   /
   m
   y
   w
   e
   b
   s
   i
   t
   e
   .
   c
   s
   s
   "
   >
   <
   /
   h
   e
   a
   d
   >
   <
   b
   o
   d
   y
   >
   <
   !
   -
   - A
   l
   l m
   y C
   o
   n
   t
   e
   n
   t g
   o
   e
   s h
   e
   r
   e -
   -
   >
   <
   !
   -
   - / A
   l
   l m
   y C
   o
   n
   t
   e
   n
   t g
   o
   e
   s h
   e
   r
   e -
   -
   >
   <
   /
   b
   o
   d
   y
   >
   <
   /
   h
   t
   m
   l
   >
   

   View Slide

5. ANNOTATE YOUR CSS
   Comments
   Indentation
   Structure
   DEMO
   

   View Slide

6. DO NOT USE INLINE-CSS
   USE EXTERNAL CSS AND ADD A CLASS INSTEAD
   <
   a
   r
   t
   i
   c
   l
   e s
   t
   y
   l
   e
   =
   "
   m
   a
   r
   g
   i
   n
   : 1
   0
   p
   x
   ; p
   o
   s
   i
   t
   i
   o
   n
   : r
   e
   l
   a
   t
   i
   v
   e
   ;
   "
   >
   <
   h
   1 s
   t
   y
   l
   e
   =
   "
   f
   o
   n
   t
   -
   s
   i
   z
   e
   :
   1
   2
   p
   x
   "
   > M
   y a
   w
   e
   s
   o
   m
   e b
   l
   o
   g <
   h
   1
   >
   <
   a
   r
   t
   i
   c
   l
   e
   >
   <
   h
   e
   a
   d
   >
   <
   l
   i
   n
   k r
   e
   l
   =
   "
   s
   t
   y
   l
   e
   s
   h
   e
   e
   t
   " h
   r
   e
   f
   =
   "
   r
   e
   s
   e
   t
   .
   c
   s
   s
   "
   >
   <
   l
   i
   n
   k r
   e
   l
   =
   "
   s
   t
   y
   l
   e
   s
   h
   e
   e
   t
   " h
   r
   e
   f
   =
   "
   m
   y
   w
   e
   b
   s
   i
   t
   e
   .
   c
   s
   s
   "
   >
   <
   /
   h
   e
   a
   d
   >
   <
   a
   r
   t
   i
   c
   l
   e c
   l
   a
   s
   s
   =
   "
   a
   r
   t
   i
   c
   l
   e
   "
   >
   <
   h
   1 c
   l
   a
   s
   s
   =
   "
   p
   a
   g
   e
   t
   i
   t
   l
   e
   "
   > M
   y a
   w
   e
   s
   o
   m
   e b
   l
   o
   g <
   h
   1
   >
   <
   a
   r
   t
   i
   c
   l
   e
   >
   

   View Slide

7. REDUCE RE-USE RECYCLE
   USE CLASSES INSTEAD OF ID'S
   <
   u
   l i
   d
   =
   "
   P
   r
   i
   m
   a
   r
   y
   "
   >
   <
   l
   i
   >
   <
   a h
   r
   e
   f
   =
   "
   #
   "
   >
   H
   o
   m
   e
   <
   a
   >
   <
   /
   l
   i
   >
   <
   l
   i
   >
   <
   a h
   r
   e
   f
   =
   "
   #
   "
   >
   A
   b
   o
   u
   t
   <
   a
   >
   <
   /
   l
   i
   >
   <
   l
   i
   >
   <
   a h
   r
   e
   f
   =
   "
   #
   "
   >
   C
   o
   n
   t
   a
   c
   t
   <
   a
   >
   <
   /
   l
   i
   >
   <
   /
   u
   l
   >
   /
   * Y
   o
   u c
   a
   n
   t u
   s
   e t
   h
   e I
   D a
   g
   a
   i
   n i
   n t
   h
   e s
   a
   m
   e p
   a
   g
   e *
   /
   <
   d
   i
   v i
   d
   =
   "
   P
   r
   i
   m
   a
   r
   y
   "
   >
   <
   /
   d
   i
   v
   >
   

   View Slide

8. ADD MULTIPLE CLASSES
   CSS
   <
   !
   -
   - H
   e
   a
   d
   e
   r -
   -
   >
   <
   u
   l c
   l
   a
   s
   s
   =
   "
   m
   e
   n
   u p
   r
   i
   m
   a
   r
   y
   "
   >
   <
   l
   i
   >
   <
   a h
   r
   e
   f
   =
   "
   #
   "
   >
   H
   o
   m
   e
   <
   a
   >
   <
   /
   l
   i
   >
   <
   l
   i
   >
   <
   a h
   r
   e
   f
   =
   "
   #
   "
   >
   A
   b
   o
   u
   t
   <
   a
   >
   <
   /
   l
   i
   >
   <
   /
   d
   i
   v
   >
   <
   !
   -
   - F
   o
   o
   t
   e
   r -
   -
   >
   <
   u
   l c
   l
   a
   s
   s
   =
   "
   m
   e
   n
   u f
   o
   o
   t
   e
   r
   m
   e
   n
   u
   "
   >
   <
   l
   i
   >
   <
   a h
   r
   e
   f
   =
   "
   #
   "
   >
   H
   o
   m
   e
   <
   a
   >
   <
   /
   l
   i
   >
   <
   l
   i
   >
   <
   a h
   r
   e
   f
   =
   "
   #
   "
   >
   A
   b
   o
   u
   t
   <
   a
   >
   <
   /
   l
   i
   >
   <
   /
   d
   i
   v
   >
   .
   m
   e
   n
   u
   {
   l
   i
   s
   t
   -
   s
   t
   y
   l
   e
   :
   n
   o
   n
   e
   }
   /
   * P
   r
   i
   m
   a
   r
   y M
   e
   n
   u *
   /
   .
   p
   r
   i
   m
   a
   r
   y
   { b
   a
   c
   k
   g
   r
   o
   u
   n
   d
   :
   b
   l
   a
   c
   k
   ;
   }
   /
   * M
   e
   n
   u i
   n t
   h
   e f
   o
   o
   t
   e
   r *
   /
   .
   f
   o
   o
   t
   e
   r
   m
   e
   n
   u
   { b
   a
   c
   k
   g
   r
   o
   u
   n
   d
   :
   b
   l
   u
   e
   ;
   }
   

   View Slide

9. CHAINING CLASESS
   <
   p c
   l
   a
   s
   s
   =
   "
   i
   n
   t
   r
   o h
   i
   g
   h
   l
   i
   g
   h
   t
   "
   >
   T
   h
   i
   s i
   s a p
   a
   r
   a
   g
   r
   a
   p
   h
   .
   <
   /
   p
   >
   <
   d
   i
   v c
   l
   a
   s
   s
   =
   "
   n
   e
   w
   s h
   i
   g
   h
   l
   i
   g
   h
   t
   "
   >
   T
   h
   i
   s i
   s t
   h
   e n
   e
   w
   s
   .
   <
   /
   d
   i
   v
   >
   .
   h
   i
   g
   h
   l
   i
   g
   h
   t
   {
   b
   a
   c
   k
   g
   r
   o
   u
   n
   d
   :
   y
   e
   l
   l
   o
   w
   ;
   b
   o
   r
   d
   e
   r
   : 1
   p
   x g
   r
   e
   y s
   o
   l
   i
   d
   ;
   }
   /
   * Y
   o
   u w
   a
   n
   t t
   o h
   i
   g
   h
   l
   i
   g
   h
   t n
   e
   w
   s w
   i
   t
   h a r
   e
   d b
   a
   c
   k
   g
   r
   o
   u
   n
   d *
   /
   .
   n
   e
   w
   s
   .
   h
   i
   g
   h
   l
   i
   g
   h
   t
   {
   b
   a
   c
   k
   g
   r
   o
   u
   n
   d
   :
   r
   e
   d
   ;
   b
   o
   r
   d
   e
   r
   -
   w
   i
   d
   t
   h
   :
   1
   0
   p
   x
   ;
   }
   

   View Slide

10. NAMING & SEMANTICS
    Better names
    <
    !
    -
    - H
    T
    M
    L -
    -
    >
    <
    a c
    l
    a
    s
    s
    =
    "
    g
    r
    e
    e
    n
    "
    >
    R
    e
    a
    d m
    o
    r
    e a
    b
    o
    u
    t N
    A
    S
    A
    <
    /
    a
    >
    /
    * C
    S
    S *
    /
    .
    g
    r
    e
    e
    n
    {
    c
    o
    l
    o
    r
    : g
    r
    e
    e
    n
    ;
    }
    <
    !
    -
    - H
    T
    M
    L -
    -
    >
    <
    a c
    l
    a
    s
    s
    =
    "
    m
    e
    n
    u
    i
    t
    e
    m
    "
    >
    R
    e
    a
    d m
    o
    r
    e a
    b
    o
    u
    t N
    A
    S
    A
    <
    /
    a
    >
    /
    * C
    S
    S *
    /
    .
    m
    e
    n
    u
    i
    t
    e
    m
    {
    c
    o
    l
    o
    r
    : b
    l
    u
    e
    ;
    }
    

    View Slide

11. SPECIFICITY
    DEMO
    

    View Slide

12. START WITH A FRAMEWORK
    CSS Reset
    HTML Template to start your project
    Clean and Organized file structure
    HTML5BoilerPlate
    

    View Slide

13. TEST YOUR CSS
    http://csslint.net
    

    View Slide

14. COMMON CSS MISTAKES
    MARGIN AND PADDING
    

    View Slide

15. CLEARING FLOATS
    Container
    Left Content (Floated Left)
    Sidebar (Floated right)
    

    View Slide

16. Failure to close things {} and ;
    Failure to close html tags
    Not Encoding Special Characters
    .
    c
    o
    n
    t
    e
    n
    t
    {
    p
    a
    d
    d
    i
    n
    g
    : 1
    0
    p
    x 1
    0
    p
    x 2
    p
    x 0
    c
    o
    l
    o
    r
    : #
    f
    f
    f
    ;
    <
    d
    i
    v
    >
    <
    h
    1
    >
    U
    n
    c
    l
    o
    s
    e
    d t
    a
    g
    <
    d
    i
    v
    >
    & =
    > &
    a
    m
    p
    ;
    © =
    > &
    c
    o
    p
    y
    ;
    

    View Slide

17. DO NOT USE W3SCHOOLS
    

    View Slide

18. View Slide

19. ¡GRACIAS :)
    

    View Slide

20. View Slide