Tips for optimizing CSS when two classes share common styles

I have limited experience with CSS, but I am currently using it for a project.

I encountered a situation where two CSS classes share some common properties:

.KPIDashboardContainerInertiaMatrixCell_data
{
display: table-cell;
font-size: 18px;
padding-top: 30px;
font-weight: bold;
text-align: left;
-webkit-column-width: 120px;
-moz-column-width: 120px;
column-width: 120px;
}

.data_right_column
{
display: table-cell;
font-size: 18px;
padding-top: 30px;
font-weight: bold;
text-align: left;
-webkit-column-width: 80px;
-moz-column-width: 80px;
column-width: 80px;
}

I attempted to simplify it like this:

.KPIDashboardContainerInertiaMatrixCell_data.data_right_column
{
-webkit-column-width: 80px;
-moz-column-width: 80px;
column-width: 80px;    
}

However, when specifying the class names in HTML, I used:

KPIDashboardContainerInertiaMatrixCell_data data_right_column

It is not functioning as expected. Can someone point out my mistake? Is there another approach to achieve the same result?

htmlcss

Answer №1

.CustomDashboardTableData, .data_column_right {
    display: table-cell;
    font-size: 18px;
    padding-top: 30px;
    font-weight: bold;
    text-align: left;
}

.CustomDashboardTableData {
    -webkit-column-width: 120px;
    -moz-column-width: 120px;
    column-width: 120px;
}

.data_column_right {
    -webkit-column-width: 80px;
    -moz-column-width: 80px;
    column-width: 80px;
}

Answer №2

To create a more efficient styling method, consider implementing a base class and then adding additional classes for styles that vary.

For instance, let's take the example of styling buttons:

Start with a base button class that establishes default settings shared among all buttons

.btn {
  padding: 10px 30px;
  display: inline-block;
  box-shadow:2px 2px #444;
  border-radius:50px;
}

Afterward, introduce classes to cater to different styles

.btn-red {
  background: red;
  color: #fff;
}
.btn-green {
  background: green;
  color: #fff;
}

Implement in HTML like so:

<div class="btn">Base btn</div>
<div class="btn btn-green">Green btn</div>
<div class="btn btn-red">Red btn</div>

Following this approach ensures your code remains streamlined and facilitates modifications to shared styles.

Check out a demonstration here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Create a curve using two distinct colors in JavaScript

I am currently experimenting with a canvas and I have a specific challenge in mind. My goal is to draw an arc using two different colors, where the first half of the arc will be green and the second half red. Check out the code snippet below: // CANVAS co ...

javascriptcsscanvas

Include image hover text without using HTML

I am looking to add a hover effect to some images using CSS and JS since I cannot directly edit the HTML file. The goal is to have centered text pop out when hovering over certain images. I know the div class of the image but unfortunately, I cannot add te ...

javascripthtmlcsshover

I would like to learn how to showcase a two-column array using PHP and HTML

In my current setup, I have a collection of icons that are displayed in groups of 4. This means that if there are 7 icons, the 4th icon on the first slide will be repeated as the 8th icon on the second slide. To resolve this issue, I am looking to iterate ...

phphtmlarraysmagento

Struggling to figure out why BXSlider won't cooperate

I'm struggling to make BXSlider work on my website. Here is the code I have used. The JS/CSS files are properly linked and downloaded from the site with correct paths. $(document).ready(function(){ $(document).ready(function(){ $('.bx ...

javascriptjquerycss

A guide on integrating a data deletion feature in Angular applications

On our website's edit page, there is a list of mat cards/workspaces with an edit icon in the top corner of each workspace. Clicking on the edit icon will take you to the edit page for that specific workspace. Within this edit page, there is a delete b ...

htmlcssangularfunctionfilter

Unable to combine two items within the same row in the cell

My current structure looks like this: <td class="sorting_1" tabindex="0"> <div class="form-check" data-user-id="1"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value=""> ...

htmlcssbootstrap-4

Page title missing from browser tab

