Upgrade to Pro — share decks privately, control downloads, hide ads and more …

CSS Best Practices

Vinay M
September 08, 2012

CSS Best Practices

Presented at Geeksquad drills

Vinay M

September 08, 2012
Tweet

More Decks by Vinay M

Other Decks in Technology

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