CSS best-practices, Zohar Arad

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

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

12. Source code

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

13. qqq