I don't come from a design background, so the issue I'm experiencing is quite peculiar. Below is a snippet of code from MVC4 - <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-C ...

jqueryhtmlasp.net-mvc-4twitter-bootstrap

Shift the image closer to the top of the sidebar next to the header

I am seeking to adjust the positioning of my circular image in the sidebar so that it aligns with my name in the header. The contact and tech skills sections may also require some tweaking. Although I have a grasp of the concepts of absolute and relative, ...

htmlcss

Ways to adjust the visibility of a div element multiple times using javascript and css

I implemented a popup feature in my application: <div id="modal"></div> let modal = document.getElementById('modal') modal.innerHTML = ` <button class="close-button" onclick="close_modal()" ...

javascripthtmlcssdjango

A picture placed side by side with a list

Could someone please help me figure out what I'm doing incorrectly? <div class="row"> <ul class='list-group .col-md-6'> <li>1</li><li>1</li><li>1</li> </ul> <div> ...

htmlcssbootstrap-4

Is this the correct method for constructing a class in CSS?

What is the correct way to style a class with CSS and write HTML code? .first{ color:red; } Here is an example of HTML code: <class id=first> <p> some text </p> <p> some other text </p> ...

htmlcss

Dynamic content cannot have classes added to them using jQuery

When adding content dynamically, it is necessary to use an event handler for a parent element using on(). However, I am facing an issue where the class added with addClass on dynamically generated content disappears immediately. Let's take a look at ...

javascriptjquerycssajax

What can I do to resolve the issue of my Navigation Bar being blocked by a Javascript map?

My navbar creates a dropdown menu when I hover over it, but the map generated with the script tag blocks it. Here is the current setup: // JavaScript Document //This will make the navigation bar responsive. function myFunction() { var x = document.ge ...

javascripthtmlcss

When I view my PHP file with embedded HTML elements in Laravel on the XAMPP Apache server, the display is not rendering correctly

I've been attempting to translate my HTML project into a PHP format while delving into the world of Laravel. However, after integrating codes from my old HTML files into my new PHP files in Laravel and running them on the XAMPP Apache server, I am onl ...

phphtmlcsslaravelxampp

Experience the innovative feature of React Splide Carousel where a peek of the next image is shown until you reach

My current challenge arises when I reach the last slide in the slider. I am trying to prevent it from looping and instead stop with no extra space or any other images peeking out. To address this, I have utilized the padding: '5%' option, which ...

javascriptcssreactjssplidejs

Is the parameter retrieval method correct or erroneous?

I am looking to retrieve data by clicking a link. Here are the links available: <a class="note" id="' . $data["p_id"] . '" value="1" href="javascript:void(0)">+1</a> <a class="note" id="' . $data["p_id"] . '" value="-1" ...

javascriptjqueryhtmlajax

What could be causing the issues with the compatibility of <input type="text" and flex properties?

I'm having an issue where the search box expands in size when I apply display:flex in my CSS. Can someone explain why this happens and offer a solution to return the search box to its normal height? Additionally, I would like the search bar and the se ...

htmlcssflexbox

Customizing jQuery-UI's Select-Menu Widget with CSS

I am facing some challenges with setting CSS properties for jQuery-UI widgets, especially the SelectMenu. Basic styling like margins does not seem to work, and I am struggling to assign different CSS styles to two separate SelectMenu widgets. Here is a sim ...

htmlcssjquery-ui

The image's max-width property is not functioning as expected within a flexbox layout in Internet Explorer 11, yet it displays

I'm currently working on a 2 by 2 grid layout using flexbox, where the items in the first column are combined together. Check out the setup below: https://i.sstatic.net/fAhtu.png Everything looks great in Google Chrome but unfortunately, I've r ...

htmlcssflexboxinternet-explorer-11

How can I use jQuery to implement a progress bar for Iframes loading?

My job involves working on an intranet where I have a complex aspx page with multiple Iframes, all of which we control. Each iframe is dynamically set using JavaScript/jQuery by different buttons on the page. Some buttons set the src attribute for iframes ...

javascriptjqueryhtmliframeprogress-bar