Slide 1

Slide 1 text

CSS BEST PRACTICES Vinay M ( ) artminister.com

Slide 2

Slide 2 text

CSS RESET NOT ALL WEB BROWSERS ARE CREATED EQUAL

Slide 3

Slide 3 text

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/

Slide 4

Slide 4 text

< ! 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 >

Slide 5

Slide 5 text

ANNOTATE YOUR CSS Comments Indentation Structure DEMO

Slide 6

Slide 6 text

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 >

Slide 7

Slide 7 text

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 >

Slide 8

Slide 8 text

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 ; }

Slide 9

Slide 9 text

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 ; }

Slide 10

Slide 10 text

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 ; }

Slide 11

Slide 11 text

SPECIFICITY DEMO

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

TEST YOUR CSS http://csslint.net

Slide 14

Slide 14 text

COMMON CSS MISTAKES MARGIN AND PADDING

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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 ;

Slide 17

Slide 17 text

DO NOT USE W3SCHOOLS

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

¡GRACIAS :)

Slide 20

Slide 20 text

No content