One of the most beautiful things about JavaScript is its flexibility. The language gives developers a lot of slack by not giving us a lot of rules and conventions to deal with.

A prime example: JavaScript allows us to create any type of variable, anywhere in our script (because it’s a dynamic programming language). That’s great news, but it can also be a double-edged sword if we don’t exercise a bit of caution.

One popular way of working with JavaScript variables more effectively is the single var pattern.

I first formally encountered this pattern in Stoyan Stefanov’s book, JavaScript Patterns, and I’ve been using it ever since.

Douglas Crockford, a leader in the world of JavaScript, supports the single var pattern. His reasoning is below:

[...] because JavaScript does not have block scope, it is wiser to declare all of a function’s variables at the top of the function. It is recommended that a single var statement be used per function.

JSLint: The JavaScript Code Quality Tool

Let’s talk about the JavaScript pattern and why you might want to use it in your development projects.

The Single Var Pattern

In the single var pattern, all local variables are created using only one var statement. The statement is placed at the start of the function block. Each variable is separated by a comma (,), and the last variable ends with a semicolon (;) which terminates the var statement.

Here’s an example of the pattern:

function myfunction() {
  var  a = 1,
       b = "Hello",
       c = { name: "Jake", age: 64 },
       d = new Date(),
       e;
}

Details

The above example is equal to having multiple var statements for each variable:

function myfunction() {
  var a = 1;
  var b = "Hello";
  var c = { name: "John", age: 64 };
  var d = new Date();
  var e;
}

By the way, the multiple var statement pattern shown above is a good alternative to the single var pattern because the variables are also declared at the start of the function block (which avoids logical errors) and is also readable, thus providing web developers the same benefits, albeit in a more verbose manner.

In JavaScript, spaces, newlines, tabs, and other spacing characters before and after commas and semicolons are ignored, so we could have written the example above in just one line, like so:

function myfunction() {
  var a = 1, b = "Hello", c = { name: "John", age: 64 }, d = new Date(), e;
}

But it’s a good practice to put each variable on its own line for improved readability, and so that you can more comfortably comment your variables individually if needed.

Does Data Type Matter?

JavaScript is a dynamically typed language, so we don’t need to explicitly declare what data type a variable is/will be. The data type can also be changed from one type to another without any special treatment. So, we can have a mixture of data types — strings, function literals, arrays, undefined, etc. — in one var statement without any issues.

Do Some Work

The book I mentioned earlier also recommends doing some "actual work" during the single var statement. For example, let’s say we created a function that returns a randomly picked integer number between two numerical arguments we feed it:

// A function that returns a random integer number
// between two specified integer arguments.
var randomizer = function (a, b) {
  var min = a,
      max = b,
      random = Math.random(),
      result;

  // Calculate random number
  result = Math.floor(random * (max - min) + min);

  return result;
}
// Display random number in an alert box
alert(randomizer(1, 100));

What we could do instead is to include the calculation of the result variable’s value in our single var statement, as follows:

// A function that returns a random integer number
// between two specified integer arguments.
var randomizer = function (a, b) {
  var min = a,
      max = b,
      random = Math.random(),
      // Calculate random number
      result = Math.floor(random * (max - min) + min);

  return result;
}
// Display random number in an alert box
alert(randomizer(1, 100));

Doing some work during the single var statement does two things:

  • It slightly reduces the amount of code we have to write
  • It avoids redundancy. More specifically, we don’t need to declare an undefined/empty variable that we will end up using in our function anyways

A Variation

There’s an alternative formatting style for the single var pattern, which is to place the comma-separators at the start of each line, instead of at the end:

function myfunction() {
  var   a = 1
      , b = "Hello"
      , c = { name: "John", age: 64 }
      , d = new Date()
      , e;
}

The purpose of this variation is to remind you to separate your variables with commas whenever you add a variable in the statement.

The placement of the commas is a matter of preference. Me? I like having the commas at the end of the line because it makes the var statement easier to read, and my code editor’s syntax highlighter quickly reminds me that I’m missing a comma between variable declarations. Also, in my opinion, having a line start with commas is unnatural and less readable. To each his/her own.

