How to use DRY in css

HTML-CSS
1

here is my code in codepen - https://codepen.io/Rosstopherrr/pen/LoKmJa

As you can see it is a 3D can rotating, displaying the can, the colour of the can and info. However, there are multiple different cans I need to display but I want to use the Don’t Repeat Yourself technique. Don’t want tons of code. What is the best way to have my 3D cans displaying exactly the same by rotating and separately but each one has a different background url - so it shows different colour cans?

Any ideas?

1 Like
2

You can use CSS preprocessors, like SCSS, that support loops. The obvious pro is that you’ll only have to write one selector. The con is that you’ll have to write some math in your stylesheet (it’s worth it though!). This is how you could write it:

@for $i from 1 through 96 {
  .side:nth-of-type(#{$i}) {
    $position: 972px - ($i * 10.125px) + 10.125px;
    background-position: $position 0;
    transform: rotateY($i * 3.75deg - 3.75deg) translateZ(154px);
  }
}

You can also use an HTML preprocessor so you don’t have to write <div class="side"></div> 96 times.

3 Likes
3

thanks for that!! definitely will look into SCSS, especially if it support loops. But the code you’ve wrote for me, is that a replacement for the each and every .side:nth-of-type?

1 Like
4

Yes, SCSS just allows you to write loops to generate the CSS. The end result is literally exactly the same.

5

do you know any good tutorial videos that I can watch which explains well on SCSS? Something similar to the loop you commented. Looking at your code I do understand it, definitely makes sense to me but I am struggling to know what I should delete in my CSS file and what should remain. Thanks.

1 Like
6

you can also log on to youtube channel.just check on envato tutorials,
they have lots of videos which can also help you in what you need.

7

I don’t think I’ve watched a video tut on SCSS, so I can’t recommend any… But there should be plenty of them around.

8

Why not just use javascript?

9

I was thinking about using JS but how would I be able to say for each different can use a different background url? Think it will only work in CSS… any ideas??

10

For the HTML preprocessor, this is how it would look like in Pug:

.container
  .bottle
    .label
      - for (var i = 0; i < 96; i++)
        .side
11

To get the HTML and CSS preprocessor, go to Pen Settings -> HTML or CSS -> HTML or CSS preprocessor. And yes, the SCSS for loop works fine.

For more DRY, go to the CSS settings and set Vendor Prefixing to Autoprefixer. Then, you can remove all vendor prefixes, like -webkit- and -moz-. :slightly_smiling_face:

12

You don’t make it all JS,. just the parts of code that repeat.

Loops in CSS just seems wrong to me (minus key frames)., but I guess it’s just a preference thing.

13

There’s a few more things you can do to make it even DRYer, but there are already a lot of things mentioned.

15

CSS is probably a better solution, but just an opinion. It still is the case that some people have JavaScript disabled in their browser. :slightly_frowning_face:

17

Yes, just mentioning it. But also, with the CSS preprocessor you get better performance because you don’t have to execute JavaScript first, you just get compiled CSS code.

18

Yeah preprocessors also introduce new problems of their own. That’s worth mentioning… @Steffan153

1 Like
19

Yes. But it’s just an opinion, I just prefer CSS preprocessors.

1 Like
20

wow incredible!! Will look at this code and try and do it myself but, again, thank you kindly! but to create multiple bottles how would I do that? How can I have one can in the left, one in the centre and one in the right but all three will have three different colours, meaning all three will have three different background url links.