AndreyAttr / Evo

Evo repo
MIT License
0 stars 1 forks source link

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

Open AndreyAttr opened 7 years ago

AndreyAttr commented 7 years ago

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:

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')), .....],`**