Benefits of Using the Single Var Pattern

Why would you want to use this JavaScript pattern? I’ll give you three reasons. But before I discuss them, I also want to say that there’s no "one correct way" of declaring JavaScript variables because the language doesn’t have any enforced rule or explicit standard for this process. Other ways, such as the multi var pattern I briefly mentioned earlier or even just declaring variables on first-use will work just fine. With that said, you do get a few benefits from applying the single var pattern.

Ease of Use

It’s easier to create and manage variables when they are all in one spot. You don’t have to wonder where a certain variable is; all you have to do is scroll up to the top of the function to review or modify your function’s variables.

Code Readability

The single var JavaScript pattern is similar to the abstract of a scientific paper: It provides the reader with a quick overview of what the function will do without having to read the entire thing, compared to if the variables were declared on first-use. However, this is only going to be true if the variables are named intuitively and when the function is commented well.

Reduce the Possibility of Logical Errors

Because all of the variables are right at the start of the function block, we can sidestep issues related to variable hoisting, naming collisions, and accidentally declaring global variables. Let’s talk about each of these real quickly.

Hoisting

In JavaScript, hoisting refers to the language’s behavior of processing all of the statements first before it executes anything else. In other words, JavaScript hoists them up to the top of the scope. Because we’re deliberately and consistently placing all of our variables at the beginning of the function, it helps us avoid unforeseen results related hoisting.

Variable Naming Collisions

When you’re working on long and complex scripts, you might, at some point, unintentionally reuse a variable name, and this can lead to logical errors. By having all your variables in one spot, you can keep an eye out on what variable names you have already employed.

Helps Minimize Global Variables

It’s a good practice to eliminate any unnecessary global variables in your work because you might run into naming collisions with other JavaScript libraries you might be using that are relying on global variables. Also, whenever you can, you should use local variables because it’s faster to access compared to global variables. The single var pattern makes it more convenient to create local variables and serves as a constant reminder to watch out for accidental global variables.

Single Var Pattern Downsides

To get a well-balanced perspective, I recommend reading the following articles to learn about the disadvantages of the single var pattern; they have strong arguments that can help you make an informed decision.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post The Single Var Pattern in JavaScript appeared first on Six Revisions.

One of the most beautiful things about JavaScript is its flexibility. The language gives developers a lot of slack by not giving us a lot of rules and conventions to deal with.

A prime example: JavaScript allows us to create any type of variable, anywhere in our script (because it’s a dynamic programming language). That’s great news, but it can also be a double-edged sword if we don’t exercise a bit of caution.

One popular way of working with JavaScript variables more effectively is the single var pattern.

I first formally encountered this pattern in Stoyan Stefanov’s book, JavaScript Patterns, and I’ve been using it ever since.

Douglas Crockford, a leader in the world of JavaScript, supports the single var pattern. His reasoning is below:

[...] because JavaScript does not have block scope, it is wiser to declare all of a function’s variables at the top of the function. It is recommended that a single var statement be used per function.

JSLint: The JavaScript Code Quality Tool

Let’s talk about the JavaScript pattern and why you might want to use it in your development projects.

The Single Var Pattern

In the single var pattern, all local variables are created using only one var statement. The statement is placed at the start of the function block. Each variable is separated by a comma (,), and the last variable ends with a semicolon (;) which terminates the var statement.

Here’s an example of the pattern:

function myfunction() {
  var  a = 1,
       b = "Hello",
       c = { name: "Jake", age: 64 },
       d = new Date(),
       e;
}

Details

The above example is equal to having multiple var statements for each variable:

function myfunction() {
  var a = 1;
  var b = "Hello";
  var c = { name: "John", age: 64 };
  var d = new Date();
  var e;
}

By the way, the multiple var statement pattern shown above is a good alternative to the single var pattern because the variables are also declared at the start of the function block (which avoids logical errors) and is also readable, thus providing web developers the same benefits, albeit in a more verbose manner.

In JavaScript, spaces, newlines, tabs, and other spacing characters before and after commas and semicolons are ignored, so we could have written the example above in just one line, like so:

