airbnb / css Goto Github PK
View Code? Open in Web Editor NEWA mostly reasonable approach to CSS and Sass.
License: MIT License
A mostly reasonable approach to CSS and Sass.
License: MIT License
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.)
In README.me
, single quotes are used, while in .scss-lint.yml
, double quotes are set.
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.
Can anyone help explain me why we should use border: 0;
instead of border: none;
?
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
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:
I would like to ask you a few questions:
#CSSStyleGuide #CSSMatters #CSSStyleGuideMatters
Best regards,
Vitalii
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?
this:
.column {
&:before {
}
border: 1px solid $special-text-color-blue;
}
or this:
.column {
border: 1px solid $special-text-color-blue;
&:before {
}
}
According to W3 docs, we can, at least, use 17 basic css color keywords. Are there any pros or cons using these keywords?
This is a best pratice too?
.Block {
&--modifier {
}
&__element {
}
}
output:
.Block {}
.Block--modifier {}
.Block__element {}
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?
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
Add fully and correct translate airbnb/css on Russian language
PR: #67
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)"}]}]%
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?
Full screen navigation
Djdj
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
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.)
omk
bank
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.
hello, I came from here
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)
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
Hi
thanks for open-sourcing this guide.
question about this - Use the .scss syntax, never the original .sass syntax
- Why is this your convention?
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.
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? :)
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?
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.
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
Css
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?)
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.
This is my web
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.