Fillip Technologies HTML/CSS Style Guide


Introduction

This document defines formatting and style rules for HTML and CSS. It aims at improving collaboration, code quality, and enabling supporting infrastructure. It applies to raw, working files that use HTML and CSS. Tools are free to obfuscate, minify, and compile as long as the general code quality is maintained.

This documentation is to help you build a proper website and maintain the code quality so that any one in future can understand your piece of code.

Be careful every web designer or web developer are supposed to follow the give instructions below.
No crappy CSS, HTML or Js anymore!

Basics #back to top

  1. Every scratch web design project should start on a HTML Boilerplate (Click here for more information).
  2. Every file should follow 'Base Url' concept.
  3. Add timezone in header file, for php extension files "date_default_timezone_set ( 'Asia/Kolkta' );".
  4. Use of inline coding for css is strictly probhited.
  5. Use small images for faster page loading for compressing image use Optimizilla
  6. Page name should use '-'(dash) instead of '_'(underscore) and ' '(spaces). And also prevent the use of capital letters.
  7. 								   
                                       About_Us.php
    								   About Us.php
    								   about us.php
    								
    								   
                                       about-us.php
    								

General Formatting #back to top

Indentation - #back to top

  1. Indent by 2 spaces at a time.
  2. Don’t use tabs or mix tabs and spaces for indentation.
								   
  • Fantastic
  • Great
								   .example {
                                     color: #e3e3e3;
                                   }
								

Capitalization - #back to top

  1. Use only lowercase.
  2. 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).
								   
                                   Google
								
								   
                                   color: #E3E3E3;
								
								   
                                   color: #e3e3e3;
								

Trailing Whitespace - #back to top

  1. Remove trailing white spaces.
  2. Trailing white spaces are unnecessary and can complicate diffs.
								   
                                   

What?_

								   
                                   

Yes please.

Encoding - #back to top

  1. Use UTF-8 (no BOM).
  2. Make sure your editor uses UTF-8 as character encoding, without a byte order mark.
  3. Specify the encoding in HTML templates and documents via
    <meta charset="utf-8">. Do not specify the encoding of style sheets as these assume UTF-8.

(More information about encoding and character handling in HTML/CSS click here.)

Commenting - #back to top

  1. Explain code as needed, where possible.
  2. Use comments to explain code: What does it cover, what purpose does it serve, why is respective solution used or preferred?

(This item is optional as it is not deemed a realistic expectation to always demand fully documented code. Mileage may vary heavily for HTML and CSS code and depends on the project’s complexity.)

Folder Structure #back to top

								   
                                   |───css (All CSS)
								   │
								   |───js  (All JS)
								   │
								   |───img					   			
							

While creating img folder create sub-folder according to name convention. Like, for all team members create a sub-folder to place all team member images and for sliders.

Don't alter the folder structure of HTML Boilerplate.

Create a sub-folder for a group of pages or group of images to prevent the unnecessary waste of time in finding the required resource.

CDN (Content Distribution Network) #back to top

Color

								--For Font color and background color
								http://nikcloud.com/fillip-assets/color/color.css
							

Font Size & Font Weight

								http://nikcloud.com/fillip-assets/font-size/fontsize-fontweight.css
							

Margin

								http://nikcloud.com/fillip-assets/margin/margin.css
							

Padding

								http://nikcloud.com/fillip-assets/padding/padding.css
							

Document Type - #back to top

  1. Use HTML5.
  2. HTML5 (HTML syntax) is preferred for all HTML documents: .

HTML Validity - #back to top

  1. Use valid HTML where possible.
  2. Use valid HTML code unless that is not possible due to otherwise unattainable performance goals regarding file size.
  3. Use tools such as the W3C HTML validator to test.
  4. Using valid HTML is a measurable baseline quality attribute that contributes to learning about technical requirements and constraints, and that ensures proper HTML usage.
  5. Use h1 and h2 tags for atleast once in each page.
  6. Use Favicon generator.
  7. Use jquery file in head tag of the file. While, use other js in footer. But, due to some exception cases you may place js in head.

                                   
                                   Test
                                   
This is only a test.
								   
                                   
                                   
								   Test
								   
This is only a test.

Semantics - #back to top

  1. Use HTML according to its purpose.
  2. Use elements (sometimes incorrectly called “tags”) for what they have been created for. For example, use heading elements for headings, p elements for paragraphs, a elements for anchors, etc.
  3. Using HTML according to its purpose is important for accessibility, reuse, and code efficiency reasons.

                                   
                                   
