HTML and CSS Reference
In-Depth Information
Drop Units from Zero Values
One way to easily cut down on the amount of CSS we write is to remove the unit from
any zero value. No matter which length unit is being used—pixels, percentages, em, and
so forth—zero is always zero. Adding the unit is unnecessary and provides no additional
1. div {
2. margin: 20px 0px;
3. letter-spacing: 0%;
4. padding: 0px 5px;
5. }
1. div {
2. margin: 20px 0;
3. letter-spacing: 0;
4. padding: 0 5px;
5. }
Group & Align Vendor Prefixes
With CSS3, vendor prefixes gained some popularity, adding quite a bit of code to CSS files.
The added work of using vendor prefixes is often worth the generated styles; however, they
have to be kept organized. In keeping with the goal of writing code that is easy to read and
modify, it's best to group and indent individual vendor prefixes so that the property names
stack vertically, as do their values.
Depending on where the vendor prefix is placed, on the property or the value, the alignment
may vary. For example, the following good code keeps the background property aligned
to the left, while the prefixed linear-gradient() functions are indented to keep their
values vertically stacked. Then, the prefixed box-sizing property is indented as neces-
sary to keep the box-sizing properties and values vertically stacked.
As always, the objective is to make the styles easier to read and to edit.
Click here to view code image
1. div {
2. background: -webkit-linear-gradient(#a1d3b0, #f6f1d3);
3. background: -moz-linear-gradient(#a1d3b0, #f6f1d3);
4. background: linear-gradient(#a1d3b0, #f6f1d3);
5. -webkit-box-sizing: border-box;
Search WWH ::

Custom Search