What techniques can I use to maximize efficiency in my code by consolidating common styles across multiple cards?

I have included my css and html code below. I am trying to apply certain styles to all the cards, while changing only the color of the top border individually for each card. I am struggling to find a way to select multiple classes at the same time. My current code feels messy to me and I'm looking for ways to improve it.

.card-supervisor {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(180, 62%, 55%);
}

.card-team-builder {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(0, 78%, 62%);
}

.card-karma {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(34, 97%, 64%);
}

.card-calculator {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(212, 86%, 64%);
}
<section class="cards">
        <div class="card-supervisor">
          <h1 class="card-title">Supervisor</h1>
          <p class="card-paragraph">Monitors activity to identify project roadblocks</p>
          <div class="card-image">
            <img src="images/icon-supervisor.svg">
          </div>
        </div>
    
        <div class="card-team-builder">
          <h1 class="card-title">Team Builder</h1>
          <p class="card-paragraph">Scans our talent network to create the optimal team for your project</p>
          <div class="card-image">
            <img src="images/icon-team-builder.svg">
          </div>
        </div>
        
        <div class="card-karma">
          <h1 class="card-title">Karma</h1>
          <p class="card-paragraph">Regularly evaluates our talent to ensure quality</p>
          <div class="card-image">
            <img src="images/icon-karma.svg">
          </div>
        </div>
    
        <div class="card-calculator">
          <h1 class="card-title">Calculator</h1>
          <p class="card-paragraph">Uses data from past projects to provide better delivery estimates</p>
          <div class="card-image">
            <img src="images/icon-calculator.svg">
          </div>
        </div>
      </section>

htmlcss

Answer №1

To apply a consistent style to all cards, you can utilize the card class and define shared properties like this: 

.card{
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(180, 62%, 55%);
}
.card-supervisor {
    border-color:hsl(180, 62%, 55%);
}

.card-team-builder {
    border-color: hsl(0, 78%, 62%);
}

.card-karma {
   border-color: hsl(34, 97%, 64%);
}

.card-calculator {
   border-color:hsl(212, 86%, 64%);
}
<section class="cards">
        <div class="card card-supervisor">
          <h1 class="card-title">Supervisor</h1>
          <p class="card-paragraph">Monitors activity to identify project roadblocks</p>
          <div class="card-image">
            <img src="images/icon-supervisor.svg">
          </div>
        </div>
    
        <div class="card card-team-builder">
          <h1 class="card-title">Team Builder</h1>
          <p class="card-paragraph">Scans our talent network to create the optimal team for your project</p>
          <div class="card-image">
            <img src="images/icon-team-builder.svg">
          </div>
        </div>
        
        <div class="card card-karma">
          <h1 class="card-title">Karma</h1>
          <p class="card-paragraph">Regularly evaluates our talent to ensure quality</p>
          <div class="card-image">
            <img src="images/icon-karma.svg">
          </div>
        </div>
    
        <div class="card card-calculator">
          <h1 class="card-title">Calculator</h1>
          <p class="card-paragraph">Uses data from past projects to provide better delivery estimates</p>
          <div class="card-image">
            <img src="images/icon-calculator.svg">
          </div>
        </div>
      </section>

Answer №2

To easily style multiple elements with common properties, group them together in a selector using commas, then specify individual rules for color

.card-supervisor, .card-team-builder, .card-karma, .card-calculator {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
    border-top: .5rem solid hsl(180, 62%, 55%);
}

.card-supervisor {
  background: blue;
}
.card-team-builder {
  background: red;
}
.card-karma {
  background: yellow;
}
.card-calculator {
  background: green;
}

Answer №3

Choose multiple classes by separating them with commas

.card-supervisor,
.card-team-builder,
.card-karma,
.card-calculator {
  border-radius: 0.5rem;
  padding: 2.5rem 3rem;
  margin-bottom: 3rem;
  box-shadow: 0 1rem 2rem 0.5rem #dedede;
}
.card-supervisor {
  border-top: 0.5rem solid hsl(180, 62%, 55%);
}

.card-team-builder {
  border-top: 0.5rem solid hsl(0, 78%, 62%);
}

