Organization
Shorthand CSS
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding: 5px 5px 5px 5px;
padding: 5px;
Keep attributes on one line
.clear
{
clear:both;
}
.float-left
{
float:left;
}
.float-right
{
float:right;
}
.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
@import
Master.css
@import url("reset.css");
@import url("global.css");
CSS Refactoring
Common Helper Classes
.clear { clear:both; }
.float-left { float:left; }
.float-right { float:right; }
.text-left { text-align:left; }
.text-right { text-align:right; }
.text-center { text-align:center; }
.text-justify { text-align:justify; }
.bold { font-weight:bold; }
.italic { font-style:italic; }
.underline { border-bottom:1px solid; }
.highlight { background:#ffc; }
Reset/Framework
- Variables in CSS: Ruby on Rails
-
What is a Reset
- Link Color
- Set Font Size
- Add Helper Classes
-
Examples