Writing Your Best Code - Learn to Code HTML and CSS: Develop and Style Websites - page 279

6. -moz-box-sizing: border-box;
7. box-sizing: border-box;
8. }
GOOD CODE
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;
6. -moz-box-sizing: border-box;
7. box-sizing: border-box;
8. }
Vendor Prefixes
When using vendor prefixes we need to make sure to place an unprefixed version
of our property and value last, after any prefixed versions. Doing so ensures that
browsers that support the unprefixed version will render that style according to its
placement within the cascade, reading styles from the top of the file to the bot-
tom.
The good news is that browsers are largely moving away from using vendor pre-
fixes. Over time this will become less of a concern; however, for now we're well
advised to double-check which styles require a vendor prefix and to keep those
prefixes organized.
Modularize Styles for Reuse
CSS is built to allow styles to be reused, specifically with the use of classes. For this reason,
styles assigned to a class should be modular and available to share across elements as ne-
cessary.
If a section of news is presented within a box that includes a border, background color, and
other styles, the class of news might seem like a good option. However, those same styles
may also need to be applied to a section of upcoming events. The class of news doesn't fit
in this case. A class of feat-box would make more sense and may be widely used across
the entire website.
BAD CODE
1. .news {
2. background: #eee;