All recommendations
								   
								   All recommendations
								

Entity References - #back to top

  1. Do not use entity references.
  2. There is no need to use entity references like —, ”, or ☺, assuming the same encoding (UTF-8) is used for files and editors as well as among teams.
  3. The only exceptions apply to characters with special meaning in HTML (like < and &) as well as control or “invisible” characters (like no-break spaces).

                                   
                                  The currency symbol for the Euro is “€”.
								
								   
                                   
								    The currency symbol for the Euro is “&eur;”.
								

HTML Quotation Marks - #back to top

  1. When quoting attributes values, use double quotation marks.
  2. Use double ("") rather than single quotation marks ('') around attribute values.

								   
                                   Sign in
								

CSS Validity - #back to top

  1. Use valid CSS where possible.
  2. Use an unified CSS for every project.
  3. Unless dealing with CSS validator bugs or requiring proprietary syntax, use valid CSS code.
  4. Use tools such as the W3C CSS validator to test.
  5. Using valid CSS is a measurable baseline quality attribute that allows to spot CSS code that may not have any effect and can be removed, and that ensures proper CSS usage.

ID and Class Naming - #back to top

  1. Use meaningful or generic ID and class names.
  2. Instead of presentational or cryptic names, always use ID and class names that reflect the purpose of the element in question, or that are otherwise generic.
  3. Names that are specific and reflect the purpose of the element should be preferred as these are most understandable and the least likely to change.
  4. Generic names are simply a fallback for elements that have no particular or no meaning different from their siblings. They are typically needed as “helpers.”
  5. Using functional or generic names reduces the probability of unnecessary document or template changes.

                                     /* Not recommended: meaningless */
                                     #yee-1901 {}

									 /* Not recommended: presentational */
									 .button-green {}
									 .clear {}
								  
								    /* Recommended: specific */
									#gallery {}
									#login {}
									.video {}
									/* Recommended: generic */
									.aux {}
									.alt {}
								  

ID and Class Name Style - #back to top

  1. Use ID and class names that are as short as possible but as long as necessary.
  2. Try to convey what an ID or class is about while being as brief as possible.
  3. Using ID and class names this way contributes to acceptable levels of understandability and code efficiency.

                                    /* Not recommended */
									#navigation {}
									.atr {}
								  
								    /* Recommended */
									#nav {}
									.author {}
								  

Type Selectors - #back to top

  1. Avoid qualifying ID and class names with type selectors.
  2. Unless necessary (for example with helper classes), do not use element names in conjunction with IDs or classes.
  3. Avoiding unnecessary ancestor selectors is useful for performance reasons.

                                    /* Not recommended */
									ul#example {}
									div.error {}
								  
								    /* Recommended */
									#example {}
									.error {}
								  

Shorthand Properties - #back to top

  1. Use shorthand properties where possible.
  2. CSS offers a variety of shorthand properties (like font) that should be used whenever possible, even in cases where only one value is explicitly set.
  3. Using shorthand properties is useful for code efficiency and understandability.

                                    /* Not recommended */
									border-top-style: none;
									font-family: palatino, georgia, serif;
									font-size: 100%;
									line-height: 1.6;
									padding-bottom: 2em;
									padding-left: 1em;
									padding-right: 1em;
									padding-top: 0;
								  
								    /* Recommended */border-top: 0;
									font: 100%/1.6 palatino, georgia, serif;
									padding: 0 1em 2em;
								  

0 and Units - #back to top

  1. Omit unit specification after “0” values, unless required.
  2. Do not use units after 0 values unless they are required.
  3. Using shorthand properties is useful for code efficiency and understandability.

                                    /* Not recommended */
									border-top-style: none;
									font-family: palatino, georgia, serif;
									font-size: 100%;
									line-height: 1.6;
									padding-bottom: 2em;
									padding-left: 1em;
									padding-right: 1em;
									padding-top: 0;
								  
								    /* Recommended */border-top: 0;
									font: 100%/1.6 palatino, georgia, serif;
									padding: 0 1em 2em;
								  

Leading 0s - #back to top

  1. Omit leading “0”s in values.
  2. Do not put 0s in front of values or lengths between -1 and 1.

                                    font-size: .8em;
								  