.card-karma {
  border-top: 0.5rem solid hsl(34, 97%, 64%);
}

.card-calculator {
  border-top: 0.5rem solid hsl(212, 86%, 64%);
}

Answer №4

To simplify styling for different types of cards, you can create a global .card class and use class modifiers for each specific card type.

For more information, you can explore:

  1. OOCSS Object Oriented CSS
  2. SMACSS
  3. BEM Block, Element, Modifier

.card {
      border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
}

.card-supervisor {
    border-top: .5rem solid hsl(180, 62%, 55%);
}

.card-team-builder {
    border-top: .5rem solid hsl(0, 78%, 62%);
}

.card-karma {
    border-top: .5rem solid hsl(34, 97%, 64%);
}

.card-calculator {
    border-top: .5rem solid hsl(212, 86%, 64%);
}
<section class="cards">
  <div class="card card-supervisor">
    <h1 class="card-title">Supervisor</h1>
    <p class="card-paragraph">Monitors activity to identify project roadblocks</p>
    <div class="card-image">
      <img src="images/icon-supervisor.svg">
    </div>
  </div>

  <div class="card card-team-builder">
    <h1 class="card-title">Team Builder</h1>
    <p class="card-paragraph">Scans our talent network to create the optimal team for your project</p>
    <div class="card-image">
      <img src="images/icon-team-builder.svg">
    </div>
  </div>

  <div class="card card-karma">
    <h1 class="card-title">Karma</h1>
    <p class="card-paragraph">Regularly evaluates our talent to ensure quality</p>
    <div class="card-image">
      <img src="images/icon-karma.svg">
    </div>
  </div>

  <div class="card card-calculator">
    <h1 class="card-title">Calculator</h1>
    <p class="card-paragraph">Uses data from past projects to provide better delivery estimates</p>
    <div class="card-image">
      <img src="images/icon-calculator.svg">
    </div>
  </div>
</section>

Answer №5

To easily apply a common set of CSS rules to multiple classes, simply separate them with commas like the example below.

.card-supervisor, .card-team-builder, .card-karma, .card-calculator {
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
}

However, keep in mind that you can assign more than one class to an HTML element. It is recommended to use one common class for shared styles and another class or ID for unique styles as shown below:

<div class="card-item card-supervisor">

CSS

.card-list{
    border-radius: .5rem;
    padding: 2.5rem 3rem;
    margin-bottom: 3rem;
    box-shadow: 0 1rem 2rem .5rem #dedede;
}
.card-supervisor {
    border-top: .5rem solid hsl(180, 62%, 55%);
}

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

What is the best way to combine values passed from PHP to AJAX?

I need to combine the contents of showFname, showMname, and showLname and display the result in showName. However, I am facing an issue where the combined names are not appearing in showName. HTML <input type="text" id="showFname" name="showFname" /& ...

javascriptphpjqueryhtmlajax

Updating the HTML class with JavaScript