function myfunction() {
  var a = 1, b = "Hello", c = { name: "John", age: 64 }, d = new Date(), e;
}

But it’s a good practice to put each variable on its own line for improved readability, and so that you can more comfortably comment your variables individually if needed.

Does Data Type Matter?

JavaScript is a dynamically typed language, so we don’t need to explicitly declare what data type a variable is/will be. The data type can also be changed from one type to another without any special treatment. So, we can have a mixture of data types — strings, function literals, arrays, undefined, etc. — in one var statement without any issues.

Do Some Work

The book I mentioned earlier also recommends doing some "actual work" during the single var statement. For example, let’s say we created a function that returns a randomly picked integer number between two numerical arguments we feed it:

// A function that returns a random integer number
// between two specified integer arguments.
var randomizer = function (a, b) {
  var min = a,
      max = b,
      random = Math.random(),
      result;

  // Calculate random number
  result = Math.floor(random * (max - min) + min);

  return result;
}
// Display random number in an alert box
alert(randomizer(1, 100));

What we could do instead is to include the calculation of the result variable’s value in our single var statement, as follows:

// A function that returns a random integer number
// between two specified integer arguments.
var randomizer = function (a, b) {
  var min = a,
      max = b,
      random = Math.random(),
      // Calculate random number
      result = Math.floor(random * (max - min) + min);

  return result;
}
// Display random number in an alert box
alert(randomizer(1, 100));

Doing some work during the single var statement does two things:

  • It slightly reduces the amount of code we have to write
  • It avoids redundancy. More specifically, we don’t need to declare an undefined/empty variable that we will end up using in our function anyways

A Variation

There’s an alternative formatting style for the single var pattern, which is to place the comma-separators at the start of each line, instead of at the end:

function myfunction() {
  var   a = 1
      , b = "Hello"
      , c = { name: "John", age: 64 }
      , d = new Date()
      , e;
}

The purpose of this variation is to remind you to separate your variables with commas whenever you add a variable in the statement.

The placement of the commas is a matter of preference. Me? I like having the commas at the end of the line because it makes the var statement easier to read, and my code editor’s syntax highlighter quickly reminds me that I’m missing a comma between variable declarations. Also, in my opinion, having a line start with commas is unnatural and less readable. To each his/her own.

Benefits of Using the Single Var Pattern

Why would you want to use this JavaScript pattern? I’ll give you three reasons. But before I discuss them, I also want to say that there’s no "one correct way" of declaring JavaScript variables because the language doesn’t have any enforced rule or explicit standard for this process. Other ways, such as the multi var pattern I briefly mentioned earlier or even just declaring variables on first-use will work just fine. With that said, you do get a few benefits from applying the single var pattern.

Ease of Use

It’s easier to create and manage variables when they are all in one spot. You don’t have to wonder where a certain variable is; all you have to do is scroll up to the top of the function to review or modify your function’s variables.

Code Readability

The single var JavaScript pattern is similar to the abstract of a scientific paper: It provides the reader with a quick overview of what the function will do without having to read the entire thing, compared to if the variables were declared on first-use. However, this is only going to be true if the variables are named intuitively and when the function is commented well.

Reduce the Possibility of Logical Errors

Because all of the variables are right at the start of the function block, we can sidestep issues related to variable hoisting, naming collisions, and accidentally declaring global variables. Let’s talk about each of these real quickly.

Hoisting

In JavaScript, hoisting refers to the language’s behavior of processing all of the statements first before it executes anything else. In other words, JavaScript hoists them up to the top of the scope. Because we’re deliberately and consistently placing all of our variables at the beginning of the function, it helps us avoid unforeseen results related hoisting.

Variable Naming Collisions

When you’re working on long and complex scripts, you might, at some point, unintentionally reuse a variable name, and this can lead to logical errors. By having all your variables in one spot, you can keep an eye out on what variable names you have already employed.

Helps Minimize Global Variables