Hexadecimal Notation - #back to top

  1. Omit unit specification after “0” values, unless required.
  2. Do not use units after 0 values unless they are required.
  3. Using shorthand properties is useful for code efficiency and understandability.

                                    /* Not recommended */
									border-top-style: none;
									font-family: palatino, georgia, serif;
									font-size: 100%;
									line-height: 1.6;
									padding-bottom: 2em;
									padding-left: 1em;
									padding-right: 1em;
									padding-top: 0;
								  
								    /* Recommended */
									border-top: 0;
									font: 100%/1.6 palatino, georgia, serif;
									padding: 0 1em 2em;
								  

Prefixes - #back to top

  1. Prefix selectors with an application-specific prefix (optional).
  2. In large projects as well as for code that gets embedded in other projects or on external sites use prefixes (as namespaces) for ID and class names. Use short, unique identifiers followed by a dash.
  3. Using namespaces helps preventing naming conflicts and can make maintenance easier, for example in search and replace operations.

                                    .adw-help {} /* AdWords */
									#maia-note {} /* Maia */
								  

ID and Class Name Delimiters - #back to top

  1. Separate words in ID and class names by a hyphen.
  2. Do not concatenate words and abbreviations in selectors by any characters (including none at all) other than hyphens, in order to improve understanding and scannability.

                                    /* Not recommended: does not separate the words “demo” and “image” */
									.demoimage {}
									/* Not recommended: uses underscore instead of hyphen */
									.error_status {}
								  
                                    /* Recommended */
									#video-id {}
									.ads-sample {}
								  

Declaration Order - #back to top

  1. Alphabetize declarations.
  2. Put declarations in alphabetical order in order to achieve consistent code in a way that is easy to remember and maintain.
  3. Ignore vendor-specific prefixes for sorting purposes. However, multiple vendor-specific prefixes for a certain CSS property should be kept sorted (e.g. -moz prefix comes before -webkit).

                                    background: fuchsia;
									border: 1px solid;
									-moz-border-radius: 4px;
									-webkit-border-radius: 4px;
									border-radius: 4px;
									color: black;
									text-align: center;
									text-indent: 2em;
								  

CSS Quotation Marks - #back to top

  1. Use single ('') rather than double ("") quotation marks for attribute selectors and property values.
  2. Do not use quotation marks in URI values (url()).
  3. Exception: If you do need to use the @charset rule, use double quotation marks— single quotation marks are not permitted.

                                    /* Not recommended */
									@import url("https://www.google.com/css/maia.css");

									html {
									font-family: "open sans", arial, sans-serif;
									}
								  
                                   /* Recommended */
								   @import url(https://www.google.com/css/maia.css);

								   html {
								   font-family: 'open sans', arial, sans-serif;
								   }
								  

Section Comments - #back to top

  1. Group sections by a section comment (optional).
  2. If possible, group style sheet sections together by using comments. Separate sections with new lines.

                                    /* Header */

                                    #adw-header {}

                                    /* Footer */

                                    #adw-footer {}

                                    /* Gallery */

                                    .adw-gallery {}
								  

While working on a group project add name and date to the comment section.

                                   /* Recommended */
								   /* Created by MJK, 2018-10-24 */

								   @import url(https://www.google.com/css/maia.css);

								   html {
								   font-family: 'open sans', arial, sans-serif;
								   }
								  

Creating Contact Form #back to top

  1. Add name, method, action, enctype attributes to (form) tag.
  2. Input fields must have name, id, type, placeholder and required(optional) attributes.
  3. select tag must have a title.
  4. submit button must be inside the form tag.

Parting Words #back to top

Be consistent

This documentation tries to provide a global format for developing CSS/HTML file

If you are creating a scratch project or editing someone's code wait for a while and determine the style and a correct approach for the current project. Because, every approach for each project may be different according to the requirement and productivity.

The point of creating this document is developed to prevent the void of what you are saying and what an other person is understanding.Because, when you add a new line of code which is different in convention from the codes that are previously present in an existing code it throws a devastating effect on the reader and requires time to decode, leading to loss of time and resources. So, 'avoid this practices'.

Happy coding!

Changelog #back to top

You can find the changes in the documentation here.


Changelog

								        -----------------------------------------------------------------------------------------
                                        Version 1.0 - Oct 25th, 2018
                                        -----------------------------------------------------------------------------------------