Designing a Software is not a Single handed job. Multiple resources required to build an application. Let’s assume in your lab 10 resources are working as a Team. Here if your Style Guide is different from others then practically it takes time for other developers to understood or update your Codes. Unplanned Coding Standard waste quality time of a Developer. It is advisable to maintain similar CSS Style Guide during you generate CSS Styles. In this session let us share few CSS best practices to improve your Coding Standard.
To decorate a HTML page CSS is the Structural approach. Generally we use CSS for creating visually engaging websites or user interfaces of a web applications/mobile applications. Initially CSS was introduced by “Hakon Wium Lie” & “Bert Bos” in the year of 1996. This technology is approved by W3C (World Wide Web Consortium). The main objective behind the innovation of CSS is to separate HTML & Styles. CSS helps to customize user interface centrally.
CSS Best Practices
1. If multiple HTML elements required same style but their CSS Class names are different use grouping. When grouping selectors for each class choose new line. For an example:
/* Bad CSS practice */
.tabView, .tabView-prev, .tabView-next, .tabView [type=text] {
background-color: #FF0000;
padding: 20px;
margin: 10px 10px 12px;
}
/* Good CSS practice */
.tabView,
.tabView-prev,
.tabView-next,
.tabView [type=text] {
background-color: #FF0000;
padding: 20px;
margin: 10px 10px 12px;
}
2. While declare value to an attribute include a space after colon (:). For an example in place of margin:10px; it is a good practice to use margin: 10px;.
3. Practice to add semi-colon (;) at the end of each property and value pairs. For an example padding: 20px;.
4. While defining a class name or id choose lowercase letters with meaning full words. If your class name is more than one word for separation in between each words use hyphen (-). For an example to define a tab sub-menu class you can use “tab-submenu”.
5. While declaring hsl(), rect(), rgba() or rgb() never include space in between comma separated values. For an example while declaring rgb() use rgb(0,10,0,.5) in place of rgb(0, 10, 0, .5). This practice helps to differentiate multiple color values (comma with no space) from multiple property values (comma including space).
6. In place of color parameters or property values while defining a floating point value avoid 0 as the prefix. For an example in place of 0.5px use .5px.
7. Specially while using hexadecimal codes use lowercase letters with shorthand expressions. For an example use color: #fff; in place of color: #FFFFFF;.
8. While creating a selector with attribute & value pair use double quote to define value. For an example input[type=”text”].
9. While specifying 0 value for a property avoid unit notation. For an example replace margin: 0px; with margin: 0;.
10. Inside a CSS Class while declaring multiple properties maintain sequence as Position, Box Model, Typographic and Visual.
.tab-submenu {
/* Positioning Properties */
position: relative;
top: 10px;
/* Box-model Properties */
display: block;
margin: 10px 10px 12px 0;
/* Typography Properties */
font: normal 13px "Verdana", sans-serif;
/* Visual Properties */
background-color: #f6f6f6;
}
11. While embedding external CSS files to your HTML page avoid @import. Compare to <link> @improt takes more time to load.
<!-- Use link elements to embed -->
<link rel="stylesheet" src="tab.css" />
<!-- Avoid @imports -->
@import url("tab.css");
12. Common overused shorthand properties are padding, margin, font, background, border & border-radius. Strive to limit use of shorthand expressions to instances where you must explicitly set all the available values.
13. While commenting a class ensure that your comment is descriptive and easy to approachable by others.
14. While Creating a CSS file follow the structure approach as Global, Type, Forms, Header, Navigation, Content & Footer in Sequence.
