Saturday, September 5, 2015

CSS Best Practices

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language. While most often used to change the style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL. Along with HTML and JavaScript, CSS is used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications. 


In simpler words, Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

The below guidelines are the best practices for quality standard codes used in the industry and the conventions are searched and gathered around the internet.

Make it Readable

1.) Readability of your CSS makes it much easier to maintain in the future.
Start using multiple lines & spaces.

2.) Writing styles and properties in same line makes the style sheet untidy and tedious for
other users to work on it.

3.) Indent by 2 spaces for style declarations. Don’t use tabs or mix tabs and spaces for
indentation.

4.) Give single space between selector and open braces. Also single space between colon
and property value.


.header {
background: #EEE;
padding: 2em;
border: 1px solid #000;
}

.header{ background: #EEE; padding:2em; border:1px solid #000; }


Naming Conventions

1.) Use more versatile naming conventions and stay consistent.

2.) Use full descriptive words. Abbreviating a word may save you a few milliseconds to
type initially, but may make your code harder to read for other users.

3.) Usage of meaningful class name is advisable for user's quick understanding.

4.) Use hyphens instead of underscores while writing CSS classes and IDs.



.navbar-right {
background: #EEE;
padding: 10px;
border: 1px solid #000;
}

.alert-message {
background: #FF0000;
padding: 5px;
border: 1px solid #FF0000;
color:#FFF;
}


.sidebox_rgt {
background: #EEE;
padding: 10px;
border: 1px solid #000;
}

.red_box {
background: #FF0000;
padding: 5px;
border: 1px solid #FF0000;
color:#FFF;
}



Use Lowercase in Styles

1.) All code has to be lowercase: This applies to HTML element names, attributes,
attribute values (unless text/CDATA), CSS selectors, properties, and property values
(with the exception of strings).


2.) The dynamic classes rendering from the script should also be applied in lowercase is
also considered as best practise.


.widget-header{
color:#e1e1e1;
}

.primary-widget-applayout{
font-family:inherit;
}

<div><p>Good Bye World</p></div>


.Widget-Header{
color:#e1e1e1;
}

.primary-widget-APPLAYOUT{
font-family:inherit;
}

<Div><P>Good Bye World</p></Div>


Follow Declaration Order

1.) Related property declarations should be grouped together following the order:
            (a)Positioning
            (b)Box model
            (c)Typographic
            (d)Visual

2.) Positioning comes first because it can remove an element from the normal flow of the
document and override box model related styles. The box model comes next as it
dictates a component's dimensions and placement.

3.) Everything else takes place inside the component or without impacting the previous
two sections, and thus they come last.



.declaration-order {

/* Positioning */

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;

/* Box-model */

display: block;
float: right;
width: 100px;
height: 100px;

/* Typography */

font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;

/* Visual */

background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
}


Use Generic CSS Structure

1.) Use the below generic structure which helps the CSS properly to inherit attributes and
makes it much easier for user to override a specific style.

     (a) CSS Reset
     (b) Import fonts
     (c) Links, heading, font and its types
     (d) Main layout
     (e) Secondary layout
     (f) Form elements
     (g) Other elements

2.) Use CSS reset without fail in the main style sheet because every browser has its own
default ‘user agent’ style sheet, that it uses to make unstyled websites appear more
legible.



/*** CSS RESET***/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

body {
line-height: 1;
}

ol, ul {
list-style: none;
}

blockquote, q {
quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

a {
text-decoration:underline;
border:0;
}

a:hover {
text-decoration:underline;
}

h1, h2, h3, h4, h5, h6 {
color:#FF0;
font-weight:normal;
}

/*** MAIN LAYOUT ***/
#header {
...
}
#footer {
...
}

/*** FORM ***/
label{
...
}
input{
...
}
button{

}

Don’t Repeat Style Properties

1.) Re-use attributes whenever possible by grouping elements instead of declaring the
styles again.

2.) If two of your styles has same properties, group them using coma.



.alert-message,
.span p {
color:#FF0000;
font-size:12px;
float:left;
}


.alert-message {
color:#FF0000;
font-size:12px;
float:left;
}

.span p {
color:#FF0000;
font-size:12px;
float:left;
}



CSS Specificity

1.) Specificity is the means by which a browser decides which property values are the
most relevant to an element and gets to be applied. Specificity is only based on the
matching rules which are composed of selectors of different sorts.

2.) In case of specificity equality, the latest declaration found in the CSS is applied to the
element.

3.) The following list of selectors is by increasing specificity:

        (a) Universal selectors
        (b) Type selectors
        (c) Class selectors
        (d) Attributes selectors
        (e) Pseudo-classes
        (f) ID selectors
        (g) Inline style

