Skip to main content

CSS Coding Standards And Anatomy Of Internal, External & Inline CSS

 

CSS Coding Standards

I prefer CSS coding standards from wordpress.org (though you can write CSS in any way you want, only browsers should understand). So here is the list of coding standard I made (and add) from https://make.wordpress.org/core/handbook/best-practices/coding-standards/css/.

PART-1

-> Naming selectors: use lowercase, separate words with hyphen (-); not with underscore (_) or camelcase (eg., commentForm).

-> Each selector should be in its own line, ending in either a comma or an opening curly brace. There should be no space b/w selector and comma; but there there should be a space b/w selector and opening curly brace.

-> Attribute selectors should use double quotes around values (eg., input[type="text"]).

-> Use Tab/s (not space/s) to indent each property. I prefer single Tab.

-> Each property / value pair should be in its own line; and ending with a semicolon (;). Property should be followed by a colon > a space > value > semicolon. Property / value should be lowercase, except for font names and vendor-specific properties.

-> Value 1/3: space before value, after a colon. And should end in semicolon. Define font weights in numerical values (e.g., 400, 700; instead of normal, bold). Use double quotes rather than single quotes. Use a leading zero for decimal values. Don't add a space between value and unit, for example "margin: 20px" is correct, and "margin: 20 px" is incorrect.

-> Value 2/3: don't pad parentheses with spaces.

-> Value 3/3: multiple comma-separated values for one property should be separated by a space (after the comma).

-> Use unit-less line height: see here why? http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/.

