Is it possible to create HTML code that remains unaffected by alterations in CSS class names?

Question

Is it possible to create HTML code that remains unaffected by alterations in CSS class names?

Having been using Twitter Bootstrap 3 for some time, the arrival of Twitter Bootstrap 4 has caught my attention. The new Twitter Booststrap comes with various changes, such as the renaming of .table-condensed to .table-sm, for instance. In anticipation of a potential transition from the current to future version, is there a way to ensure that HTML code remains unaffected by any changes in CSS class names? For instance, if I have a .table-condensed class, is it possible to create my own table-small class that is derived from the existing Twitter Bootstrap's table-condensed class? Perhaps something along the lines of (pseudo-code):

.table-small {
    join(".table-condensed")
}

Up until now, I have solely utilized pure CSS as a Front-End Developer, rather than being a full-stack developer. Therefore, if anyone could enlighten me on whether this is achievable in any way, possibly utilizing preprocessors or similar techniques, I would be extremely thankful - thank you in advance!

html css twitter-bootstrap-3 twitter-bootstrap-4 bootstrap-4

Answer 1

Answer №1

In the world of SASS, the @extend function comes in handy for styling.

Although utilizing this function is common practice, it's worth noting that it can result in duplicate styles within your CSS file, effectively increasing its size.

To tackle this issue, you have a couple of options: either stick with your current version of Bootstrap (BS-4) unless absolutely necessary, or make sure to update your HTML code accordingly.

Update:

After diving into the SASS documentation, it appears that the use of commas has been introduced as a more efficient way to achieve the same outcome. This update could be a more effective approach moving forward.

While this method still generates additional CSS due to the duplication of classes, it's a step up from replicating all your styles.

Answer 2

In the world of SASS, the @extend function comes in handy for styling.

Although utilizing this function is common practice, it's worth noting that it can result in duplicate styles within your CSS file, effectively increasing its size.

To tackle this issue, you have a couple of options: either stick with your current version of Bootstrap (BS-4) unless absolutely necessary, or make sure to update your HTML code accordingly.

Update:

After diving into the SASS documentation, it appears that the use of commas has been introduced as a more efficient way to achieve the same outcome. This update could be a more effective approach moving forward.

While this method still generates additional CSS due to the duplication of classes, it's a step up from replicating all your styles.

Answer 3

Answer №2

To achieve the same result with fewer lines of code, you can utilize less css by following these steps:

.table-small {
    &:extend(.table-condensed);
}

Unlike sass, this method simply adds the selector without duplicating the class:

Resulting css:

.table-condensed,
.table-small {
    background: red;
}

Try out this preprocessor tool online:

Answer 4

To achieve the same result with fewer lines of code, you can utilize less css by following these steps:

.table-small {
    &:extend(.table-condensed);
}

Unlike sass, this method simply adds the selector without duplicating the class:

Resulting css:

.table-condensed,
.table-small {
    background: red;
}

Try out this preprocessor tool online:

Is it possible to create HTML code that remains unaffected by alterations in CSS class names?

Answer №1

Answer №2

Similar questions

Having trouble concealing images in HTML Emails on Outlook 2013

Having trouble identifying the specific CSS property that is being used or inherited

What is the best way to address the excess white space between an image and progress bar on larger screens while utilizing the Bootstrap Grid system?

Changing the background color dynamically of a table header in Angular Material

Custom HTML structure for WordPress navigation menu - WP Nav Menu

What is the correct way to reset the styling of a web browser element, such as a <button>?

"Internet Explorer text input detecting a keyboard event triggered by the user typing in a

Looking for assistance with fundamental HTML concepts

Embrace the power of React using curly brackets!

Embedding a table row within an anchor element in Angular 4

What strategies can flex-shrink use to triumph over padding in the battle for space

Trim the edge of a dynamic picture

The keyboard automatically disappeared upon clicking the select2 input

Is there a bug in IE9 with CSS precedence?

Tips for accessing the content within a DIV tag in a new browser tab

Tips for implementing validation in a multi-step form as outlined in w3schools tutorial

What sets apart the <script> tag with a type attribute from the standard <script> tag in HTML?

What is the reason behind the addition of '.txt' by the Next.js `Link` Component when redirecting to `href='/'` on GitHub pages?

Using the jQuery POST method to execute a redirect upon successful completion

Multiple jQuery AJAX requests triggered in a click event handler