4.) Using !important is bad practice because it makes debugging hard since user break
the natural cascading in your style sheets.



<div id="test">
<span>Text</span>
</div>

div#test span {
color: green;
}

span {
color: red;
}

div span {
color: blue;
}



Organize CSS Styles Using Flags

1.) Separate CSS into blocks using flags.

2.) Comment all the block level elements (header, body content, nav bar, footer, etc.) in
the style sheets, so that it will be useful for user's usability and readability.



/*************************
*******MAIN LAYOUT********
*************************/
.header {
background:#AEAEAE;
height:150px;
float:left;
border-bottom:1px solid #CCCCCC;
}

/*** logo ***/
.logo{
background:url(“..images/logo.jpg”) no-repeat;
width:300px;
height:120px;
float:left;
}

/*** login info***/
.login{
float:right;
width:30%;
}

.login p{
font:12px Arial;
color:#CCC;
}


Use Shorthand CSS

1.) Start using shorthand styles properties in style sheet.

2.) Unwanted or lengthy style properties will not only affect user's readability, but also it
affect browser style rendering time.

3.) Use 3 character hexadecimal notation wherever needed in style property.

4.) Try to use all attributes in same style properties.




.sidebar {
color: #CCC;
padding: 10px 15px 5px 10px;
margin:10px 0;
background:url(“../images/bg.png”) no-repeat 0 0;
}


.sidebar {
color: #CCCCCC;
padding-left: 10px;
padding-right:15px;
padding-top:10px;
padding-bottom:5px;
margin-top:10px;
margin-bottom:10px;
background-image:url(“../images/bg.png”);
background-repeat:no-repeat;
background-position:0 0;
}




Use Multiple External Style sheets

1.) Avoid using inline or internal style sheets because it mixes up content and
presentation, which can lead to more trouble.

2.) Instead of using inline or internal style sheet, a global change can be done in the single
external style sheet.

3.) Be sure to consider the number of HTTP requests that are being made due to multiple
style sheets.



<span>
This is an alert message!
</span>
span {
color: red;
font-weight: bold;
}

<span style="background:red;">
This is an alert message!
</span>

<style>
span{
font-weight:bold;
}
</style>



Make Use of Generic Classes

1.) Start using generic classes like right ,left, no-padding, no-margin, clear, hidden, etc..

2.) Instead of adding some particular properties to each styles, you can create generic
classes and add them to the IDs or other CSS classes.



.left {
float: left;
}
.right{
float:right;
}

.no-padding {
padding: 0;
}

.no-margin {
margin: 0;
}

.clear {
clear: both;
}

.hidden{
display: none;
}

<div class="sidebar left no-margin">
...
</div>

<ul>
<li> Item1 </li>
<li> Item2 </li>
<li> Item3 </li>
<li class="no-padding"> Item4 </li>
</ul>


.sidebar {
float:left;
margin:0;
}

ul li.last {
p ad
ding:0;
}

<div class="sidebar”>
...
</div>

<ul>
<li> Item1 </li>
<li> Item2 </li>
<li> Item3 </li>
<li class=”last”> Item4 </li>
</ul>



Use Simple and Clean Styles

1.) Try to keep the CSS from being as simple and clean as possible.

2.) Adding extra selectors to the styles may clutters the style sheet.

3.) However, if a particular class is to be targeted, its parent div can be used as an extra
selector.



.content li {

}


body #container .content ul li {
….
}




Images in Style Sheets

1.) For repeating pattern images, use something larger than 1x1 pixels.

2.) Usage of spacer images can be avoided.

3.) CSS Sprite images are recommended to use for background images to reduce number
of HTTPS requests.


4.) For responsive devices, images can be made responsive by giving max-width value.



.new-icon {
background: url(“../images/icons-sprite.png”) no-repeat 0 -20px ;
}

.container {
background: url(“../images/bg_blue.png”) repeat-x ;
width: 100%;
...
}

.profile-image {
float: left;
max-width: 100%;
}




Using Media Queries

1.) It is generally advisable to keep media queries grouped by media at the bottom of the
style sheet.

2.) Rule sets for media queries should be indented one level in.

3.) Media queries can be written from larger devices to smaller for easier understanding.

4.) Use meta viewport tag in the html file for responsive pages.



<meta name="viewport" content="width=device-width, initial-scale=1">

@media only screen and (max-device: 801px) and (min-device:650) {

/* define tablet specific styles come here */

}


No comments:

Post a Comment

Thanks for your comments. It'll be published after admin's approval !