|
|
|
# Shadow Dom Emulation
|
|
|
|
### Allows for scope isolation of css classes. There are other benifits but in this case if two components that are on the page at the same time both have a class called container but are defined differently there wont be a collision. THIS DOES NOT MEAN DONT BEM YOU STYLES.
|
|
|
|
```javascript
|
|
|
|
import { Component, OnInit, OnDestroy, ViewContainerRef, ViewEncapsulation } from '@angular/core';
|
|
|
|
import { MdDialog, MdDialogRef, MdDialogConfig } from '@angular/material';
|
|
|
|
import { Observable } from 'rxjs/Observable';
|
|
|
|
|
|
|
|
import { AuthService, ToastService, ConfirmComponent, Data } from '../shared';
|
|
|
|
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'app-home',
|
|
|
|
templateUrl: './home.component.html',
|
|
|
|
styleUrls: ['./home.component.scss'],
|
|
|
|
encapsulation: ViewEncapsulation.Emulated
|
|
|
|
})
|
|
|
|
```
|
|
|
|
|
|
|
|
## Izeni sass, y'all
|
|
|
|
Unfortunately, there is currently no support for sourceMaps or style injection, which will eventually greatly benefit our UI development process when they become available.
|
|
|
|
|
|
|
|
#### [here are our Izeni HTML/CSS conventions](https://dev.izeni.net/nbills/izeni-css-conventions), which should be adopted by all, in addition to best practices found in [style guides](toolbox)
|
|
|
|
|
|
|
|
### defaults, typography, globals
|
|
|
|
* These files are imported **ONCE**, on a global level, via angular-cli.json
|
|
|
|
|
|
|
|
### breakpoints, functions, mixins, variables
|
|
|
|
* These files are imported into globals.scss or component scss files as needed.
|
|
|
|
* For this reason, no actual rules (i.e. `.selector {}`) should be added to these four files, or those rules would be unnecessarily repeated anywhere they are imported.
|
|
|
|
|
|
|
|
### component styles
|
|
|
|
* If a style is used cross-component (i.e. buttons, headings, etc), it should probably be defined in globabls.scss.
|
|
|
|
* Otherwise, the style is only applicable to a specific component and those styles should go in the component's scss file, e.g. `home.component.scss`.
|
|
|
|
* [Angular 2 component styles](https://angular.io/docs/ts/latest/guide/component-styles.html)
|
|
|
|
- we'll stick to default ViewEncapsulation (see link above) for now
|
|
|
|
- tl:dr; Angular takes the css generated by sass-loader after parsing the scss file, adds it's own attribute string to each rule (unique to each component), and then makes sure that anything that matches those rules' selectors gets that same attribute, thus namespacing css for us (somewhat emulating this aspect of the impending DOM encapsulation technologies)
|
|
|
|
- even though this is neat, we should still use BEM for a variety of reasons, including: scss file maintainability, html readability, etc. |
|
|
|
\ No newline at end of file |
