CSS refactoring. Need to put all the common CSS to root component, as fonts, markup, validation classes etc. It allows to use common approach into nested components. And leave specific component bound files only there where it really needed #73
For example, gene-mutation.component:styles: [String(require('../Css/markup.less')), String(require('../Css/validation.less'))],
Do we really use different markup & validation in other files? NO.
Also please pay attention on following:
when in component.LESS file you use @import "validation" statement. It means the content on that validation.lessAND THEN you use some CSS class from that validation to extend your CSS class:
validation.less
.ng-invalid:not(form) {
border-left: 5px solid #a94442; /* red */
}
component.less
@import "validation";
input.ng-touched.ng-invalid, textarea.ng-touched.ng-invalid {
.ng-invalid:not(form){};
border:solid red 2px;
}
validation file would be copied to your's component.LESS file(even if you don't extend your CSS class with classes from there, it's enough just to add **`@import "validation";`** statement). And the CSS class **.ng-invalid:not(form)** would be applied **twice**. It may also happens the parent component of your component will apply validation also - **tree times** and so on:
![error](https://user-images.githubusercontent.com/8319203/28975785-0c4e1c42-7944-11e7-925d-f553848fb73c.png)
## solution for BOTH:
It's moving all the common desing LESS/CSS files to root component of whole tree of the components. It allows to:
1. use common validation CSS classes everywhere;
2. if you really need to extend your CSS class with some ot that classes in your component.less file - you may add that extended CSS class to that common.less file. If you really need it in your component.LESS file - then OK, we may close eyes on that dublication, but only in that case;
3. reduce amount of component.less files - because we reuse the same CSS classes. And some of component.less files may be removed. It just enough to declare all common CSS in root component:
**`styles: [String(require('../Css/markup.less')), String(require('../Css/validation.less')), .....],`**
For example, gene-mutation.component:
styles: [String(require('../Css/markup.less')), String(require('../Css/validation.less'))],
Do we really use different markup & validation in other files? NO.Also please pay attention on following:
@import "validation"
statement. It means the content on that validation.less AND THEN you use some CSS class from that validation to extend your CSS class: validation.lesscomponent.less
input.ng-touched.ng-invalid, textarea.ng-touched.ng-invalid { .ng-invalid:not(form){}; border:solid red 2px; }