Online Mind Mapping and Brainstorming

Create your own awesome maps

Online Mind Mapping and Brainstorming

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