close

Se connecter

Se connecter avec OpenID

CHAPTER 1

IntégréTéléchargement
CSS BEST PRACTICES
Lecture Overview





Understanding grid frameworks
CSS design best practices
Stylesheet organization
Fixed vs. fluid layouts
Look at existing templates
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
The 960 Grid System (2)


There are 12, 16, and 24 column versions
Download from http://adapt.960.gs/
The 960 Grid System
(Illustration)
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
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
Design Steps (1)

Draw a logical layout first


Create an HTML structure that will support
the layout



What the page should look like
Create the HTML before the CSS. Don’t create
the CSS concurrently
Use semantic tags instead of <div>, where
appropriate
Then create the CSS
Design Steps (2)


If your CSS is getting complex, use multiple
stylesheets
Keep a library of commonly used and helpful
CSS classes
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
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
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
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
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
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
Color

Keep a color reference somewhere in your
CSS file

The color reference is typically expressed as a
comment in the CSS
Some Best Practices

Declare the most generic items first, and then
the more specific ones


Use intuitive naming conventions and think of
future edits


This takes advantage of CSS inheritance
Avoid names like left and right as positioning
might change later
Use hyphens for class names and
underscores for IDs
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;
Some Best Practices

Don’t be repetitive and do reuse attributes
Some Best Practices



Minimize the use of IDs
Avoid !important unless absolutely
necessary
Do use resets to override default browser
formatting
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/
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-endframeworks/compare.html
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/
Auteur
Document
Catégorie
Uncategorized
Affichages
5
Taille du fichier
133 KB
Étiquettes
1/--Pages
signaler