airbnb / css Goto Github PK

I have used on the Cascade Style Sheet,

To i should cannot override to write the styles in html page

How to override to write any sample code give.

Why did you decide to go with scss-lint instead of some stylelint or sass-lint?

Also, and perhaps this is better in its own issue, why do you think that this repo is so much less active than the javascript?

this:

.column {
    &:before {
    
    }
    border: 1px solid $special-text-color-blue;
  }

or this:

.column {
    border: 1px solid $special-text-color-blue;

    &:before {

    }
  }

hello, I came from here

stylelint/stylelint#5478

I got 'Deprecation Warning: 'declaration-property-value-blacklist' has been deprecated. Instead use 'declaration-property-value-disallowed-list'. See: https://github.com/stylelint/stylelint/blob/13.7.0/lib/rules/declaration-property-value-blacklist/README.md' error

stylelint.config.js

module.exports = {
  extends: [
    'stylelint-config-standard',
    // 'stylelint-config-airbnb',
    'stylelint-config-prettier',
  ],
  plugins: ['stylelint-scss', 'stylelint-order'],
  rules: {},
};

and if i remove stylelint-config-airbnb from extends, it works well.
can you check this for me?

Thank you! :)

I like the idea of this. I know we don't want to conform SO much to React because we may not use it forever. I think this makes sense though when it is necessary to use a React class as a namespace in CSS and it is easy enough to edit down the road. Just want to make sure this is cool with everyone to move forward using PascalCase on block elements (using BEM)

I've found no mention of media-queries here so I've got a question.

If I'm using SCSS or PostCSS Nested plugin, does Airbnb styleguide allow to use nested media-queries (media query bubbling, saying more precisely)? And if so, how much more preferable to use it in comparison with using regular media-queries?

Could you please update stylelint-config-airbnb package's dependencies, as these include high priority vulnerabilities?

npm audit

  High            Prototype Pollution                                           

  Package         lodash                                                        

  Patched in      >=4.17.11                                                     

  Dependency of   stylelint-config-airbnb [dev]                                 

  Path            stylelint-config-airbnb > editorconfig-tools > lodash         

  More info       https://npmjs.com/advisories/782                              


  High            Prototype Pollution                                           

  Package         lodash                                                        

  Patched in      >=4.17.12                                                     

  Dependency of   stylelint-config-airbnb [dev]                                 

  Path            stylelint-config-airbnb > editorconfig-tools > lodash         

  More info       https://npmjs.com/advisories/1065                             


  Moderate        Regular Expression Denial of Service                          

  Package         underscore.string                                             

  Patched in      >=3.3.5                                                       

  Dependency of   stylelint-config-airbnb [dev]                                 

  Path            stylelint-config-airbnb > editorconfig-tools > argparse >     
                  underscore.string                                             

  More info       https://npmjs.com/advisories/745     

Full screen navigation

omk

As Indonesian developer, I want other developer can read this style guide with our own language.
because many of our developer have poor English knowledge so I propose for this request

Steps to reproduce:

1. https://www.airbnb.co.in/
2. click guest dropdown

Hi there,

I hope you are doing well. Currently, I'm preparing a presentation for KharkivCSS (Ukrainian tech event). My talk will cover a lot of topics. Some of them you can find below:

• What is CSS Style guide;
• Why it's important to use it;
• How to start from scratch if you don't have any CSS Style Guides;
• Metrics;
• And so on.

I would like to ask you a few questions:

1. What the main reason did you follow when you decided to develop Airbnb CSS / Sass Style Guide?
2. Do you have any info which metrics have you improved, e.g. the counts of bugs/issues, time for development for a new feature, the size of components, etc?
3. Do you have any kind of Living Style Guide system based on your CSS / Sass Style Guide?

#CSSStyleGuide #CSSMatters #CSSStyleGuideMatters

Best regards,
Vitalii

Hello,
I think this should be a npm package so Sass lint can have the .yml file from the npm package.
Obviously we may copy/paste the .yml file but for well known reasons using npm packages are better than copy pasting needed dependencies (auto updates, more maintainable, better for git etc.)

This is a best pratice too?

.Block {
  &--modifier {
    
  }

  &__element {
    
  }
}

output:

.Block {}
.Block--modifier {}
.Block__element {}

Would it be possible to add a license to this repository? We would like to use it as the basis for our own internal styleguide, but don't want to violate any copyright laws.

Djdj

Can anyone help explain me why we should use border: 0; instead of border: none;?

Why are you guys using double_quotes instead of single_quotes as in the javascript config?

P.S. Looks like the official sass documentation uses single quotes: http://sass-lang.com/guide#topic-5

Hello!

I want to post this css style guide in Japanese as my companies tech blog.

This is our companies tech blog.
Recruit Sumai Company's Tech Blog

I think this is very good style guide so I want to spread a lot of Japanese!!
So can I post??