It’s a good practice to eliminate any unnecessary global variables in your work because you might run into naming collisions with other JavaScript libraries you might be using that are relying on global variables. Also, whenever you can, you should use local variables because it’s faster to access compared to global variables. The single var pattern makes it more convenient to create local variables and serves as a constant reminder to watch out for accidental global variables.

Single Var Pattern Downsides

To get a well-balanced perspective, I recommend reading the following articles to learn about the disadvantages of the single var pattern; they have strong arguments that can help you make an informed decision.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post The Single Var Pattern in JavaScript appeared first on Six Revisions.

One of the most beautiful things about JavaScript is its flexibility. The language gives developers a lot of slack by not giving us a lot of rules and conventions to deal with.

A prime example: JavaScript allows us to create any type of variable, anywhere in our script (because it’s a dynamic programming language). That’s great news, but it can also be a double-edged sword if we don’t exercise a bit of caution.

One popular way of working with JavaScript variables more effectively is the single var pattern.

I first formally encountered this pattern in Stoyan Stefanov’s book, JavaScript Patterns, and I’ve been using it ever since.

Douglas Crockford, a leader in the world of JavaScript, supports the single var pattern. His reasoning is below:

[...] because JavaScript does not have block scope, it is wiser to declare all of a function’s variables at the top of the function. It is recommended that a single var statement be used per function.

JSLint: The JavaScript Code Quality Tool

Let’s talk about the JavaScript pattern and why you might want to use it in your development projects.

The Single Var Pattern

In the single var pattern, all local variables are created using only one var statement. The statement is placed at the start of the function block. Each variable is separated by a comma (,), and the last variable ends with a semicolon (;) which terminates the var statement.

Here’s an example of the pattern:

function myfunction() {
  var  a = 1,
       b = "Hello",
       c = { name: "Jake", age: 64 },
       d = new Date(),
       e;
}

Details

The above example is equal to having multiple var statements for each variable:

function myfunction() {
  var a = 1;
  var b = "Hello";
  var c = { name: "John", age: 64 };
  var d = new Date();
  var e;
}

By the way, the multiple var statement pattern shown above is a good alternative to the single var pattern because the variables are also declared at the start of the function block (which avoids logical errors) and is also readable, thus providing web developers the same benefits, albeit in a more verbose manner.

In JavaScript, spaces, newlines, tabs, and other spacing characters before and after commas and semicolons are ignored, so we could have written the example above in just one line, like so:

function myfunction() {
  var a = 1, b = "Hello", c = { name: "John", age: 64 }, d = new Date(), e;
}

But it’s a good practice to put each variable on its own line for improved readability, and so that you can more comfortably comment your variables individually if needed.

Does Data Type Matter?

JavaScript is a dynamically typed language, so we don’t need to explicitly declare what data type a variable is/will be. The data type can also be changed from one type to another without any special treatment. So, we can have a mixture of data types — strings, function literals, arrays, undefined, etc. — in one var statement without any issues.

Do Some Work

The book I mentioned earlier also recommends doing some "actual work" during the single var statement. For example, let’s say we created a function that returns a randomly picked integer number between two numerical arguments we feed it:

// A function that returns a random integer number
// between two specified integer arguments.
var randomizer = function (a, b) {
  var min = a,
      max = b,
      random = Math.random(),
      result;

  // Calculate random number
  result = Math.floor(random * (max - min) + min);

  return result;
}
// Display random number in an alert box
alert(randomizer(1, 100));

What we could do instead is to include the calculation of the result variable’s value in our single var statement, as follows:

// A function that returns a random integer number
// between two specified integer arguments.
var randomizer = function (a, b) {
  var min = a,
      max = b,
      random = Math.random(),
      // Calculate random number
      result = Math.floor(random * (max - min) + min);

  return result;
}
// Display random number in an alert box
alert(randomizer(1, 100));

Doing some work during the single var statement does two things:

  • It slightly reduces the amount of code we have to write
  • It avoids redundancy. More specifically, we don’t need to declare an undefined/empty variable that we will end up using in our function anyways

A Variation

There’s an alternative formatting style for the single var pattern, which is to place the comma-separators at the start of each line, instead of at the end:

