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

Steps for creating a square button

Implement a jQuery feature to gradually increase opacity as the user scrolls and the page loads

Creating custom typings in a typings.d.ts file does not address the issue of importing a JavaScript library

Issue with Tailwind and MUI integration causing unanticipated error with white buttons in NextJS Project

Color the text differently if the values are not the same (CSS and jQuery only)

Exploring a new method for AJAX loading when handling large amounts of data into multiple div elements

Display a single unique value in the dropdown menu when there are duplicate options

The method I used to position a triangle at the bottom border of a parent element with relative

The ability to choose only one option in a checkbox within a grid view column

Creating a circular image with a vibrant color light effect that seamlessly runs across all browsers: What you need to know

What is the best way to retrieve multiple image file names using JavaScript?

Struggling to capture the error thrown by the subscribe method in Angular using RxJs

Angular 10 introduces a new approach to handling concurrency called "forkJoin"

line of checkboxes aligned horizontally with the help of Bootstrap

I find it confusing how certain styles are applied, while others are not

Having trouble setting up my Angular Universal server, need assistance please

Creating TypeScript unit tests for nested functions: A step-by-step guide

The navigation area is too small for the social media buttons to fit

How can a JQuery slideshow be programmed to only iterate once?

What could be the reason for the malfunction of jQuery's show() function?