From a6a2e3ee2b0bd1c25f8595a928df88a0f376473e Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Fri, 22 Jan 2016 15:44:49 -0800 Subject: [PATCH 01/31] Advise against @extend, enable SCSS-lint ExtendDirective @extend is unintuitive and dangerous, so we are recommending against its use. As part of this commit, I enabled the SCSS-lint linter that will warn against its use. I also revised content that mentioned @extend, to maintain philosophical consistency. --- .scss-lint.yml | 3 ++ README.md | 75 ++++++-------------------------------------------- 2 files changed, 12 insertions(+), 66 deletions(-) diff --git a/.scss-lint.yml b/.scss-lint.yml index ddaf372..f70affd 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -10,6 +10,9 @@ linters: DeclarationOrder: enabled: false + ExtendDirective: + enabled: true + LeadingZero: enabled: false diff --git a/README.md b/README.md index 94cf8d1..38901c2 100644 --- a/README.md +++ b/README.md @@ -17,8 +17,7 @@ 1. [Sass](#sass) - [Syntax](#syntax) - [Ordering](#ordering-of-property-declarations) - - [Mixins](#mixins) - - [Placeholders](#placeholders) + - [Extend directive](#extend-directive) - [Nested selectors](#nested-selectors) ## Terminology @@ -174,41 +173,28 @@ We recommend creating JavaScript-specific classes to bind to, prefixed with `.js ### Syntax * Use the `.scss` syntax, never the original `.sass` syntax -* Order your `@extend`, regular CSS and `@include` declarations logically (see below) +* Order your regular CSS and `@include` declarations logically (see below) ### Ordering of property declarations -1. `@extend` declarations +1. Property declarations - Just as in other OOP languages, it's helpful to know right away that this “class” inherits from another. + List all standard property declarations, anything that isn't an `@include` or a nested selector. ```scss .btn-green { - @extend %btn; - // ... - } - ``` - -2. Property declarations - - Now list all standard property declarations, anything that isn't an `@extend`, `@include`, or a nested selector. - - ```scss - .btn-green { - @extend %btn; background: green; font-weight: bold; // ... } ``` -3. `@include` declarations +2. `@include` declarations - Grouping `@include`s at the end makes it easier to read the entire selector, and it also visually separates them from `@extend`s. + Grouping `@include`s at the end makes it easier to read the entire selector. ```scss .btn-green { - @extend %btn; background: green; font-weight: bold; @include transition(background 0.5s ease); @@ -216,13 +202,12 @@ We recommend creating JavaScript-specific classes to bind to, prefixed with `.js } ``` -4. Nested selectors +3. Nested selectors Nested selectors, _if necessary_, go last, and nothing goes after them. Add whitespace between your rule declarations and nested selectors, as well as between adjacent nested selectors. Apply the same guidelines as above to your nested selectors. ```scss .btn { - @extend %btn; background: green; font-weight: bold; @include transition(background 0.5s ease); @@ -233,51 +218,9 @@ We recommend creating JavaScript-specific classes to bind to, prefixed with `.js } ``` -### Mixins - -Mixins, defined via `@mixin` and called with `@include`, should be used sparingly and only when function arguments are necessary. A mixin without function arguments (i.e. `@mixin hide { display: none; }`) is better accomplished using a placeholder selector (see below) in order to prevent code duplication. - -### Placeholders - -Placeholders in Sass, defined via `%selector` and used with `@extend`, are a way of defining rule declarations that aren't automatically output in your compiled stylesheet. Instead, other selectors “inherit” from the placeholder, and the relevant selectors are copied to the point in the stylesheet where the placeholder is defined. This is best illustrated with the example below. - -Placeholders are powerful but easy to abuse, especially when combined with nested selectors. **As a rule of thumb, avoid creating placeholders with nested rule declarations, or calling `@extend` inside nested selectors.** Placeholders are great for simple inheritance, but can easily result in the accidental creation of additional selectors without paying close attention to how and where they are used. - -**Sass** - -```sass -// Unless we call `@extend %icon` these properties won't be compiled! -%icon { - font-family: "Airglyphs"; -} - -.icon-error { - @extend %icon; - color: red; -} - -.icon-success { - @extend %icon; - color: green; -} -``` - -**CSS** +### Extend directive -```css -.icon-error, -.icon-success { - font-family: "Airglyphs"; -} - -.icon-error { - color: red; -} - -.icon-success { - color: green; -} -``` +`@extend` should be avoided because it has unintuitive and potentially dangerous behavior, especially when used with nested selectors. Even extending top-level placeholder selectors can cause problems if the order of selectors ends up changing later (e.g. if they are in other files and the order the files are loaded shifts). Gzipping should handle most of the savings you would have gained by using `@extend`, and you can DRY up your stylesheets nicely with mixins. ### Nested selectors From 9392e2459d0a46998a230d7c0c5af710681e5d47 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Mon, 25 Jan 2016 09:29:51 -0800 Subject: [PATCH 02/31] Add section about mixins In my previous commit, I revised this document to advise against using @extend, which included removing the section about mixins because it only existed to recommend against using argumentless mixins in favor of @extend. However, this document feels a bit incomplete without some guidance on mixin usage, so I am adding a few sentences here. --- README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.md b/README.md index 38901c2..de2fcc1 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,7 @@ 1. [Sass](#sass) - [Syntax](#syntax) - [Ordering](#ordering-of-property-declarations) + - [Mixins](#mixins) - [Extend directive](#extend-directive) - [Nested selectors](#nested-selectors) @@ -218,6 +219,10 @@ We recommend creating JavaScript-specific classes to bind to, prefixed with `.js } ``` +### Mixins + +Mixins should be used to DRY up your code, add clarity, or abstract complexity--in much the same way as well-named functions. Mixins that accept no arguments can be useful for this, but note that if you are not compressing your payload (e.g. gzip), this may contribute to unnecessary code duplication in the resulting styles. + ### Extend directive `@extend` should be avoided because it has unintuitive and potentially dangerous behavior, especially when used with nested selectors. Even extending top-level placeholder selectors can cause problems if the order of selectors ends up changing later (e.g. if they are in other files and the order the files are loaded shifts). Gzipping should handle most of the savings you would have gained by using `@extend`, and you can DRY up your stylesheets nicely with mixins. From 22169e68d956d9e5693ed26ecf42c39378dc7a11 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Thu, 11 Feb 2016 12:23:03 -0800 Subject: [PATCH 03/31] Prefer `border: 0` over `border: none` Although the scss-lint configuration file here enforced `border: none`, we chatted about it and agreed that we prefer `border: 0`. --- .scss-lint.yml | 2 +- README.md | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/.scss-lint.yml b/.scss-lint.yml index f70affd..7c97713 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -2,7 +2,7 @@ linters: BorderZero: enabled: true - convention: none + convention: zero BemDepth: enabled: true diff --git a/README.md b/README.md index de2fcc1..d4f712d 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ - [OOCSS and BEM](#oocss-and-bem) - [ID Selectors](#id-selectors) - [JavaScript hooks](#javascript-hooks) + - [Border](#border) 1. [Sass](#sass) - [Syntax](#syntax) - [Ordering](#ordering-of-property-declarations) @@ -169,6 +170,26 @@ We recommend creating JavaScript-specific classes to bind to, prefixed with `.js ``` +### Border + +Use `0` instead of `none` to specify that a style has no border. + +**Bad** + +```css +.foo { + border: none; +} +``` + +**Good** + +```css +.foo { + border: 0; +} +``` + ## Sass ### Syntax From a8cf29f021257e998c019a4287365b1289b51923 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Thu, 11 Feb 2016 12:26:47 -0800 Subject: [PATCH 04/31] Default scss-lint severity to error scss-lint 0.44.0 added a global severity configuration setting. Since warnings are often ignored, we want to set this to error by default. --- .scss-lint.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.scss-lint.yml b/.scss-lint.yml index f70affd..0c31708 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -1,3 +1,5 @@ +severity: error + linters: BorderZero: From 3f3c91c90a17c8f8481a9cbd940b7a9277fe8d03 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Wed, 17 Feb 2016 15:48:23 -0800 Subject: [PATCH 05/31] Add section about using dash-cased for variable names We want people to use a consistent style for variable names. We believe that simple rules are most likely to be followed, and that consistency is good, so we are settling on dash-cased, which is what we use for everything else, such as classes, mixins, functions, and properties. Along with this change, I am explicitly enabling the NameFormat SCSS-Lint rule which enforces this style. Note that this is enabled in SCSS-Lint by default, so this is functionally no different, but it is good to be explicit about things. --- .scss-lint.yml | 3 +++ README.md | 5 +++++ 2 files changed, 8 insertions(+) diff --git a/.scss-lint.yml b/.scss-lint.yml index 2fa9e09..c8fb98b 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -18,6 +18,9 @@ linters: LeadingZero: enabled: false + NameFormat: + enabled: true + PropertySortOrder: enabled: false diff --git a/README.md b/README.md index d4f712d..e843a02 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ 1. [Sass](#sass) - [Syntax](#syntax) - [Ordering](#ordering-of-property-declarations) + - [Variables](#variables) - [Mixins](#mixins) - [Extend directive](#extend-directive) - [Nested selectors](#nested-selectors) @@ -240,6 +241,10 @@ Use `0` instead of `none` to specify that a style has no border. } ``` +### Variables + +Prefer dash-cased variable names (e.g. `$my-variable`) over camelCased or snake_cased variable names. It is acceptable to prefix variable names that are intended to be used only within the same file with an underscore (e.g. `$_my-variable`). + ### Mixins Mixins should be used to DRY up your code, add clarity, or abstract complexity--in much the same way as well-named functions. Mixins that accept no arguments can be useful for this, but note that if you are not compressing your payload (e.g. gzip), this may contribute to unnecessary code duplication in the resulting styles. From 14f444c6b1b8b648fe831ef5dd136b428fb8b40c Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Mon, 22 Feb 2016 11:51:38 -0800 Subject: [PATCH 06/31] Enable PrivateNamingConvention scss-lint rule Since we mention that prefixing names with underscores is an acceptable way to denote that they are private, we want to enforce that they are defined within the same file that they are used. The new PrivateNamingConvention rule in scss-lint is designed for this purpose. --- .scss-lint.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.scss-lint.yml b/.scss-lint.yml index c8fb98b..d90fa16 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -21,6 +21,10 @@ linters: NameFormat: enabled: true + PrivateNamingConvention: + enabled: true + prefix: _ + PropertySortOrder: enabled: false From e6a32ac39073f066a04ad2809e415281de55fa13 Mon Sep 17 00:00:00 2001 From: Zhangjd Date: Fri, 1 Apr 2016 00:07:50 +0800 Subject: [PATCH 07/31] Update README.md Add Chinese(Simplified) Translation. --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index e843a02..5c99c38 100644 --- a/README.md +++ b/README.md @@ -22,6 +22,7 @@ - [Mixins](#mixins) - [Extend directive](#extend-directive) - [Nested selectors](#nested-selectors) + 1. [Translation](#translation) ## Terminology @@ -277,3 +278,9 @@ When selectors become this long, you're likely writing CSS that is: Again: **never nest ID selectors!** If you must use an ID selector in the first place (and you should really try not to), they should never be nested. If you find yourself doing this, you need to revisit your markup, or figure out why such strong specificity is needed. If you are writing well formed HTML and CSS, you should **never** need to do this. + +## Translation + + This style guide is also available in other languages: + + - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide) From 12e7b58843d0be99a325ab6d351b359663f27d68 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Fri, 6 May 2016 10:58:24 -0700 Subject: [PATCH 08/31] Add note about PascalCasing BEM blocks with React BEM wasn't designed with React in mind, and I think that this deviation from the convention is useful to more closely connect the concepts of BEM to your React components. Granted, with CSS Modules or inline CSS (CSS in JS), this is pretty irrelevant, but it is nice to provide the guidance for folks who are not yet living in that world. --- README.md | 41 +++++++++++++++++++++++++---------------- 1 file changed, 25 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 5c99c38..a949fc4 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,8 @@ Finally, properties are what give the selected elements of a rule declaration th ### Formatting * Use soft tabs (2 spaces) for indentation -* Prefer dashes over camelCasing in class names. Underscores are OK if you're using BEM (see [OOCSS and BEM](#oocss-and-bem) below). +* Prefer dashes over camelCasing in class names. + - Underscores and PascalCasing are okay if you are using BEM (see [OOCSS and BEM](#oocss-and-bem) below). * Do not use ID selectors * When using multiple selectors in a rule declaration, give each selector its own line. * Put a space before the opening brace `{` in rule declarations @@ -131,30 +132,38 @@ We encourage some combination of OOCSS and BEM for these reasons: * CSS Trick's [BEM 101](https://css-tricks.com/bem-101/) * Harry Roberts' [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) +We recommend a variant of BEM with PascalCased “blocks”, which works particularly well when combined with components (e.g. React). Underscores and dashes are still used for modifiers and children. + **Example** -```html -
+```jsx +// ListingCard.jsx +function ListingCard() { + return ( +
-

Adorable 2BR in the sunny Mission

+

Adorable 2BR in the sunny Mission

-
-

Vestibulum id ligula porta felis euismod semper.

-
+
+

Vestibulum id ligula porta felis euismod semper.

+
-
+
+ ); +} ``` ```css -.listing-card { } -.listing-card--featured { } -.listing-card__title { } -.listing-card__content { } +/* ListingCard.css */ +.ListingCard { } +.ListingCard--featured { } +.ListingCard__title { } +.ListingCard__content { } ``` - * `.listing-card` is the “block” and represents the higher-level component - * `.listing-card__title` is an “element” and represents a descendant of `.listing-card` that helps compose the block as a whole. - * `.listing-card--featured` is a “modifier” and represents a different state or variation on the `.listing-card` block. + * `.ListingCard` is the “block” and represents the higher-level component + * `.ListingCard__title` is an “element” and represents a descendant of `.ListingCard` that helps compose the block as a whole. + * `.ListingCard--featured` is a “modifier” and represents a different state or variation on the `.ListingCard` block. ### ID selectors @@ -282,5 +291,5 @@ If you must use an ID selector in the first place (and you should really try not ## Translation This style guide is also available in other languages: - + - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide) From db16d6da2b8ed1f75a60f9fb71619f755026a0f3 Mon Sep 17 00:00:00 2001 From: Andrew Hill Date: Mon, 9 May 2016 08:45:11 +0200 Subject: [PATCH 09/31] Minor spelling correction. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index a949fc4..776e392 100644 --- a/README.md +++ b/README.md @@ -122,7 +122,7 @@ We encourage some combination of OOCSS and BEM for these reasons: * It allows for less nesting and lower specificity * It helps in building scalable stylesheets -**OOCSS**, or “Object Oriented CSS”, is an approach for writing CSS that encourages you to think about your stylesheets as a collection of “objects”: reusuable, repeatable snippets that can be used independently throughout a website. +**OOCSS**, or “Object Oriented CSS”, is an approach for writing CSS that encourages you to think about your stylesheets as a collection of “objects”: reusable, repeatable snippets that can be used independently throughout a website. * Nicole Sullivan's [OOCSS wiki](https://github.com/stubbornella/oocss/wiki) * Smashing Magazine's [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/) From 20dbf19ee3d1d583ae25f25c0d3d10d725c04424 Mon Sep 17 00:00:00 2001 From: Alex Date: Sat, 14 May 2016 17:19:20 +0600 Subject: [PATCH 10/31] Add russian translation link Hey guys, i've translated this styleguide to russian, can you add link to it ? --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 776e392..0f3cab9 100644 --- a/README.md +++ b/README.md @@ -293,3 +293,4 @@ If you must use an ID selector in the first place (and you should really try not This style guide is also available in other languages: - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide) + - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) From d0fc464c58c5a0655a9fa1dc68bc70208d52f377 Mon Sep 17 00:00:00 2001 From: nao215 Date: Thu, 26 May 2016 01:24:58 +0900 Subject: [PATCH 11/31] Added Japanese translation link --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 0f3cab9..b7c62dc 100644 --- a/README.md +++ b/README.md @@ -294,3 +294,4 @@ If you must use an ID selector in the first place (and you should really try not - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide) - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) + - ![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [nao215/css-style-guide](https://github.com/nao215/css-style-guide) From f0be413251760c58ee62388f17578c212fbce0fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ismael=20Mart=C3=ADnez?= Date: Wed, 8 Jun 2016 17:44:04 -0300 Subject: [PATCH 12/31] Add spanish translation link --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index b7c62dc..b61c36f 100644 --- a/README.md +++ b/README.md @@ -295,3 +295,4 @@ If you must use an ID selector in the first place (and you should really try not - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide) - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) - ![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [nao215/css-style-guide](https://github.com/nao215/css-style-guide) + - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) From 167006d9f203c7bc8675938b5b5eb1fc91aef345 Mon Sep 17 00:00:00 2001 From: Felipe Volpatto Date: Thu, 9 Jun 2016 13:45:24 -0300 Subject: [PATCH 13/31] Add Portuguese translation link --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index b61c36f..fdd6db7 100644 --- a/README.md +++ b/README.md @@ -296,3 +296,4 @@ If you must use an ID selector in the first place (and you should really try not - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) - ![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [nao215/css-style-guide](https://github.com/nao215/css-style-guide) - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) + - ![PT-BR](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Portuguese**: [felipevolpatto/css-style-guide](https://github.com/felipevolpatto/css-style-guide) From a665ff2810dbe9b286986069521ac6a078a3981a Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Wed, 13 Jul 2016 08:03:20 -0700 Subject: [PATCH 14/31] Add link to Korean translation --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index fdd6db7..4d760c0 100644 --- a/README.md +++ b/README.md @@ -297,3 +297,4 @@ If you must use an ID selector in the first place (and you should really try not - ![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [nao215/css-style-guide](https://github.com/nao215/css-style-guide) - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) - ![PT-BR](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Portuguese**: [felipevolpatto/css-style-guide](https://github.com/felipevolpatto/css-style-guide) + - ![ko](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [CodeMakeBros/css-style-guide](https://github.com/CodeMakeBros/css-style-guide) From f06502bee7ad00d06ae20a8557c69eb5acab6358 Mon Sep 17 00:00:00 2001 From: Joe Lencioni Date: Wed, 13 Jul 2016 08:04:58 -0700 Subject: [PATCH 15/31] Sort translations alphabetically This will make it easier to find what you are looking for and make it easier to know where to put new translations. --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 4d760c0..7b3b10e 100644 --- a/README.md +++ b/README.md @@ -293,8 +293,8 @@ If you must use an ID selector in the first place (and you should really try not This style guide is also available in other languages: - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide) - - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) - ![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [nao215/css-style-guide](https://github.com/nao215/css-style-guide) - - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) - - ![PT-BR](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Portuguese**: [felipevolpatto/css-style-guide](https://github.com/felipevolpatto/css-style-guide) - ![ko](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [CodeMakeBros/css-style-guide](https://github.com/CodeMakeBros/css-style-guide) + - ![PT-BR](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Portuguese**: [felipevolpatto/css-style-guide](https://github.com/felipevolpatto/css-style-guide) + - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) + - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) From b2f2f5ce60bc5ea43d62100f453496e652e08a7e Mon Sep 17 00:00:00 2001 From: arvinh Date: Sun, 7 Aug 2016 17:19:57 +0800 Subject: [PATCH 16/31] add traditional chinese support --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 7b3b10e..1b89889 100644 --- a/README.md +++ b/README.md @@ -292,6 +292,7 @@ If you must use an ID selector in the first place (and you should really try not This style guide is also available in other languages: + - ![tw](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Taiwan.png) **Chinese (Traditional)**: [ArvinH/css-style-guide](https://github.com/ArvinH/css-style-guide) - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide) - ![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [nao215/css-style-guide](https://github.com/nao215/css-style-guide) - ![ko](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [CodeMakeBros/css-style-guide](https://github.com/CodeMakeBros/css-style-guide) From 2e42d5ea6263ded98d40bc593116694a64079766 Mon Sep 17 00:00:00 2001 From: Vo Tuan Trung Date: Fri, 12 Aug 2016 00:55:33 +0800 Subject: [PATCH 17/31] Update Vietnamese Translation --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 1b89889..eecbd00 100644 --- a/README.md +++ b/README.md @@ -299,3 +299,4 @@ If you must use an ID selector in the first place (and you should really try not - ![PT-BR](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Portuguese**: [felipevolpatto/css-style-guide](https://github.com/felipevolpatto/css-style-guide) - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) + - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **Vietnamese**: [trungk18/css-style-guide](https://github.com/trungk18/css-style-guide) From fe22841f111998f26a3960108cccbc72983c423e Mon Sep 17 00:00:00 2001 From: Irfan Maulana Date: Tue, 13 Dec 2016 17:26:09 +0700 Subject: [PATCH 18/31] Add indonesian link --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index eecbd00..aa57319 100644 --- a/README.md +++ b/README.md @@ -300,3 +300,4 @@ If you must use an ID selector in the first place (and you should really try not - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **Vietnamese**: [trungk18/css-style-guide](https://github.com/trungk18/css-style-guide) + - ![id](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Indonesia.png) **Bahasa Indonesia**: [mazipan/css-style-guide](https://github.com/mazipan/css-style-guide) From bc415edf0ca28c53c28a5962485fdc871f11b2eb Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Fri, 12 May 2017 00:08:24 -0300 Subject: [PATCH 19/31] Fixed table of contents list, add link 'back to top' --- README.md | 15 +++++++++++---- 1 file changed, 11 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index aa57319..bc3d28f 100644 --- a/README.md +++ b/README.md @@ -4,25 +4,25 @@ ## Table of Contents - 1. [Terminology](#terminology) +1. [Terminology](#terminology) - [Rule Declaration](#rule-declaration) - [Selectors](#selectors) - [Properties](#properties) - 1. [CSS](#css) +1. [CSS](#css) - [Formatting](#formatting) - [Comments](#comments) - [OOCSS and BEM](#oocss-and-bem) - [ID Selectors](#id-selectors) - [JavaScript hooks](#javascript-hooks) - [Border](#border) - 1. [Sass](#sass) +1. [Sass](#sass) - [Syntax](#syntax) - [Ordering](#ordering-of-property-declarations) - [Variables](#variables) - [Mixins](#mixins) - [Extend directive](#extend-directive) - [Nested selectors](#nested-selectors) - 1. [Translation](#translation) +1. [Translation](#translation) ## Terminology @@ -62,6 +62,8 @@ Finally, properties are what give the selected elements of a rule declaration th } ``` +**[⬆ back to top](#table-of-contents)** + ## CSS ### Formatting @@ -200,6 +202,7 @@ Use `0` instead of `none` to specify that a style has no border. border: 0; } ``` +**[⬆ back to top](#table-of-contents)** ## Sass @@ -288,6 +291,8 @@ Again: **never nest ID selectors!** If you must use an ID selector in the first place (and you should really try not to), they should never be nested. If you find yourself doing this, you need to revisit your markup, or figure out why such strong specificity is needed. If you are writing well formed HTML and CSS, you should **never** need to do this. +**[⬆ back to top](#table-of-contents)** + ## Translation This style guide is also available in other languages: @@ -301,3 +306,5 @@ If you must use an ID selector in the first place (and you should really try not - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **Vietnamese**: [trungk18/css-style-guide](https://github.com/trungk18/css-style-guide) - ![id](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Indonesia.png) **Bahasa Indonesia**: [mazipan/css-style-guide](https://github.com/mazipan/css-style-guide) + +**[⬆ back to top](#table-of-contents)** From 9b124f4872d315e386b5fea22e5f3a8329440ba1 Mon Sep 17 00:00:00 2001 From: Mat Date: Thu, 27 Jul 2017 10:57:49 +0200 Subject: [PATCH 20/31] Add link to French translation --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index bc3d28f..c9fd1c6 100644 --- a/README.md +++ b/README.md @@ -297,14 +297,15 @@ If you must use an ID selector in the first place (and you should really try not This style guide is also available in other languages: + - ![id](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Indonesia.png) **Bahasa Indonesia**: [mazipan/css-style-guide](https://github.com/mazipan/css-style-guide) - ![tw](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Taiwan.png) **Chinese (Traditional)**: [ArvinH/css-style-guide](https://github.com/ArvinH/css-style-guide) - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide) + - ![fr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/France.png) **French**: [mat-u/css-style-guide](https://github.com/mat-u/css-style-guide) - ![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [nao215/css-style-guide](https://github.com/nao215/css-style-guide) - ![ko](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [CodeMakeBros/css-style-guide](https://github.com/CodeMakeBros/css-style-guide) - - ![PT-BR](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Portuguese**: [felipevolpatto/css-style-guide](https://github.com/felipevolpatto/css-style-guide) + - ![PT-BR](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Portuguese**: [felipevolpatto/css-style-guide](https://github.com/felipevolpatto/css-style-guide) - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **Vietnamese**: [trungk18/css-style-guide](https://github.com/trungk18/css-style-guide) - - ![id](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Indonesia.png) **Bahasa Indonesia**: [mazipan/css-style-guide](https://github.com/mazipan/css-style-guide) **[⬆ back to top](#table-of-contents)** From 2bd8b838c1656fb65c5498609422f2f6dcddaa33 Mon Sep 17 00:00:00 2001 From: Antonio Date: Fri, 1 Sep 2017 17:32:01 +0200 Subject: [PATCH 21/31] Added link to italian translation --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index c9fd1c6..03afeca 100644 --- a/README.md +++ b/README.md @@ -307,5 +307,6 @@ If you must use an ID selector in the first place (and you should really try not - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **Vietnamese**: [trungk18/css-style-guide](https://github.com/trungk18/css-style-guide) + - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png) **Italian**: [antoniofull/linee-guida-css](https://github.com/antoniofull/linee-guida-css) **[⬆ back to top](#table-of-contents)** From 8cb3760da438d05d4b76dfd024c93f86374b39b1 Mon Sep 17 00:00:00 2001 From: Sandro Miguel Marques Date: Sun, 11 Mar 2018 23:19:20 +0000 Subject: [PATCH 22/31] Added link to portuguese (Portugal) translation I added a translation for portuguese (Portugal) language. There is already a portuguese (Brazil) translation but it's not the same. Thank you for the great work! --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 03afeca..960dd95 100644 --- a/README.md +++ b/README.md @@ -303,7 +303,8 @@ If you must use an ID selector in the first place (and you should really try not - ![fr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/France.png) **French**: [mat-u/css-style-guide](https://github.com/mat-u/css-style-guide) - ![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [nao215/css-style-guide](https://github.com/nao215/css-style-guide) - ![ko](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [CodeMakeBros/css-style-guide](https://github.com/CodeMakeBros/css-style-guide) - - ![PT-BR](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Portuguese**: [felipevolpatto/css-style-guide](https://github.com/felipevolpatto/css-style-guide) + - ![PT-BR](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Portuguese (Brazil)**: [felipevolpatto/css-style-guide](https://github.com/felipevolpatto/css-style-guide) + - ![pt-PT](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Portugal.png) **Portuguese (Portugal)**: [SandroMiguel/airbnb-css-style-guide](https://github.com/SandroMiguel/airbnb-css-style-guide) - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **Vietnamese**: [trungk18/css-style-guide](https://github.com/trungk18/css-style-guide) From 1b78aca14c97a703ed8e9927d69d95f3d98e1714 Mon Sep 17 00:00:00 2001 From: Diane Ko Date: Thu, 15 Mar 2018 11:20:09 -0700 Subject: [PATCH 23/31] Add license info Adds MIT license info to the CSS guide since it was missing before. --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index 960dd95..3f65261 100644 --- a/README.md +++ b/README.md @@ -311,3 +311,17 @@ If you must use an ID selector in the first place (and you should really try not - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png) **Italian**: [antoniofull/linee-guida-css](https://github.com/antoniofull/linee-guida-css) **[⬆ back to top](#table-of-contents)** + +## License + +(The MIT License) + +Copyright (c) 2015 Airbnb + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +**[⬆ back to top](#table-of-contents)** From ba0eda5c270c507488bd32d8d2261506be81daa5 Mon Sep 17 00:00:00 2001 From: Diane Ko Date: Thu, 15 Mar 2018 11:48:52 -0700 Subject: [PATCH 24/31] Add license file --- LICENSE | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..29ac7c8 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2015 Airbnb + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. From a1dff50e927a55ca8b2f86d4bb481327f82e76e5 Mon Sep 17 00:00:00 2001 From: Diane Ko Date: Thu, 15 Mar 2018 11:49:10 -0700 Subject: [PATCH 25/31] Rename LICENSE to LICENSE.md --- LICENSE => LICENSE.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename LICENSE => LICENSE.md (100%) diff --git a/LICENSE b/LICENSE.md similarity index 100% rename from LICENSE rename to LICENSE.md From fd277b1f4e8649560b8b63538032c64265cc81da Mon Sep 17 00:00:00 2001 From: Diane Ko Date: Thu, 15 Mar 2018 12:12:52 -0700 Subject: [PATCH 26/31] Add link to license in readme TOC Forgot to add a Table of Contents link to the readme - this adds it in. --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3f65261..859e4e6 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,7 @@ - [Extend directive](#extend-directive) - [Nested selectors](#nested-selectors) 1. [Translation](#translation) +1. [License](#license) ## Terminology From 4d6f84102640de048ba76e8684e22206cd4824e5 Mon Sep 17 00:00:00 2001 From: Ruslan Tupolev Date: Fri, 27 Apr 2018 13:33:43 +0400 Subject: [PATCH 27/31] Add RU translate --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 859e4e6..f7ea1a2 100644 --- a/README.md +++ b/README.md @@ -306,7 +306,7 @@ If you must use an ID selector in the first place (and you should really try not - ![ko](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [CodeMakeBros/css-style-guide](https://github.com/CodeMakeBros/css-style-guide) - ![PT-BR](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Portuguese (Brazil)**: [felipevolpatto/css-style-guide](https://github.com/felipevolpatto/css-style-guide) - ![pt-PT](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Portugal.png) **Portuguese (Portugal)**: [SandroMiguel/airbnb-css-style-guide](https://github.com/SandroMiguel/airbnb-css-style-guide) - - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide) + - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russian**: [rtplv/airbnb-css-ru](https://github.com/rtplv/airbnb-css-ru) - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **Vietnamese**: [trungk18/css-style-guide](https://github.com/trungk18/css-style-guide) - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png) **Italian**: [antoniofull/linee-guida-css](https://github.com/antoniofull/linee-guida-css) From 4ac0870fa8240cf89fe296719dc602e021f8f172 Mon Sep 17 00:00:00 2001 From: Thomas Derflinger Date: Mon, 14 May 2018 21:05:44 +0200 Subject: [PATCH 28/31] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 859e4e6..7a0c6fc 100644 --- a/README.md +++ b/README.md @@ -310,6 +310,7 @@ If you must use an ID selector in the first place (and you should really try not - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanish**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css) - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **Vietnamese**: [trungk18/css-style-guide](https://github.com/trungk18/css-style-guide) - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png) **Italian**: [antoniofull/linee-guida-css](https://github.com/antoniofull/linee-guida-css) + - ![de](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Germany.png) **German**: [tderflinger/css-styleguide](https://github.com/tderflinger/css-styleguide) **[⬆ back to top](#table-of-contents)** From ede0a459d786819efb0fd4e1910a91ef06de0137 Mon Sep 17 00:00:00 2001 From: Divya Moncy Date: Sun, 28 Oct 2018 13:47:17 +0530 Subject: [PATCH 29/31] Update README.md --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 639c529..52804a5 100644 --- a/README.md +++ b/README.md @@ -69,15 +69,15 @@ Finally, properties are what give the selected elements of a rule declaration th ### Formatting -* Use soft tabs (2 spaces) for indentation +* Use soft tabs (2 spaces) for indentation. * Prefer dashes over camelCasing in class names. - Underscores and PascalCasing are okay if you are using BEM (see [OOCSS and BEM](#oocss-and-bem) below). -* Do not use ID selectors +* Do not use ID selectors. * When using multiple selectors in a rule declaration, give each selector its own line. -* Put a space before the opening brace `{` in rule declarations +* Put a space before the opening brace `{` in rule declarations. * In properties, put a space after, but not before, the `:` character. -* Put closing braces `}` of rule declarations on a new line -* Put blank lines between rule declarations +* Put closing braces `}` of rule declarations on a new line. +* Put blank lines between rule declarations. **Bad** From 8ef3b3ce07f7eba3a7580beb069360e30fae86e3 Mon Sep 17 00:00:00 2001 From: DavidKadaria Date: Sat, 10 Sep 2022 00:22:19 +0400 Subject: [PATCH 30/31] Added link to georgian translation --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 52804a5..6657a5e 100644 --- a/README.md +++ b/README.md @@ -302,6 +302,7 @@ If you must use an ID selector in the first place (and you should really try not - ![tw](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Taiwan.png) **Chinese (Traditional)**: [ArvinH/css-style-guide](https://github.com/ArvinH/css-style-guide) - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinese (Simplified)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide) - ![fr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/France.png) **French**: [mat-u/css-style-guide](https://github.com/mat-u/css-style-guide) + - ![ka](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Georgia.png) **Georgian**: [DavidKadaria/css-style-guide](https://github.com/davidkadaria/css-style-guide) - ![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanese**: [nao215/css-style-guide](https://github.com/nao215/css-style-guide) - ![ko](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Korean**: [CodeMakeBros/css-style-guide](https://github.com/CodeMakeBros/css-style-guide) - ![PT-BR](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Portuguese (Brazil)**: [felipevolpatto/css-style-guide](https://github.com/felipevolpatto/css-style-guide) From 5bbcb735a49797665bbe1676ecfc750277493097 Mon Sep 17 00:00:00 2001 From: Dan Beam <251287+danbeam@users.noreply.github.com> Date: Mon, 3 Jun 2024 15:24:15 -0700 Subject: [PATCH 31/31] Add deprecation notice to top of css README.md --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index 6657a5e..17a88a1 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,7 @@ +| :exclamation: Deprecation Notice | +|:-| +|We want to express our sincere gratitude for your support and contributions to this open source project. As we are no longer using this technology internally, we have come to the decision to archive this repository. While we won't be providing further updates or support, the existing code and resources will remain accessible for your reference. We encourage anyone interested to fork the repository and continue the project's legacy independently. Thank you for being a part of this journey and for your patience and understanding.| + # Airbnb CSS / Sass Styleguide *A mostly reasonable approach to CSS and Sass*