What is the best approach for promoting reusability in Angular: creating a new CSS class or a new component?

Question

What is the best approach for promoting reusability in Angular: creating a new CSS class or a new component?

I have a div with a set of CSS properties that are essential to my application. These properties will be reused across multiple pages and components.

<div style="display: flex; flex-direction: column; height: 100%">
//inner html will vary based on context
</div>

Considering this simple html structure and the lack of data/event binding, what is the best practice in this scenario:

Create a new CSS class,
Create a new angular component with
```
<ng-content></ng-content>
```
inside,
Suggest another approach?

html css angular angular8

Answer 1

Answer №1

After careful consideration, I have come to the conclusion that the most effective approach is to create a CSS class, like this:

div.flex-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

Here are the reasons for my decision:

K.I.S.S.
Avoiding additional HTML nesting helps maintain the flexibility and ease of use of technologies like flexbox

In my opinion, angular components should only be developed if they meet one of the following criteria:

The template consists of multiple HTML elements (in this case, there is only one)
They require custom logic in TypeScript or Angular template syntax, such as ngIf

Answer 2

After careful consideration, I have come to the conclusion that the most effective approach is to create a CSS class, like this:

div.flex-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

Here are the reasons for my decision:

K.I.S.S.
Avoiding additional HTML nesting helps maintain the flexibility and ease of use of technologies like flexbox

In my opinion, angular components should only be developed if they meet one of the following criteria:

The template consists of multiple HTML elements (in this case, there is only one)
They require custom logic in TypeScript or Angular template syntax, such as ngIf

Answer 3

Answer №2

It seems like in your situation, a combination of both methods will be necessary.

<div class="myBaseStyle">
    <ng-content></ng-content>
</div>

Your CSS for this would be:

.myBaseStyle {
   display: flex;
   flex-direction: column;
   height: 100%
}

Creating a component for reusability is essential when you need to use the same div in multiple places. This way, if any changes are required in the future, you only have to update it in one location rather than all over the codebase. Imagine having to refactor everything if more HTML needs to be added to that div later on.

Answer 4

It seems like in your situation, a combination of both methods will be necessary.

<div class="myBaseStyle">
    <ng-content></ng-content>
</div>

Your CSS for this would be:

.myBaseStyle {
   display: flex;
   flex-direction: column;
   height: 100%
}

Creating a component for reusability is essential when you need to use the same div in multiple places. This way, if any changes are required in the future, you only have to update it in one location rather than all over the codebase. Imagine having to refactor everything if more HTML needs to be added to that div later on.

Answer 5

Answer №3

To create a global style in your Angular app's style.css file located under the src folder, follow these steps:

<div class="flex-container">
  <ng-content></ng-content>
</div

.flex-container {
   display: flex;
   flex-direction: column;
   height: 100%;

   &.child-element { //You can also apply styles to child elements like this
     ...
   }
}

This method allows you to easily apply styles by simply copying and pasting your HTML code, with the styles automatically being applied from the style.css file.

If you need to customize the styles for a specific component, you can use the @extend directive to inherit styles from the style.css file into the component-specific x.component.css file. This way, you can retain the previous styles and make additional modifications as needed.

Here is an example of how to use @extend to inherit styles:

@extend .flex-container;
  display: block;

Answer 6

To create a global style in your Angular app's style.css file located under the src folder, follow these steps:

<div class="flex-container">
  <ng-content></ng-content>
</div

.flex-container {
   display: flex;
   flex-direction: column;
   height: 100%;

   &.child-element { //You can also apply styles to child elements like this
     ...
   }
}

This method allows you to easily apply styles by simply copying and pasting your HTML code, with the styles automatically being applied from the style.css file.

If you need to customize the styles for a specific component, you can use the @extend directive to inherit styles from the style.css file into the component-specific x.component.css file. This way, you can retain the previous styles and make additional modifications as needed.

Here is an example of how to use @extend to inherit styles:

@extend .flex-container;
  display: block;

What is the best approach for promoting reusability in Angular: creating a new CSS class or a new component?

Answer №1

Answer №2

Answer №3

Similar questions

Simulated FileList for Angular 5 App Unit Testing

It is impossible for 4 div elements to align in a horizontal position

Tips for querying multiple elements that share a common ID and verifying if the input has been modified

Determine the presence of a value within a specific column of an HTML table using jquery

Unable to alter the vertex color in three.js PointCloud

Utilizing inter-process communication in Electron to establish a global variable from the renderer process

Design of web pages, Cascading Style Sheets

JavaScript Empty Input Field when Duplicating Node

When combining Angular4, Protractor, Cucumber, TypeScript, and webpack-dev-server, Angular seems to have gone missing

The menu in IE7 seems to have a mind of its own, appearing and

Rendering HTML with Apache Tiles using an empty <a></a> tag

Creating a mandatory and meaningful text input in Angular 2 is essential for a

A Guide to Implementing Inner CSS in Angular

Struggling to implement mock JSON data, unable to dynamically update on HTML page

Ag-grid allows for the creation of multiple individual detail grids that are connected to a single

Error thrown by broadcaster in Angular 7 test scenario

Jssor's dynamic slider brings a touch of sophistication to preview upcoming images

What could be causing the favicon in my Next.js application to not function properly?

Include an additional icon without replacing the existing one on the mouse cursor

Opening the Instagram app in Instagram's built-in browser