Back to Public Maps
CSS best-practices, Zohar Arad
by Udi h Bauman 11/02/2014
CSS best-practices, Zohar Arad
by Udi h Bauman
1. wrap fields with block (p/div)
1.1. wrapping block has meaningful class
1.1.1. form_row
1.2. inside it label & input
1.2.1. class=label
1.2.2. class=field
1.2.2.1. class="text field"
1.3. see forms.css & html source example
2. display block
3. use fieldset & legend elements
3.1. grouping of fields
4. columns retain proportions
4.1. even on mobile
5. border left
6. .nav_item_.nav_item a
7. liquid/flexible layout
7.1. see flexible.css & .html example source code
7.2. supports accessibility
7.2.1. proportional to font size
7.2.1.1. em based
7.2.1.2. Untitled
7.2.1.2.1. cascading
7.2.1.2.2. 62.5% ~ 10px on most browsers
8. form design
9. simple gallery
9.1. html
9.1.1. use ul
9.1.1.1. collection of things that look & behave the same
9.1.2. wrapping div
9.1.3. class per li
9.2. css
9.2.1. #gallery
9.2.1.1. width & height
9.2.1.2. padding
9.2.2. .gallery_item
9.2.2.1. width & height
9.2.2.2. padding
9.2.2.3. float left
9.2.2.4. margin
9.3. based on CSS box model
10. general
10.1. override typography of main elements
10.1.1. will avoid browser cascading style on all
10.1.2. yields consistency
10.2. image replacement
10.2.1. purpose
10.2.1.1. text exists for semantic/SEO/accessibility purposes but we don't it to be seen
10.2.1.2. have h1 for title with text for SEO but show logo
10.2.2. .rep
10.2.2.1. text-indent: 1000px
10.2.2.2. overflow hidden
10.2.2.3. text-align
10.3. background image
10.3.1. .bg
10.3.1.1. background-image
10.3.1.2. background-repeat no-repeat
10.4. clear fix
10.4.1. .clr
10.4.1.1. display block
10.4.1.2. width 100%
10.4.1.3. height
10.5. navigation bars
10.5.1. html
10.5.1.1. nested UL & li's
10.5.2. css
10.5.2.1. .nav_item
10.5.2.1.1. float left
10.5.2.1.2. position relative
10.5.2.1.3. padding
10.5.2.2. #sub_nav
10.5.2.3. .nav_item:hover #sub_nav
10.5.3. see nav.css & .html example source code
11. CSS3
11.1. use
11.1.1. degrades gracefully
11.1.2. nice & useful visual effects
11.1.2.1. rounded corners
11.1.2.2. gradient
11.1.2.3. shaddows
11.2. best way to use
11.2.1. copy
11.3. slight browser differences in syntax
11.4. see combined example
11.4.1. css3.css
