You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Back in the good old days, when I started my career, styling was easy. You put framework on, modify a bit, all done. For short term projects, not a problem.
When I switched to building product / service, this approach led to large amount of technical debits in many cases
After spending a little more than a decade, and had worked with vast variety products and projects, personally, I think atomic design be a prefect fit for scalable / long-term development.
To avoid wast your time, I would to address that atomic design implementation could be a overkill for known short term projects (less than 6 months), as I mentioned before frameworks like bootstrap and foundation would do just fine
Implementation
Great, you are still reading.
In short, the implementation is a sorting process: Sorting components based on its atomic category.
Scalable styling with flat structure and bem/smacss
Scalable styling with flat structure and BEM/SMACSS
Scalability of the code has become a major requirement for web development recently. In css development, scalability could be achieve with flat structure and BEM/SMACSS on top of Atom design and Style composition.
The concept of flat structure and BEM/SMACCS maybe alien to developers are working with inheritance styling code. but with overwhelming benefit, this scalable solution has be adopted by some advanced developers.
Flat structure
Here is a quick explanation why flat structure is a better solution for managing scalable development. To implement flat structure, component styling shall be equally treaded by two factors:
Selector: by class and class only
Level of selector: only base level selector, which means some css selecting rules like nesting and sibling shall be avoid.
Write more readable code in angular 1 with state, controllerAs, and presentational and container structure
Write more readable code in angular 1
For the last few years, I have been working with Angular frame work for different products. Here are some solutions that benefit me in my maintaining progress Angular 1 code.
Use controllerAs instead of $scope for directives
By default, all the functions in directive are hooking with $scope. As long as the functions are inside the directive scope in HTML, the app would be functional.
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
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
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