CSS BEST PRACTICES

Slide 2

Lecture Overview Understanding grid frameworks CSS design best practices Stylesheet organization Fixed vs. fluid layouts Look at existing templates

Slide 3

The 960 Grid System (1) It was a de facto standard for

standardized layouts (Nathan Smith is credited with its creation)

The grid is typically structured as follows Total width 960px / Total content area is

940px 12 columns @ 60px each Each column has 10px left & right margin

which forms 20px of gutter space As screens get wider, some consider the

960 grid obsolete

Slide 4

The 960 Grid System (2) There are 12, 16, and 24 column

versions Download from http://adapt.960.gs/

Slide 5

The 960 Grid System (Illustration)

Slide 6

How it Works Create an outer <div> tag with the class container_12 or container_16, …

Create sub elements grid_x where x is the number of columns Continue to create elements until the total

is 16 Create a <div> tag with the clear class

to reset Continue to create columnar elements See grid960.html

Slide 7

The 1200 PX Grid System Nearly all modern monitors support at

least 1280 x 1024 pixels 1200 is divisible by 2, 3, 4, 5, 6, 8 10,

12, 15, 16, 20, 24, 30, 40 ,48, 60, 80, 120, 200, 240, 400

http://1200px.com This came out of the 960 system from

years ago There are other grid systems too

Slide 8

Design Steps (1) Draw a logical layout first

What the page should look like Create an HTML structure that will

support the layout Create the HTML before the CSS. Don’t

create the CSS concurrently Use semantic tags instead of <div>, where

appropriate Then create the CSS

Slide 9

Design Steps (2) If your CSS is getting complex, use

multiple stylesheets Keep a library of commonly used and

helpful CSS classes

Slide 10

Stylesheet Organization (1) Divide your stylesheet into sections

such as Global styles Header Page structure Text styles Navigation styles Forms

Do use comments to identify sections

Slide 11

Stylesheet Organization (2) Don’t use inline styles except for

development and testing Do use external style sheets

They can be cached so pages load faster A single stylesheet can be applied to

every page of a site This method separates content from

presentation

Slide 12

Fixed vs. Fluid Layouts A fixed layout has a wrapper that’s a

fixed width The inner components are expressed as a

fixed width or percentages A fluid or liquid layout is expressed in

percentages

Slide 13

Fixed Layouts Pros

Easier Widths are the same for every browser No need for min-width or max-width

properties Cons

Excessive whitespace on large screens Problematic on small screens

Slide 14

Fluid Layouts Pros

More user friendly Minimizes the extra whitespace Avoid scroll bars on smaller screen

resolutions Cons

Need to test on varying screen resolutions Problems with images and video

Slide 15

Elastic Design It combines characteristics of fixed and

fluid layouts All elements are sized with em’s

More flexible but harder to code FYI

1 em is 12 points So 2 ems is 24 point

Slide 16

Color Keep a color reference somewhere in

your CSS file The color reference is typically expressed

as a comment in the CSS

Slide 17

Some Best Practices Declare the most generic items first,

and then the more specific ones This takes advantage of CSS inheritance

Use intuitive naming conventions and think of future edits Avoid names like left and right as

positioning might change later Use hyphens for class names and

underscores for IDs

Slide 18

Some Best Practices Divide stylesheets into sections Do use shorthand properties instead of

detailed properties for brevity and efficiency margin:5px 1px 4px 10px;

Is faster than margin-top:5px; margin-right:1px; margin-bottom:4px; margin-left:10px;

Slide 19

Some Best Practices Don’t be repetitive and do reuse

attributes

Slide 20

Some Best Practices Minimize the use of IDs Avoid !important unless absolutely

necessary Do use resets to override default

browser formatting

Slide 21

Existing Templates There are thousands of existing

template Some free. Some not Pay attention to licencing

Examples http://templated.co/ http://www.free-css.com/

Slide 22

Other Tools and Frameworks Bootstrap CSS

Fluid and fixed versions Uses a 12 column 5 Flexible across devices http://getbootstrap.com/css/

A list of frameworks http://

usablica.github.io/front-end-frameworks/compare.html

Slide 23

Other Tools and Frameworks Less is a CSS pre-processor that extends

the CSS language http://lesscss.org/

SASS is another stylesheet language http://sass-lang.com/