-1

This is a general question regarding project structure in Angular and tools/software for user interface design. I'm not really looking for code examples.

I have been thrust into an Angular project by my employer and am now supposed to implement our CI and change the look of the user interface to fit with our other (not web-based) software. I have some coding experience, but mainly I'm a designer, so I might just be missing some big and obvious things here, please bear with me.

Looking at the docs for Angular, I'm getting the feeling that design is supposed to be applied on a component by component base, ideally writing one CSS file each. Which in my view has the potential to lead to a lot of doubling up of CSS code. Is it really supposed to be that way?

Wouldn't it be more sensible to pull all the css together into a central file so changes can be applied globally? (I am not talking about themes here, as Angular themes seem to be only about colours. I am talking about things like the overall look, fonts, placement, etc.)

If not, are there tools (aside from a browser's developer view) which make it possible to get a good overview of all the CSS in the project? And would the use of variables for recuring code blocks be frowned upon?

I know CSS preprocessors exist and some have implementations in Angular. But since have only used them indirectly (while themeing for a CMS) I thought I'd just ask if there's anything out there that's specific to Angular before I go dive into those.

Thanks in advance for any answers!

Improve this question
2

2 Answers 2

Reset to default
0

You may put all your styles/classes at single file but it vary project wise.

Suppose, You have two component. One is home component and another is grid component. In both the component, there is a popup component. So you can put the popup styles/classes in a common css file. But for grid component, you need to put the grid styles in the grid.component.css. Its just a good practice but you can also put the grid style in the common css file and it will work properly.

There is no hard and fast rule for that. Just do what is good for your project maintenance or development.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Angular is component based framework and it encourages you to have a component as a self contained unit (including styles). More of it, it is good to have component related styles encapsulated, so it will protect implicit inheritance and you will not run into issue when small change in parent component breaks view of its child. For big projects it is very important. Code duplication should not be a big issue if you follow best practices (eg spitting up into smaller reusable components) or preprocessors like less or sass. They can provide different mixins and functions which allows you to reuse a lot of css blocks. For small projects it is really doesn't matter what kind of styling strategy are you following but if it is a project with > 50 components I would adhere Angular recommended strategy.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.