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


inside it label & input


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


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

wrapping div

class per li


#gallery, width & height, padding

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

based on CSS box model


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



degrades gracefully

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

best way to use


slight browser differences in syntax

see combined example


Source code