-> Colors: use hex code, or rgba() if opacity is needed. Use shorten values (#fff) when possible, instead of #FFFFFF. Avoid RGB format and uppercase.

-> The closing curly brace, should be flush left, with same level of selectors' indentation.

-> Line blanks: one line blank b/w blocks (in a section); two lines blank b/w sections.

-> Ordering: random ordering is chaos, not poetry. I prefer alphabetically ordering. Also consider the following order (for longer CSS), that I've seen in many Wordpress.org themes:
/**
* Table of Contents
*
* 1.0 - Normalize
* 2.0 - Genericons
* 3.0 - Typography
* 4.0 - Elements
* 5.0 - Forms
* 6.0 - Navigation
* 6.1 - Links
* 6.2 - Menus
* 7.0 - Accessibility
* 8.0 - Alignments
* 9.0 - Clearings
* 10.0 - Widgets
* 11.0 - Content
* 11.1 - Header
* 11.2 - Posts and pages
* 11.3 - Post Formats
* 11.4 - Comments
* 11.5 - Sidebar
* 11.6 - Footer
* 12.0 - Media
* 12.1 - Captions
* 12.2 - Galleries
* 13.0 - Multisite
* 14.0 - Media Queries
* 14.1 - >= 710px
* 14.2 - >= 783px
* 14.3 - >= 910px
* 14.4 - >= 985px
* 14.5 - >= 1200px
* 15.0 - Print
*/

PART-2

Grouping selectors & CSS Shorthand

Grouping selectors example:

selector1,
selector2,
Selector3 {
...
}

CSS shorthand examples for (1) font, (2) background, (3) margin, (4) border, (5) padding and (6) list.

Note: use single space (not a comma) between each property. Use "a comma and single space" to separate fonts from each other.

(1) font: font-size must be followed by font-family and a semicolon; other properties should come before font-size without any order. Example:

p  {
font: bold italic small-caps 1.5em Georgia, Times, Serif;
}

(2) background: sequence is like that, background-image, background-position, background-repeat, background-attachment, background-color. See example below:

body  {
background: url(child.jpg) right top no-repeat fixed #ddd;
}

(3) margin: sequence in margin, TRBL (Trouble), that is Top - Right - Bottom - Left.

Rule that I read from The Definitive Guide by Eric A. Meyer was like in my words:

(#) If there is a single value, take it as the value of Top [added from my side].
(#) If value of Right is missing, take the value of Top.
(#) If value of Bottom is missing, take the value of Top.
(#) If value of Left is missing, take the value of Right.

Example 1: margin 50px for Top, Right, Bottom and Left.

.div-two  {
margin: 50px ;
}

Example 2: margin 125px for Top and Bottom; margin 100px for Right and Left.

.div-two {
margin: 125px 100px;
}

Example 3: margin 100px Top, margin 200px Bottom, margin 100px Right and Left.

.div-two  {
margin: 100px 100px 200px;
}

(4) border: order in properties doesn't matter, you can write in any way you want, but don't forget using semicolon at the end.

.div-two  {
border: #fff 4px solid;
}

(5) padding: sequence in padding works like margin, so I'm leaving it.

(6) list: sequence in shorthand of list is, list-style-type, list-style-image, and, list-style-position

ul  {
list-style: disc url(arrow-circle-right.svg) inside;
}

Anatomy of internal & external CSS

Remember few things and you will remember CSS anatomy even in your dreams: selector, curly-bracket-start, property, colon, a space, value, semicolon, curly-bracket-end. That't it.

Example:

body  {
background-color: #ddd;
}

Anatomy of internal and external CSS is the same, only there is a matter of placing CSS. With internal we place CSS with in <head> </head>, and between <style> </style> element. And with external we place CSS outside in a file with .css extension (e.g., style.css) and between <head> </head> provide the link of that file, see example 2.

Example 1:

<head>
<style>
body {
background-color: #ddd;
}
</style>
</head>

Example 2:

<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

Anatomy of inline CSS

In inline CSS, we don't use curly braces, but use double quotes instead. And it is written like the following example, anywhere between <body> </body> element.

<body>
<p style="color:#00B746;"> Hello !</p>
</body>

Labels:

Comments

Post a Comment

Popular posts from this blog

Golden Rule Of Three Years To Get Success

Give yourself completely to whatever you like for three years -- let it be your career, business, health or any other thing of life. Why three years, exactly? Because what is the advantage of sticking to something which isn't giving any result. Time is precious, don't waste if the results aren't coming. Why not less than three years? If we spread these three years for success, we can assume first year is dominated by getting knowledge of the field, second year dominated by execution, and the third year comes the maturity where knowledge and experience of execution strike for success.  As an exeption we can stretch these three years into five or six years -- only when there are uncontrollable issues like of health or circumstantial issues.
Post a Comment
Read more

108 Names Of Shri Surya From Mahabharata

Surya (Sun) is the most important planet as well as a deity. Worshiping Surya increases prana-shakti (life-force), it rays destroy many diseases and it is the biggest source of never ending energy. There is a Strota, called Surya-Kavach, it is chanted for protection, as a deity his protection is very strong — remember the case of Karna in Mahabharata, he was invincible due to Surya-Kavach. This Surya-Kavach wasn’t as it is shown in movies, it was a Mantrik protection which Karna had and on Indra request he promised not to use it in the war. We take note of popular deities, but Surya as a deity is not lesser than others — though there are less Sanskrit literature on Surya (as I know), but whatever it is, like Surya Kavach and Aditya Hriday Strota, I think, is very potent. English Name | हिंदी नाम 1) Om Suryaay Namah | ॐ सूर्याय नम: 2) Om AryMane Namah | ॐ अर्यमणे नम:
Post a Comment
Read more

Name List Of 64 Yogini / चौँसठ योगिनी

It is a list of 64 Yogini, if you want these names in Stotra form you can get from another post of this blog. These names are very useful for doing, Jaap, Puja, Tarpan, and Havan. These names are also used in making 64 Yogini Yantra in which there are 64 squares and in each square, name of each Yogini is written, then everyday worship of this Yantra starts.  For Pujan (Poojan): ओं ---------- देव्यै पूजियामि नम: ! (e.g., ओं गजानना देव्यै पूजियामि नम: ! ) For Tarpan: ओं ---------- देव्यै  तर्पयामि नम: ! (e.g., ओं गजानना देव्यै  तर्पयामि नम: !) Together Pujan+Tarpan: ओं ---------- देव्यै   पूजियामि / तर्पयामि नम:: ! (e.g., ओं गजानना देव्यै   पूजियामि / तर्पयामि नम:: ! ) For Jaap : ओं ---------- देव्यै नम:! (e.g., ओं गजानना देव्यै नम:!) For Havan:  ओं ---------- देव्यै स्वाहा ! (e.g., ओं गजानना देव्यै स्वाहा !) Note: in the empty space ( ---------- ) you can fill the name of each yogini for each time. List of 64 Yogini / चौँसठ योगिनी For better readability I put this list in four parag
Post a Comment
Read more

Moringa Soup 🍲

I don't like taste of Moringa but as it has a lot of health benefits, I think it should be eaten once in a week or in fifteen days. Health benefits of Moringa leaves Though bitter in taste, it is considered rich in nutrients and antioxidants. It has anti-inflammatory properties, also it is supposed to lower down cholesterol and blood sugar level. It is considered to have numerous health advantages. Where to find Moringa?  Available at any vegetable shop, weekly mandi market or search 'em at online stores. Moringa Soup Ingredients: Moringa cut into 2 inches pieces, onions, garlic, masoor dal (लाल वाली), ginger, shimla mirch, green chili, rock salt, kali mirch, and turmeric powder.
Post a Comment
Read more

Essential Nyas For A Sadhak To Do Everyday

Nyas means to establish something (Devi / Devta energy) in our body: it purifies our body and makes our body and mind worthy of chanting a mantra / stotra. A Sadhak should do भूत-शुद्धि, बहिर्मातृका न्यास, अन्तर्मातृका न्यास, and षोढा-न्यास daily, 'coz we worship Devta by becoming a Devta, and in that Nyas helps us a lot. In every mantra generally many kinds of Nyas are given prior to chanting a mantra, they are usually shorter and doesn't take much time. They are essential and shouldn't be skipped. These  भूत-शुद्धि, बहिर्मातृका न्यास, अन्तर्मातृका न्यास, and षोढा-न्यास take comparatively longer time duration.  भूत-शुद्धि means purification of five elements in our body, that is Earth (Prithvi), Water (Jal), Fire (Agni), Air (Vayu), and Ether (Aakash). बहिर्मातृका Nyas and अन्तर्मातृका Nyas, establish  "energy of our VarnMala" in our body-parts and in our chakras respectively.   षोढा-न्यास is of two types Lagu Shoda Nyas and Maha Shoda Nyas.
Post a Comment
Read more

Nutritional Diet Plan (Raw) To Any Disease

It may help in any kind of chronic disease -- we just need to learn how to prepare them.  Things to eat / drink: Smoothie Salad / fruits / vegetables Steamed vegetables (when raw vegetables are difficult to eat.) Juices Soup Coconut Milk Cold-pressed edible virgin coconut oil (to be taken as raw one to three teaspoons a day.) Taste enhancers: Chutney / Tahini / Kokum etc. Crushed "garlic, ginger, raw turmeric, raw amala, green chilly" (It is v. good) Banana Icecream (sometimes, not to be eaten regularly, as it may slow down digestive fire.) Once in a day Moon Dal and brown rice. Soaked peanuts and dry-fruits in lower quantity initially. We need to choose what to eat in breakfast, lunch, evening-snacks and dinner. In raw diet, we need to eat a lot.  Just open Youtube and search for "Smoothie" you may get plenty of videos, like that you can search for Soup, Chutney and other items. Try to use above diet plan for a week. Also one needs to check nutritional deficiency f
Post a Comment
Read more

Utkeelan Mantra & Stotra Vidhan Of Shri Batuk Bhairav

Below is Utkeelan Mantra & Stotra of Shri Batuk Bhairav. You can also get  Shap Vimochan & Shapoddhar Mantra / Stotra from here . Both go hand in hand for removing curse and unlocking Keelan of Shri Batuk Bhairav Mantras and Stotras. ।।  विनियोग  ।। ॐ अस्य श्रीबटुक-भैरवोत्कीलन-मन्त्र- स्योग्र-भैरवो ऋषिः, अनुष्टुप् छन्दः, श्रीभैरवो देवता, वं बीजं, ह्रीं शक्तिः, क्लीं कीलकं, मम सर्वाभीष्ट- सिद्धधर्थे बटुक-भैरवोत्कीलन-मन्त्र-जपे विनियोगः । ।।  ऋष्यादि-न्यास  ।। उग्रभैरव-ऋषये नमः शिरसि । अनुष्टुप् छन्दसे नमः मुखे । श्रीभैरव देवतायै नमः हृदि । वं बीजाय नमः गुह्ये । ह्रीं शक्तये नमः पादयोः । क्लीं कीलकाय नमः नाभौ । मम सर्वाभीष्ट- सिद्धघर्थे बटुक-भैरवोत्कीलन-मन्त्र-जपे विनियोगाय नमः सर्वाङ्गे । ।।  कर-न्यास  ।। ॐ अंगुष्ठाभ्यां नमः । ह्रीं तर्जनोभ्यां नमः । क्लीं मध्यमाभ्यां नमः । ऐं अनामिकाभ्यां नमः । हू कनिष्ठिकाभ्यां नमः । म्रां कर-तल-कर- पृष्ठाभ्यां नमः । ।।  षडङ्ग-न्यास  ।।  बटुकाय हृदयाय नमः । उमा-पुत्राय शिरसे स्वाहा । एकादश-रुद्रावताराय शिखायै वषट् । वीरभद्रावताराय कवचाय हुम् ।
Post a Comment
Read more

Why Two Types Of Navratri Are More Popular

Navratri comes four times in a year: 1) In Chitra (Vasant) Maas, 2) In Sharad (Ashwin) Maas, 3) In Ashadha (आषाढ़) Maas, and 4) in Magh Maas. As it is written in the following Shaloka: चैत्रे आश्विने तथाषाढे, माघे कार्यों महोत्सवः। नव रात्रे महाराज! पूजा कार्या विशेषतः ।।  Generally, we are told that two Navratri are for public and rest two Navratri are called Gupt Navratri. These two Gupt Navratri are for the Sadhak --- but it isn't the exact fact. All four Navratri are for general public and for all dedicated Devi Sadhak, there is no secret. Fact is during the time of Chaitra and Sharad, weather changes a lot -- so there are chances of getting diseases. During Navratri due to fasting and purification, all kind of diseases can be avoided, that's why these two Navratri gained significance among public.
Post a Comment
Read more