function myfunction() {
  var   a = 1
      , b = "Hello"
      , c = { name: "John", age: 64 }
      , d = new Date()
      , e;
}

The purpose of this variation is to remind you to separate your variables with commas whenever you add a variable in the statement.

The placement of the commas is a matter of preference. Me? I like having the commas at the end of the line because it makes the var statement easier to read, and my code editor’s syntax highlighter quickly reminds me that I’m missing a comma between variable declarations. Also, in my opinion, having a line start with commas is unnatural and less readable. To each his/her own.

Benefits of Using the Single Var Pattern

Why would you want to use this JavaScript pattern? I’ll give you three reasons. But before I discuss them, I also want to say that there’s no "one correct way" of declaring JavaScript variables because the language doesn’t have any enforced rule or explicit standard for this process. Other ways, such as the multi var pattern I briefly mentioned earlier or even just declaring variables on first-use will work just fine. With that said, you do get a few benefits from applying the single var pattern.

Ease of Use

It’s easier to create and manage variables when they are all in one spot. You don’t have to wonder where a certain variable is; all you have to do is scroll up to the top of the function to review or modify your function’s variables.

Code Readability

The single var JavaScript pattern is similar to the abstract of a scientific paper: It provides the reader with a quick overview of what the function will do without having to read the entire thing, compared to if the variables were declared on first-use. However, this is only going to be true if the variables are named intuitively and when the function is commented well.

Reduce the Possibility of Logical Errors

Because all of the variables are right at the start of the function block, we can sidestep issues related to variable hoisting, naming collisions, and accidentally declaring global variables. Let’s talk about each of these real quickly.

Hoisting

In JavaScript, hoisting refers to the language’s behavior of processing all of the statements first before it executes anything else. In other words, JavaScript hoists them up to the top of the scope. Because we’re deliberately and consistently placing all of our variables at the beginning of the function, it helps us avoid unforeseen results related hoisting.

Variable Naming Collisions

When you’re working on long and complex scripts, you might, at some point, unintentionally reuse a variable name, and this can lead to logical errors. By having all your variables in one spot, you can keep an eye out on what variable names you have already employed.

Helps Minimize Global Variables

It’s a good practice to eliminate any unnecessary global variables in your work because you might run into naming collisions with other JavaScript libraries you might be using that are relying on global variables. Also, whenever you can, you should use local variables because it’s faster to access compared to global variables. The single var pattern makes it more convenient to create local variables and serves as a constant reminder to watch out for accidental global variables.

Single Var Pattern Downsides

To get a well-balanced perspective, I recommend reading the following articles to learn about the disadvantages of the single var pattern; they have strong arguments that can help you make an informed decision.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post The Single Var Pattern in JavaScript appeared first on Six Revisions.

Creating a set of CSS conventions — often called a CSS style guide — can streamline your web development workflow. It’s useful for large teams and solo developers alike.

CSS style guides are a group of documents that outline the coding style, best practices, and visual design properties (e.g. colors, layout grid dimensions, etc.) of a site. The goal of having a style guide is to maintain consistency across a product.

If you’re in the process of creating a CSS style guide, or if you want to learn about the CSS practices that large-scale websites use, check out the following list of style guides.

1. GitHub’s CSS Styleguide

GitHub's CSS Styleguide

GitHub’s CSS style guide covers everything from code-indentation style and when to use line breaks all the way to the company’s brand colors.

2. WordPress CSS Coding Standards

WordPress CSS Coding Standards

WordPress’s CSS coding standards outlines things such as how to organize CSS properties, how to group media queries, its CSS best practices, and more.

3. Google HTML/CSS Style Guide

Google HTML/CSS Style Guide

Google’s HTML and CSS style guide is comprehensive but written in a succinct manner, which makes it easy to use as a reference.

4. Bootstrap CSS Code Guide

Bootstrap CSS Code Guide

The CSS style guide of Bootstrap follows Code Guide by @mdo, which is a set of HTML and CSS guidelines developed by Mark Otto, Bootstrap’s co-creator.

5. Lonely Planet CSS

Lonely Planet CSS

Lonely Planet has CSS coding conventions documented at the site’s online style guide (called Rizzo).

