CSS Best Practices

Presented at Geeksquad drills

Transcript

1. CSS BEST PRACTICES Vinay M ( ) artminister.com
2. CSS RESET NOT ALL WEB BROWSERS ARE CREATED EQUAL
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/
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 >
5. ANNOTATE YOUR CSS Comments Indentation Structure DEMO
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 >
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 >
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 ; }
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 ; }
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 ; }
11. SPECIFICITY DEMO
12. START WITH A FRAMEWORK CSS Reset HTML Template to start your project Clean and Organized file structure HTML5BoilerPlate
13. TEST YOUR CSS http://csslint.net
14. COMMON CSS MISTAKES MARGIN AND PADDING
15. CLEARING FLOATS Container Left Content (Floated Left) Sidebar (Floated right)
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 ;
17. DO NOT USE W3SCHOOLS
19. ¡GRACIAS :)