-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #124 from Lapkipomoshi/test
May 2023
- Loading branch information
Showing
257 changed files
with
3,093 additions
and
2,009 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,55 +1,52 @@ | ||
{ | ||
"env": { | ||
"browser": true, | ||
"es2021": true | ||
}, | ||
"extends": [ | ||
"plugin:react/recommended", | ||
"airbnb" | ||
"env": { | ||
"browser": true, | ||
"es2021": true | ||
}, | ||
"extends": ["plugin:react/recommended", "airbnb", "prettier"], | ||
"overrides": [], | ||
"parserOptions": { | ||
"ecmaVersion": "latest", | ||
"sourceType": "module" | ||
}, | ||
"plugins": ["react", "import"], | ||
"rules": { | ||
"prefer-destructuring": [ | ||
"error", | ||
{ | ||
"array": true, | ||
"object": true | ||
}, | ||
{ | ||
"enforceForRenamedProperties": false | ||
} | ||
], | ||
"overrides": [ | ||
], | ||
"parserOptions": { | ||
"ecmaVersion": "latest", | ||
"sourceType": "module" | ||
}, | ||
"plugins": [ | ||
"react", | ||
"import" | ||
], | ||
"rules": { | ||
"prefer-destructuring": ["error", { | ||
"array": true, | ||
"object": true | ||
}, { | ||
"enforceForRenamedProperties": false | ||
}], | ||
"quotes": ["error", "single", { "avoidEscape": true }], | ||
"jsx-quotes": ["error", "prefer-single"], | ||
"semi": ["error", "always"], | ||
"indent": ["error", 2], | ||
"space-before-blocks": "error", | ||
"prefer-arrow-callback": [ "error", { "allowNamedFunctions": true } ], | ||
"arrow-parens": ["error", "always"], | ||
"no-duplicate-imports": ["error", { "includeExports": true }], | ||
"no-param-reassign": 0, | ||
"no-underscore-dangle": ["error", { "allow": ["_id", "_baseUrl", "_headers", "_processTheResponse"]}], | ||
"react/prop-types": 0, | ||
"max-len": ["error", { "code": 160 }], | ||
"no-debugger":"warn", | ||
"object-curly-spacing": ["error", "always"], | ||
"arrow-body-style": ["error", "always"], | ||
"react/function-component-definition": [2, { "namedComponents": ["arrow-function", "function-declaration"] }], | ||
"jsx-a11y/label-has-associated-control": "off", | ||
"react/jsx-props-no-multi-spaces": "off", | ||
"jsx-a11y/control-has-associated-label": "off", | ||
"linebreak-style": "off", | ||
"jsx-a11y/anchor-is-valid": "off", | ||
"import/no-extraneous-dependencies": "off", | ||
"react/jsx-props-no-spreading": "off", | ||
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], | ||
"class-methods-use-this": "warn", | ||
"prefer-promise-reject-errors": "warn", | ||
"react/jsx-one-expression-per-line": "off" | ||
} | ||
"quotes": ["error", "single", { "avoidEscape": true }], | ||
"jsx-quotes": ["error", "prefer-single"], | ||
"semi": ["error", "always"], | ||
"indent": ["error", 2, { "SwitchCase": 1 }], | ||
"space-before-blocks": "error", | ||
"prefer-arrow-callback": ["error", { "allowNamedFunctions": true }], | ||
"arrow-parens": ["error", "always"], | ||
"no-duplicate-imports": ["error", { "includeExports": true }], | ||
"no-param-reassign": 0, | ||
"no-underscore-dangle": ["error", { "allow": ["_id", "_baseUrl", "_headers", "_processTheResponse"] }], | ||
"react/prop-types": 0, | ||
"max-len": ["error", { "code": 160 }], | ||
"no-debugger": "warn", | ||
"object-curly-spacing": ["error", "always"], | ||
"arrow-body-style": ["error", "always"], | ||
"react/function-component-definition": [2, { "namedComponents": ["arrow-function", "function-declaration"] }], | ||
"jsx-a11y/label-has-associated-control": "off", | ||
"react/jsx-props-no-multi-spaces": "off", | ||
"jsx-a11y/control-has-associated-label": "off", | ||
"linebreak-style": "off", | ||
"jsx-a11y/anchor-is-valid": "off", | ||
"import/no-extraneous-dependencies": "off", | ||
"react/jsx-props-no-spreading": "off", | ||
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }], | ||
"class-methods-use-this": "warn", | ||
"prefer-promise-reject-errors": "warn", | ||
"react/jsx-one-expression-per-line": "off" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -6,6 +6,7 @@ | |
.pnp.js | ||
|
||
.idea | ||
.env | ||
|
||
# testing | ||
/coverage | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
{ | ||
"printWidth": 160, | ||
"tabWidth": 2, | ||
"useTabs": false, | ||
"semi": true, | ||
"singleQuote": true, | ||
"quoteProps": "as-needed", | ||
"jsxSingleQuote": true, | ||
"trailingComma": "es5", | ||
"bracketSpacing": true, | ||
"arrowParens": "always" | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,156 @@ | ||
# Договорённости по написанию CSS-стилей | ||
|
||
1. Использование БЭМ-методологии при именовании стилей. | ||
|
||
2. Импортировать стили в файл Component.jsx из файла Component.scss. | ||
``` | ||
Component | ||
Component.jsx | ||
Component.scss | ||
``` | ||
|
||
3. Если в Component больше одного блока со стилями и файл становится неудобным для работы, то импортировать стили для блоков из разных файлов папки styles внутри Components. | ||
``` | ||
Component | ||
styles | ||
firts-block.scss | ||
second-block.scss | ||
... | ||
Component.jsx | ||
Component.scss | ||
``` | ||
|
||
4. Если стилей в блоке много, то делить блок по элементам БЭМ-методологии, при этом если блок в компоненте всего 1, то в папке styles хранить сразу папки элементов. Импорт всех стилей всегда производится в файле Component.scss. | ||
``` | ||
А. Один объёмный блок в компоненте | ||
Component | ||
styles | ||
__first-element | ||
component-block__first-element.scss | ||
__second-element | ||
component-block__first-element.scss | ||
... | ||
component-block.scss | ||
Component.jsx | ||
Component.scss | ||
Б. Больше одного блока и большое количество стилей суммарно | ||
Component | ||
styles | ||
first-block | ||
__first-element | ||
first-block__first-element.scss | ||
__second-element | ||
first-block__first-element.scss | ||
... | ||
first-block.scss | ||
small-second-block | ||
small-second-block.scss // количество стилей в блоке позволяет удобно читать их в 1 файле | ||
... | ||
Component.jsx | ||
Component.scss | ||
``` | ||
|
||
5. Сначала писать селекторы для блока, потом для его элементов, дальше для второго блока, его элементов и так далее. Оставлять между селекторами пустую строку, каждый стиль с новой строки. Избегать комбинированных селекторов, но если они необходимы, то распологать рядом с использованными элементами или как вложенные селекторы. | ||
|
||
6. Псевдоклассы и модификаторы писать во вложенных стилях, отделив пустой строкой от стилей селектора, по следующему порядку: псевдоклассы селектора, модификаторы селектора без ключа (псевдоклассы этих модификаторов располагать внутри селектора по тем же правилам), ключи (во вложенных селекторах его значения и их псевдоклассы), комбинированные селекторы. Оставлять пустую строку между псевдоклассами и модификаторами, между модификаторами и ключами, между разными ключами и между ключами и комбинированными селекторами. | ||
``` | ||
.component-block__element { | ||
display: flex; | ||
... | ||
box-sizing: border-box; | ||
&:hover { | ||
transform: scale(1.1); | ||
... | ||
} | ||
&::after { | ||
content: attr(href); | ||
... | ||
&:hover { | ||
... | ||
} | ||
} | ||
&_modified { | ||
background-color: var(--color-accent-base); | ||
... | ||
&:hover { | ||
background-color: var(--color-accent-hover); | ||
} | ||
} | ||
&_differently-modified { | ||
... | ||
} | ||
&_first-key { | ||
&_first-value { | ||
... | ||
} | ||
&_second-value { | ||
... | ||
} | ||
... | ||
} | ||
&_second-key { | ||
... | ||
} | ||
} | ||
``` | ||
|
||
7. Если используются комбинированные селекторы и первый селектор содержит достаточно стилей или вложенных селекторов, чтобы они негативно влияли на читаемость, то комбинированные селекторы прописывать отдельно рядом с элементом. | ||
|
||
8. Все цвета и семейства шрифтов задавать через переменные. Избегать использования !important. | ||
|
||
9. Переменные хранить в src/utils/vars.css. Именовать CSS-переменные в виде --${свойство}-${для_чего}-${модификатор}, используя только строчные буквы. Не указывать в модификаторах значения. Между переменными для разных свойств оставлять пустую строку. | ||
``` | ||
// файл src/utils/vars.css | ||
:root { | ||
--color-background-base: #fef4e8; | ||
--color-background-additional: #fff; | ||
... | ||
--font-family-title: 'Montserrat Alternates', 'Inter', Arial, sans-serif; | ||
--font-family-base: 'Inter', Arial, sans-serif; | ||
... | ||
} | ||
``` | ||
|
||
10. Если нужны сецифические переменные для отдельного компонента и добавление их в src/utils/vars.css приведёт к противоречию, то хранить эти переменные в папке Component и подключать в Component.scss только для конкретного блока компонента или нескольких блоков в виде перечисления селекторов. | ||
``` | ||
А. Компактный компонент без папки styles | ||
Component | ||
Component.jsx | ||
Component.scss | ||
vars.css | ||
Б. Есть папка styles в компоненте. Тогда создавать отдельную папку component-block в styles, даже если всего один блок | ||
Component | ||
styles | ||
... | ||
vars.css | ||
Component.jsx | ||
// файл Component/styles/vars.css, если всего один блок | ||
.component-block { | ||
--color-background-base: #4bab65; | ||
... | ||
} | ||
// файл Component/styles/vars.css, если больше одного блока | ||
.first-block, | ||
.second-block { | ||
--color-background-base: #4bab65; | ||
... | ||
} | ||
``` |
Oops, something went wrong.