6. ThinkUp’s CSS Code Style Guide

ThinkUp's CSS Code Style Guide

ThinkUp, a social media analytics app, has a CSS coding style guide which they have published on GitHub. The guide outlines the company’s basic CSS conventions, such as indentation style, class- and id-naming style, and more.

7. Mapbox’s CSS and Styling

Mapbox's CSS and Styling

Mapbox, a web-based tool for creating interactive maps, has a public style guide that documents the app’s CSS. The style guide documents coding style, how the grid system works, the website’s color property values, and so forth.

Further Reading

If you’re interested in developing a CSS style guide, the following resources will point you in the right direction.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post A List of CSS Style Guides for Inspiration appeared first on Six Revisions.

Creating a set of CSS conventions — often called a CSS style guide — can streamline your web development workflow. It’s useful for large teams and solo developers alike.

CSS style guides are a group of documents that outline the coding style, best practices, and visual design properties (e.g. colors, layout grid dimensions, etc.) of a site. The goal of having a style guide is to maintain consistency across a product.

If you’re in the process of creating a CSS style guide, or if you want to learn about the CSS practices that large-scale websites use, check out the following list of style guides.

1. GitHub’s CSS Styleguide

GitHub's CSS Styleguide

GitHub’s CSS style guide covers everything from code-indentation style and when to use line breaks all the way to the company’s brand colors.

2. WordPress CSS Coding Standards

WordPress CSS Coding Standards

WordPress’s CSS coding standards outlines things such as how to organize CSS properties, how to group media queries, its CSS best practices, and more.

3. Google HTML/CSS Style Guide

Google HTML/CSS Style Guide

Google’s HTML and CSS style guide is comprehensive but written in a succinct manner, which makes it easy to use as a reference.

4. Bootstrap CSS Code Guide

Bootstrap CSS Code Guide

The CSS style guide of Bootstrap follows Code Guide by @mdo, which is a set of HTML and CSS guidelines developed by Mark Otto, Bootstrap’s co-creator.

5. Lonely Planet CSS

Lonely Planet CSS

Lonely Planet has CSS coding conventions documented at the site’s online style guide (called Rizzo).

6. ThinkUp’s CSS Code Style Guide

ThinkUp's CSS Code Style Guide

ThinkUp, a social media analytics app, has a CSS coding style guide which they have published on GitHub. The guide outlines the company’s basic CSS conventions, such as indentation style, class- and id-naming style, and more.

7. Mapbox’s CSS and Styling

Mapbox's CSS and Styling

Mapbox, a web-based tool for creating interactive maps, has a public style guide that documents the app’s CSS. The style guide documents coding style, how the grid system works, the website’s color property values, and so forth.

Further Reading

If you’re interested in developing a CSS style guide, the following resources will point you in the right direction.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post A List of CSS Style Guides for Inspiration appeared first on Six Revisions.

Creating a set of CSS conventions — often called a CSS style guide — can streamline your web development workflow. It’s useful for large teams and solo developers alike.

CSS style guides are a group of documents that outline the coding style, best practices, and visual design properties (e.g. colors, layout grid dimensions, etc.) of a site. The goal of having a style guide is to maintain consistency across a product.

If you’re in the process of creating a CSS style guide, or if you want to learn about the CSS practices that large-scale websites use, check out the following list of style guides.

1. GitHub’s CSS Styleguide

GitHub's CSS Styleguide

GitHub’s CSS style guide covers everything from code-indentation style and when to use line breaks all the way to the company’s brand colors.

2. WordPress CSS Coding Standards

WordPress CSS Coding Standards

WordPress’s CSS coding standards outlines things such as how to organize CSS properties, how to group media queries, its CSS best practices, and more.

3. Google HTML/CSS Style Guide

Google HTML/CSS Style Guide

Google’s HTML and CSS style guide is comprehensive but written in a succinct manner, which makes it easy to use as a reference.

4. Bootstrap CSS Code Guide

Bootstrap CSS Code Guide

The CSS style guide of Bootstrap follows Code Guide by @mdo, which is a set of HTML and CSS guidelines developed by Mark Otto, Bootstrap’s co-creator.

