CSS best-practices, Zohar Arad

Get Started. It's Free
or sign up with your email address
CSS best-practices, Zohar Arad by Mind Map: CSS best-practices, Zohar Arad

1. columns retain proportions

1.1. even on mobile

2. border left

3. .nav_item_.nav_item a

4. liquid/flexible layout

4.1. see flexible.css & .html example source code

4.2. supports accessibility

4.2.1. proportional to font size

4.2.1.1. em based

4.2.1.2. Untitled

4.2.1.2.1. cascading

4.2.1.2.2. 62.5% ~ 10px on most browsers

5. simple gallery

5.1. html

5.1.1. use ul

5.1.1.1. collection of things that look & behave the same

5.1.2. wrapping div

5.1.3. class per li

5.2. css

5.2.1. #gallery

5.2.1.1. width & height

5.2.1.2. padding

5.2.2. .gallery_item

5.2.2.1. width & height

5.2.2.2. padding

5.2.2.3. float left

5.2.2.4. margin

5.3. based on CSS box model

6. Source code

6.1. http://www.zohararad.com/demos/tricks.zip

7. wrap fields with block (p/div)

7.1. wrapping block has meaningful class

7.1.1. form_row

7.2. inside it label & input

7.2.1. class=label

7.2.2. class=field

7.2.2.1. class="text field"

7.3. see forms.css & html source example

8. display block

9. use fieldset & legend elements

9.1. grouping of fields

10. form design

11. general

11.1. override typography of main elements

11.1.1. will avoid browser cascading style on all

11.1.2. yields consistency

11.2. image replacement

11.2.1. purpose

11.2.1.1. text exists for semantic/SEO/accessibility purposes but we don't it to be seen

11.2.1.2. have h1 for title with text for SEO but show logo

11.2.2. .rep

11.2.2.1. text-indent: 1000px

11.2.2.2. overflow hidden

11.2.2.3. text-align

11.3. background image

11.3.1. .bg

11.3.1.1. background-image

11.3.1.2. background-repeat no-repeat

11.4. clear fix

11.4.1. .clr

11.4.1.1. display block

11.4.1.2. width 100%

11.4.1.3. height

11.5. navigation bars

11.5.1. html

11.5.1.1. nested UL & li's

11.5.2. css

11.5.2.1. .nav_item

11.5.2.1.1. float left

11.5.2.1.2. position relative

11.5.2.1.3. padding

11.5.2.2. #sub_nav

11.5.2.3. .nav_item:hover #sub_nav

11.5.3. see nav.css & .html example source code

12. CSS3

12.1. use

12.1.1. degrades gracefully

12.1.2. nice & useful visual effects

12.1.2.1. rounded corners

12.1.2.2. gradient

12.1.2.3. shaddows

12.2. best way to use

12.2.1. copy

12.3. slight browser differences in syntax

12.4. see combined example

12.4.1. css3.css

13. qqq