My HTML class has two classes $(document).ready(function() { $(".container").hover(function() { $('.green').addClass('display-on'); }); $(".container").mouseleave(function() { $('.black&apos ...

javascriptjqueryhtmlcss

Transferring an array from a Node.js server to another array on an HTML webpage

app.get('/reservedDeskNames', function(req, res) { connection.query( 'SELECT DeskName FROM desks WHERE status = ?',["Booked"], function(err, rows){ if(err) { throw err; } else ...

javascripthtmlarraysnode.js

The .html() function failed to update the content within the div element

Hey everyone, I could really use some assistance. Here's the AJAX code I'm working with: $(document).ready(function() { $(".ajaxLoadPage").click(function(){ var page=$(this).attr('id'); alert(page); $.ajax({ ...

jqueryhtmlajax

Drag and Drop: Unable to Return Item to Its Original Position

I'm facing an issue with an HTML code that Drag Drop feature, everything works fine except for dragging it back to its original position. Below is the snippet of the HTML code: function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ...

javascripthtml

Error encountered at /edit-menu/edit/: The 'Product' object does not contain the attribute 'is_valid'

I am attempting to extract all product names from the Product model, display them along with their prices on the screen, and enable users to modify the price of any item. Although I have managed to list them out and provide an input field for the price, I ...

pythonhtmldjangoweb-applications

Simple steps to modify the width of underline using CSS

One of the cells in my table has the following content: <td><b>Grand Total</b></td> I want to add a line under the text "Grand Total". I tried using text-decoration: underline;, and it worked fine. However, I now need to customize ...

htmlcss

The never-ending loading problem at the bottom of the Firefox screen seems

I am facing an issue while trying to open something in Firefox using window.open(). The loading screen seems to never stop, and I cannot pinpoint the reason behind it. Any advice on how to resolve this would be greatly appreciated. View Screenshot: This ...

javascriptcssbackbone.jsmarionette

Ways to identify the image shown during operating hours?

I have previously asked this question and received helpful answers. Now, let's consider a business that operates from 9:00 AM to 5:00 PM PST time (California), closed on Saturdays and Sundays. How can I make adjustments for this scenario? The script ...

javascriptjqueryhtmlcss

Is there a way to smoothly scroll while resizing a div using Resizable Jquery?

I've implemented AdminLTE 3 template and added a resizable div using jQuery-UI. When I expand the div's height, the page doesn't automatically scroll down with it. I don't want to add a scrollbar to the div; instead, I want the entire p ...

phpjqueryhtmlcssjquery-ui

Sleek transitions for navigating between cells in a data table

I am looking to implement a smooth animation for cell navigation. Check out what I currently have: http://jsfiddle.net/0ardb3u0/ When the mouse hovers over a cell, I want the full column and row of that cell to be selected and highlighted in blue. How ...

javascriptjqueryhtmlcss

How can I alter the div once the form has been submitted?

Is there a way to change the background of a form and its results after submitting the form? I need to switch the image background to a plain color. I attempted to use a solution I found, but it doesn't seem to be working as expected. You can view my ...

javascriptjqueryhtmlcssforms

What is the best way to incorporate multiple input boxes into a single alertbox for repeated use?

I attempted to use the same alertbox for 3 different input elements by converting it into a class and using getElementsByClassName, but unfortunately, it did not work as expected. Here is what I tried: <input type="text" class="form-control date notif" ...

javascriptphphtml

Using JQuery to target and style individual td elements within a database in a

Hey there! I'm currently in the process of learning jQuery and I've encountered a little issue with the code below: <table class="table table-bordered table-striped table-hover datatable"> <thead> <tr> & ...

javascriptjqueryhtmldatatable

Creating a customized design for a React application with the use of Scss and JavaScript variables

Is there a method to incorporate JavaScript variables into an SCSS file? For instance, I have a JavaScript file containing the following code: // sky blue const PRIMARY_COLOR = '#489FEF' export { PRIMARY_COLOR} and I would like to utilize it ...

javascripthtmlcssreactjssass

Squarespace | Tips for Completely Removing the Footer in the Pacific Template

I must say, the footer on this website is incredibly stubborn. Let's take a look at subject A: URL: Hello there! I'm currently working on a website and I'm facing a challenge with the background not stretching to fit the entire window when ...

htmlcsstemplatesfootersquarespace

The edit button for an element should only modify that specific element, but instead it is making changes to all elements

Currently, I am working on creating an edit function for a favorites bar. The issue I am facing is that when I attempt to edit one box, all the previously clicked boxes are also being edited. You can find the complete code in this jsfiddle link: https://js ...

javascripthtmlcss

Animating SVG elements using CSS

After learning how to use the <animate> attribute, I successfully created a captivating animation featuring an elastic line. However, I am now determined to transform this into CSS for better control: my goal is to activate the animation only upon ho ...

csssvg

Bootstrap sticky footer with adjustable height

Striving to achieve a sticky footer with a custom height on my website has turned out to be more challenging than I initially expected. Presented below is a snapshot of the current state of my footer: https://i.sstatic.net/SXaTA.png The issue arises whe ...

htmlcsstwitter-bootstrapfootersticky

VueJS loop creating excessive div element

I am facing an issue where extra div is being created while displaying cards from API data, causing unnecessary space on the page. Here is my response: [ ... { "id": 6, "name": "Highway", ...

htmlvue.js