5. Lonely Planet CSS

Lonely Planet CSS

Lonely Planet has CSS coding conventions documented at the site’s online style guide (called Rizzo).

6. ThinkUp’s CSS Code Style Guide

ThinkUp's CSS Code Style Guide

ThinkUp, a social media analytics app, has a CSS coding style guide which they have published on GitHub. The guide outlines the company’s basic CSS conventions, such as indentation style, class- and id-naming style, and more.

7. Mapbox’s CSS and Styling

Mapbox's CSS and Styling

Mapbox, a web-based tool for creating interactive maps, has a public style guide that documents the app’s CSS. The style guide documents coding style, how the grid system works, the website’s color property values, and so forth.

Further Reading

If you’re interested in developing a CSS style guide, the following resources will point you in the right direction.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post A List of CSS Style Guides for Inspiration appeared first on Six Revisions.

Creating a set of CSS conventions — often called a CSS style guide — can streamline your web development workflow. It’s useful for large teams and solo developers alike.

CSS style guides are a group of documents that outline the coding style, best practices, and visual design properties (e.g. colors, layout grid dimensions, etc.) of a site. The goal of having a style guide is to maintain consistency across a product.

If you’re in the process of creating a CSS style guide, or if you want to learn about the CSS practices that large-scale websites use, check out the following list of style guides.

1. GitHub’s CSS Styleguide

GitHub's CSS Styleguide

GitHub’s CSS style guide covers everything from code-indentation style and when to use line breaks all the way to the company’s brand colors.

2. WordPress CSS Coding Standards

WordPress CSS Coding Standards

WordPress’s CSS coding standards outlines things such as how to organize CSS properties, how to group media queries, its CSS best practices, and more.

3. Google HTML/CSS Style Guide

Google HTML/CSS Style Guide

Google’s HTML and CSS style guide is comprehensive but written in a succinct manner, which makes it easy to use as a reference.

4. Bootstrap CSS Code Guide

Bootstrap CSS Code Guide

The CSS style guide of Bootstrap follows Code Guide by @mdo, which is a set of HTML and CSS guidelines developed by Mark Otto, Bootstrap’s co-creator.

5. Lonely Planet CSS

Lonely Planet CSS

Lonely Planet has CSS coding conventions documented at the site’s online style guide (called Rizzo).

6. ThinkUp’s CSS Code Style Guide

ThinkUp's CSS Code Style Guide

ThinkUp, a social media analytics app, has a CSS coding style guide which they have published on GitHub. The guide outlines the company’s basic CSS conventions, such as indentation style, class- and id-naming style, and more.

7. Mapbox’s CSS and Styling

Mapbox's CSS and Styling

Mapbox, a web-based tool for creating interactive maps, has a public style guide that documents the app’s CSS. The style guide documents coding style, how the grid system works, the website’s color property values, and so forth.

Further Reading

If you’re interested in developing a CSS style guide, the following resources will point you in the right direction.

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer by profession. If you’d like to connect with him, head on over to the contact page or follow him on Twitter: @sixrevisions.

The post A List of CSS Style Guides for Inspiration appeared first on Six Revisions.

CSS is hard to maintain and scale without a well-defined approach. Here are five CSS development methodologies and style guides that can help.

1. SMACSS

SMACSS

SMACSS stands for Scalable and Modular Architecture for CSS. A core idea behind this CSS development approach is minimizing the depth of selectors in order to keep them modular as well as to lower dependency on the HTML structure. In SMACSS, there are five style-rule categories: Base, Layout, Module, State, and Theme.

2. CSS Guidelines

CSS Guidelines

CSS Guidelines is a comprehensive guide for writing maintainable CSS. It has rules such as limiting stylesheet lines to 80 characters, using soft tabs equal to four spaces, and so forth.

3. OOCSS

OOCSS

OOCSS stands for Object-oriented CSS. The central component of this approach is the CSS object, defined as "a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript."1

4. BEM

BEM

