Skip to content

docs: codig standard docs updated #27271

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 10, 2023
Merged

docs: codig standard docs updated #27271

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions CODING_STANDARDS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ specific error being caught and why it cannot be prevented.

##### General
* Prefer writing out words instead of using abbreviations.
* Prefer *exact* names over short names (within reason). E.g., `labelPosition` is better than
* Prefer *exact* names to short names (within reason). E.g., `labelPosition` is better than
`align` because the former much more exactly communicates what the property means.
* Except for `@Input` properties, use `is` and `has` prefixes for boolean properties / methods.

Expand Down Expand Up @@ -275,7 +275,7 @@ The above code allows users to set `disabled` similar to how it can be set on na
#### Expose native inputs
Native inputs used in components should be exposed to developers through `ng-content`. This allows
developers to interact directly with the input and allows us to avoid providing custom
implementations for all of the input's native behaviors.
implementations for all the input's native behaviors.

For example:

Expand Down Expand Up @@ -320,12 +320,12 @@ pre-rendering).

#### Be cautious with use of `display: flex`
* The [baseline calculation for flex elements](https://www.w3.org/TR/css-flexbox-1/#flex-baselines)
is different than other display values, making it difficult to align flex elements with standard
is different from other display values, making it difficult to align flex elements with standard
elements like input and button.
* Component outermost elements are never flex (block or inline-block)
* Don't use `display: flex` on elements that will contain projected content.

#### Use lowest specificity possible
#### Use the lowest specificity possible
Always prioritize lower specificity over other factors. Most style definitions should consist of a
single element or css selector plus necessary state modifiers. **Avoid SCSS nesting for the sake of
code organization.** This will allow users to much more easily override styles.
Expand Down Expand Up @@ -413,7 +413,7 @@ When it is not super obvious, include a brief description of what a class repres

#### Prefer CSS classes to tag names and attributes for styling
Targeting tag names can cause conflicts with the MDC version of the component. For this reason, use
CSS class names defined by us instead of tag names. We also prefer classes over attributes for
CSS class names defined by us instead of tag names. We also prefer classes to attributes for
consistency.
```scss
/** Do: */
Expand Down