13
Chapter 17
Chapter 17
CSS comment is simply a note contained within two sets of characters, /* and */
Comment code that isn’t obvious
Add info helpful to other coders
Style names must begin with letter, can’t contain illegal characters (&, *, |, etc.)
Name by PURPOSE, not appearance or location
Avoid cryptic names like .s
Style with multiple classes to save time
LESS - http://lesscss.org/
SASS - http://sass-lang.com/
Allows variables
Preprocessor adds vendor prefixes
Combines style sheets and minifies to improve download time
Can be confusing, so use Scout or Compass to convert
http://mhs.github.io/scout-app/
http://compass.kkbox.com/
Group styles
Parts of page (e.g. main content styles in one group, navigation in another)
Purpose (e.g. Typography in one group, layout in another group)
Use comments to distinguish groups
Use flags to aid searching –http://stopdesign.com/archive/2005/05/03/css-tip-flags.html
Link to main style sheet, then import others organized by function
NOTE: remember import is buggy in IE - see http://reference.sitepoint.com/css/at-import
“zero out” formatting
Padding & margins
Font sizes
Display html5 elements as blocks
Line height
Table borders and cells
Remove borders from linked images
List indents and bullets
Remove quote marks from q tag
See reset.css in tutorials/17 folder or see http://nicolasgallagher.com/about-normalize-css/
Compartmentalize your pages
Class each body by page<body class="home">
Class each link in nav bar<a href="/index.html“ class="homeLink">Home</a>.
Create a descendent selector to format each section’s link differently when the link is inside a page for that section.
![[Basic HTML/CSS] 5. css - selector, units](https://static.documents.pub/doc/80x56/58ed3ba91a28ab05158b45c9/basic-htmlcss-5-css-selector-units.jpg)
