Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

CSS best-practices, Zohar Arad by Mind Map: CSS best-practices, Zohar Arad
5.0 stars - 1 reviews range from 0 to 5

CSS best-practices, Zohar Arad

wrap fields with block (p/div)

wrapping block has meaningful class

form_row

inside it label & input

class=label

class=field, class="text field"

see forms.css & html source example

display block

use fieldset & legend elements

grouping of fields

columns retain proportions

even on mobile

border left

.nav_item_.nav_item a

liquid/flexible layout

see flexible.css & .html example source code

supports accessibility

proportional to font size, em based, Untitled, cascading, 62.5% ~ 10px on most browsers

form design

simple gallery

html

use ul, collection of things that look & behave the same

wrapping div

class per li

css

#gallery, width & height, padding

.gallery_item, width & height, padding, float left, margin

based on CSS box model

general

override typography of main elements

will avoid browser cascading style on all

yields consistency

image replacement

purpose, text exists for semantic/SEO/accessibility purposes but we don't it to be seen, have h1 for title with text for SEO but show logo

.rep, text-indent: 1000px, overflow hidden, text-align

background image

.bg, background-image, background-repeat no-repeat

clear fix

.clr, display block, width 100%, height

navigation bars

html, nested UL & li's

css, .nav_item, float left, position relative, padding, #sub_nav, .nav_item:hover #sub_nav

see nav.css & .html example source code

CSS3

use

degrades gracefully

nice & useful visual effects, rounded corners, gradient, shaddows

best way to use

copy

slight browser differences in syntax

see combined example

css3.css

Source code

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

qqq