BEM stands for Block, Element, Modifier. In this front-end development methodology, a block is a discrete component, or a "building block". An element is a part of a block; for instance, a search form block has two elements: (1) a text input box and (2) a button.  A modifier is a property that changes a block or element visually or behaviorally. Each block has a unique name (a CSS class).

5. idiomatic CSS

idiomatic CSS

Principles of writing consistent, idiomatic CSS — or idiomatic CSS for short — is a CSS development style guide. It includes guidelines for code-formatting, commenting in the stylesheet, and such. The core principle behind this style guide is to keep your source CSS consistent and readable.

Citations

  1. oocss Wiki

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer. If you’d like to connect with him, head over to the contact page and follow him on Twitter: @sixrevisions.

The post 5 Standardized Methods for Writing CSS appeared first on Six Revisions.

CSS is hard to maintain and scale without a well-defined approach. Here are five CSS development methodologies and style guides that can help.

1. SMACSS

SMACSS

SMACSS stands for Scalable and Modular Architecture for CSS. A core idea behind this CSS development approach is minimizing the depth of selectors in order to keep them modular as well as to lower dependency on the HTML structure. In SMACSS, there are five style-rule categories: Base, Layout, Module, State, and Theme.

2. CSS Guidelines

CSS Guidelines

CSS Guidelines is a comprehensive guide for writing maintainable CSS. It has rules such as limiting stylesheet lines to 80 characters, using soft tabs equal to four spaces, and so forth.

3. OOCSS

OOCSS

OOCSS stands for Object-oriented CSS. The central component of this approach is the CSS object, defined as "a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript."1

4. BEM

BEM

BEM stands for Block, Element, Modifier. In this front-end development methodology, a block is a discrete component, or a "building block". An element is a part of a block; for instance, a search form block has two elements: (1) a text input box and (2) a button.  A modifier is a property that changes a block or element visually or behaviorally. Each block has a unique name (a CSS class).

5. idiomatic CSS

idiomatic CSS

Principles of writing consistent, idiomatic CSS — or idiomatic CSS for short — is a CSS development style guide. It includes guidelines for code-formatting, commenting in the stylesheet, and such. The core principle behind this style guide is to keep your source CSS consistent and readable.

Citations

  1. oocss Wiki

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer. If you’d like to connect with him, head over to the contact page and follow him on Twitter: @sixrevisions.

The post 5 Standardized Methods for Writing CSS appeared first on Six Revisions.

CSS is hard to maintain and scale without a well-defined approach. Here are five CSS development methodologies and style guides that can help.

1. SMACSS

SMACSS

SMACSS stands for Scalable and Modular Architecture for CSS. A core idea behind this CSS development approach is minimizing the depth of selectors in order to keep them modular as well as to lower dependency on the HTML structure. In SMACSS, there are five style-rule categories: Base, Layout, Module, State, and Theme.

2. CSS Guidelines

CSS Guidelines

CSS Guidelines is a comprehensive guide for writing maintainable CSS. It has rules such as limiting stylesheet lines to 80 characters, using soft tabs equal to four spaces, and so forth.

3. OOCSS

OOCSS

OOCSS stands for Object-oriented CSS. The central component of this approach is the CSS object, defined as "a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript."1

4. BEM

BEM

BEM stands for Block, Element, Modifier. In this front-end development methodology, a block is a discrete component, or a "building block". An element is a part of a block; for instance, a search form block has two elements: (1) a text input box and (2) a button.  A modifier is a property that changes a block or element visually or behaviorally. Each block has a unique name (a CSS class).

5. idiomatic CSS

idiomatic CSS

Principles of writing consistent, idiomatic CSS — or idiomatic CSS for short — is a CSS development style guide. It includes guidelines for code-formatting, commenting in the stylesheet, and such. The core principle behind this style guide is to keep your source CSS consistent and readable.

Citations

  1. oocss Wiki

Related Content

About the Author

Jacob Gube is the founder of Six Revisions. He’s a front-end web developer. If you’d like to connect with him, head over to the contact page and follow him on Twitter: @sixrevisions.

The post 5 Standardized Methods for Writing CSS appeared first on Six Revisions.

Powered by WP Robot