（´-`）.｡oO（and, is this right place to ask for this kind of question?)

Would be great to have a shared config file for stylelint.io with these rules.

It is written in JavaScript vs scss-lint that relies on Ruby.

Article about it

Couldn't it be useful to have an npm package for this one? :)

Hi, I have just translated this styleguide into Chinese Simplified version.

Would you like to append a translation list to the Readme? Just like the JavaScript styleguide.

https://github.com/Zhangjd/css-style-guide

This is my web

I have used on the Cascade Style Sheet and try to override the style.

but cannot override to write the styles in html page

How to override to write any sample code give.

In README.me, single quotes are used, while in .scss-lint.yml, double quotes are set.

bank

Add fully and correct translate airbnb/css on Russian language
PR: #67

According to W3 docs, we can, at least, use 17 basic css color keywords. Are there any pros or cons using these keywords?

The Sass core team is now building Sass in Dart instead of Ruby, and will no longer be maintaining the Ruby implementation unless a maintainer steps up to help. Since the SCSS-Lint project relies on the Ruby Sass implementation, this means it will eventually not support the latest Sass features and bug fixes.

So moving to sass-lint seems the right thing to do. Especially that sass-lint is on npm. Both sass-lint and scss-lint should be close.
I may create a PR to create a sass-lint if you agree. I prefer open issue and a PR as it may have multiple changes (Readme, the .sass-lint.yml file, we may delete the .scss-lint.yml file etc.)

What's the airbnb approach to styling typography? Is it advisable to select type-specific elements (p, header elements) and set their font-size, line-height and font-weight versus labeling each element with classes such as "normal-body", "small-body" ? should these classes be considered utility classes and be used in exceptional cases?

Hi

thanks for open-sourcing this guide.

question about this - Use the .scss syntax, never the original .sass syntax - Why is this your convention?

I am a Catalan native speaker. How do I translate this to Catalan? Do I create my own repository with the translation and then make a pull request to your repository with the link to my translated repository?

when installing stylelint and stylelint-config-airbnb, I get the following npm Error:
npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/stylelint npm ERR! dev stylelint@"*" from the root project npm ERR! peer stylelint@"^8.0.0" from [email protected] npm ERR! node_modules/stylelint-config-airbnb npm ERR! dev stylelint-config-airbnb@"*" from the root project npm ERR! 1 more (stylelint-order) npm ERR! npm ERR! Could not resolve dependency: npm ERR! dev stylelint-config-prettier@"*" from the root project npm ERR! npm ERR! Conflicting peer dependency: [email protected] npm ERR! node_modules/stylelint npm ERR! peer stylelint@">=11.0.0" from [email protected] npm ERR! node_modules/stylelint-config-prettier npm ERR! dev stylelint-config-prettier@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

remove the stylelint-config-airbnb, then no more problem. Of course, if one want to use stylelint-config-airbnb, then this is not a good solution. That is why I am reporting the issue here

Here is exact code

When i run it manually via

cat src/components/song/song.css | /Users/artem/Desktop/MuzicBox/src/front_end/node_modules/.bin/stylelint --formatter json --stdin-filename /Users/artem/Desktop/MuzicBox/src/front_end/src/components/song/song.css

it shows

[{"source":"/Users/artem/Desktop/MuzicBox/src/front_end/src/components/song/song.css","deprecations":[],"invalidOptionWarnings":[],"parseErrors":[],"warnings":[]}]%

But when i use stylelint-config-standard and run manually in the same way as above i get

[{"source":"/Users/artem/Desktop/MuzicBox/src/front_end/src/components/song/song.css","deprecations":[],"invalidOptionWarnings":[],"parseErrors":[],"errored":true,"warnings":[{"line":205,"column":1,"rule":"max-empty-lines","severity":"error","text":"Expected no more than 1 empty line (max-empty-lines)"},{"line":206,"column":1,"rule":"max-empty-lines","severity":"error","text":"Expected no more than 1 empty line (max-empty-lines)"},{"line":6,"column":41,"rule":"number-leading-zero","severity":"error","text":"Expected a leading zero (number-leading-zero)"},{"line":106,"column":29,"rule":"number-leading-zero","severity":"error","text":"Expected a leading zero (number-leading-zero)"},{"line":208,"column":14,"rule":"number-leading-zero","severity":"error","text":"Expected a leading zero (number-leading-zero)"},{"line":219,"column":24,"rule":"number-leading-zero","severity":"error","text":"Expected a leading zero (number-leading-zero)"},{"line":230,"column":3,"rule":"rule-empty-line-before","severity":"error","text":"Unexpected empty line before rule (rule-empty-line-before)"}]}]%

Css

I'd argue you should have @include at the beginning as they tend to be a base that is added to. If they come at the end of the selector the styles will overwrite the ones you've declared on that declaration already.

I have upgraded Stylelint to 14.0.0 and now it breaks when using the 'stylelint-config-airbnb' config

Unknown rule declaration-property-value-blacklist  declaration-property-value-blacklist