How would this be written so padding isn’t used twice?
.wrapa {
padding-bottom: 44px;
}
.wrapa.active::before,
.wrapa.active::after {
padding-bottom: 44px;
}
I think I may have got it:
.wrapa,
.wrapa.active::before,
.wrapa.active::after {
content: "";
position: absolute;
top: 0;
width: 198px;
/*height: 44px;*/
padding-bottom: 44px;
}
If the padding is the only thing that is unique to all those items then why have you included all the other rules?
You don’t want to be ‘undoing’ styles elsewhere as that is bad practice and hard to maintain.
What do you mean, it goes like this:
.wrapa {
/*position: relative;*/
/*width: 606px;*/
/*height: 50px;*/
/*padding-bottom: 44px;*/
/*background-color: #000000;*/
/* border-radius: 25px;*/
/*overflow: hidden;*/
/*cursor: pointer;*/
/*border: 3px solid #0059dd;*/
/*box-sizing: border-box;*/
}
.wrapa,
.wrapa.active::before,
.wrapa.active::after {
content: "";
position: absolute;
top: 0;
width: 198px;
/*height: 44px;*/
padding-bottom: 44px;
}
No .wrapa is position:relative not position:absolute. That means you have two places where it may go wrong instead of one. Only group the shared properties.
You can of course group loads of properties and then undo them in further rules but that is bad practice and prone to error although occasionally can result in shorter code.
Avoid undoing css.
I put it back like this then:
.wrapa {
/*position: relative;*/
/*width: 606px;*/
/*height: 50px;*/
padding-bottom: 44px;
/*background-color: #000000;*/
/* border-radius: 25px;*/
/*overflow: hidden;*/
/*cursor: pointer;*/
/*border: 3px solid #0059dd;*/
/*box-sizing: border-box;*/
}
.wrapa.active::before,
.wrapa.active::after {
content: "";
position: absolute;
top: 0;
width: 198px;
/*height: 44px;*/
padding-bottom: 44px;
}
I can’t do this one like this then:
padding-bottom: 260px;
Because it’s relative and absolute.
.wrapb {
/*position: relative;*/
/*width: 266px;*/
/*height: 266px;*/
/*overflow: hidden;*/
/*padding-bottom: 260px;*/
/*background-color: #000000;*/
/* border-radius: 25px;*/
/*cursor: pointer;*/
/*border: 3px solid #0059dd;*/
/*box-sizing: border-box;*/
}
.wrapb,
.wrapb::before {
padding-bottom: 260px;
background: url("https://i.imgur.com/UzRn6Qx.png") no-repeat 0 0;
}
.wrapb::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
/*width: 266px;*/
/*height: 266px;*/
/*padding-bottom: 260px;*/
background-position: 0 -260px;
opacity: 0;
border: 3px solid #0059dd;
box-sizing: border-box;
transition: all 2s;
}
But isn’t that how the background image is set up?
wrapb is relative
wrapb::before is absolute.
.wrapb,
.wrapb::before {
background: url("https://i.imgur.com/UzRn6Qx.png") no-repeat 0 0;
}
.wrapb {
/*position: relative;*/
/*width: 266px;*/
/*height: 266px;*/
/*overflow: hidden;*/
padding-bottom: 260px
/*background-color: #000000;*/
/* border-radius: 25px;*/
/*cursor: pointer;*/
/*border: 3px solid #0059dd;*/
/*box-sizing: border-box;*/
}
.wrapb,
.wrapb::before {
background: url("https://i.imgur.com/UzRn6Qx.png") no-repeat 0 0;
}
.wrapb::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
/*width: 266px;*/
/*height: 266px;*/
padding-bottom: 260px;
background-position: 0 -260px;
opacity: 0;
border: 3px solid #0059dd;
box-sizing: border-box;
transition: all 2s;
}
{position:relative} is commented out so .wrapb is {position:static} (unless .wrapb {pos:rel} is assigned elsewhere but not shown here).
I just did that for visual purposes so I don’t have to keep scrolling down.
Shared proprieties are towards the bottom.
.wrapa,
.wrapg,
.wrapg iframe .wraph,
.jacketb {
width: 606px;
}
.wrapc svg,
.wrapd svg,
.wrapf svg {
vertical-align: top;
}
.wrapa,
.wrapb,
.wrapc,
.wrape,
.container {
overflow: hidden;
}
.wrapb,
.wrapb::before,
.wrapc,
.wrapd,
.wrape,
.wrapf,
.jacketc {
width: 266px;
}
.wrapa,
.wrapc,
.wrapd,
.wrapf,
.jacketa,
.jacketb {
background-color: #000000;
}
.wrapc,
.wrapd,
.wrape,
.wrapf,
.wrapg,
.wraph,
.jacketb,
.jacketc {
margin-top: 45px;
}
.wrapa,
.wrapb,
.wrapc,
.wrapd,
.wrapf,
.wrapg,
.jacketa,
.jacketb,
.jacketc {
cursor: pointer;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrapa,
.wrapb,
.wrapc,
.wrapd,
.wrape,
.wrapf,
.wrapg,
.wraph,
.jacketa,
.jacketb,
.jacketc {
position: relative;
}
.wrapa,
.wrapb,
.wrapc,
.wrapd,
.wrape,
.wrapf,
.wrapg,
.wraph,
.jacketa,
.jacketb,
.jacketc,
.container,
iframe {
border-radius: 25px;
}
Are you suggesting I should not to do it like this?
Which shared proprieties would you group together, which wouldn’t you?
.wrapa,
.wrapg,
.wrapg iframe,
.wraph,
.jacketb {
width: 606px;
}
.wrapc svg,
.wrapd svg,
.wrapf svg {
vertical-align: top;
}
.wrapa,
.wrapb,
.wrapc,
.wrape,
.container {
overflow: hidden;
}
.wrapb,
.wrapb::before,
.wrapc,
.wrapd,
.wrape,
.wrapf,
.jacketc {
width: 266px;
}
.wrapa,
.wrapc,
.wrapd,
.wrapf,
.jacketa,
.jacketb {
background-color: #000000;
}
.wrapc,
.wrapd,
.wrape,
.wrapf,
.wrapg,
.wraph,
.jacketb,
.jacketc {
margin-top: 45px;
}
.wrapa,
.wrapb,
.wrapc,
.wrapd,
.wrapf,
.wrapg,
.jacketa,
.jacketb,
.jacketc {
cursor: pointer;
border: 3px solid #0059dd;
box-sizing: border-box;
}
.wrapa,
.wrapb,
.wrapc,
.wrapd,
.wrape,
.wrapf,
.wrapg,
.wraph,
.jacketa,
.jacketb,
.jacketc {
position: relative;
}
.wrapa,
.wrapb,
.wrapc,
.wrapd,
.wrape,
.wrapf,
.wrapg,
.wraph,
.jacketa,
.jacketb,
.jacketc,
.container,
iframe {
border-radius: 25px;
}
Is this bad then?
relative
absolute
.wrapb {
/*position: relative;*/
}
.wrapb,
.wrapb::before {
background: url("https://i.imgur.com/UzRn6Qx.png") no-repeat 0 0;
}
.wrapb::before {
content: "";
position: absolute;
}
I’m not sure what you are asking exactly.
If the background image is the only item shared between those different rules then that’s the rule that you group and your code above is good.
If wrapb:before is position:absolute and wrapb is position:static or relative then they should be kept separate for easier maintenance. As long as you know what you are doing you can get away with grouping lots of items and then undoing them somewhere else but it makes sense to only group the shared items and then there is no conflict.
Then doing it like this would be better, where there is no absolute?
.wrapa,
.wrapa.active::before,
.wrapa.active::after {
padding-bottom: 44px;
}
.wrapa {
/*padding-bottom: 44px;*/
}
.wrapa,
.wrapa.active::before,
.wrapa.active::after {
padding-bottom: 44px;
}
.wrapa.active::before,
.wrapa.active::after {
content: "";
position: absolute;
/*padding-bottom: 44px;*/
}
Yes 
I understand now, thank you for bringing that to my attention.
Shared items like these, right.
.wrapa,
.wrapb,
.wrapc,
.wrapd,
.wrape,
.wrapf,
.wrapg,
.wraph,
.jacketa,
.jacketb,
.jacketc {
position: relative;
}
.wrapa,
.wrapc,
.wrapd,
.wrapf,
.jacketa,
.jacketb {
background-color: #000000;
}
Yes that’s the general idea but once you find you have a long list like you have there it starts to look like you should have had a more modular approach. Could a new class applied to the html create all the common aspects?
Are their more shared properties that just the position?
It’s up to you to look at the code and decide which approach works best. Going too mad one way or pulling every single rule out of a style sheet and applying it to millions of items is not always helpful .
Code readability is important so there is always a trade-off between succinct code and code that is easily maintained. I can’t give you answers for everything because there isn’t one right answer for this and sometimes its a matter of choice or necessity.
Would you not include this with the rest of these shared proprieties?
I should remove it?
or is that ok?
I think that’s ok because there is no position given to the shared proprieties of the width: 266px;
Right?
{
width: 266px;
}
.wrapb::before,
.wrapb::before {
content: "";
position: absolute;
top: -3px;
left: -3px;
/*width: 266px;*/
.wrapb,
.wrapb::before,
.wrapc,
.wrapd,
.wrape,
.wrapf,
.jacketc {
width: 266px;
}
You can add the width as long as its shared between all the elements you apply it to.
To clarify this point consider the following html that follows the format you are using.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrapa,
.wrapb,
.wrapc,
.wrapd,
.wrape,
.wrapf,
.wrapg,
.wraph{
position:relative;
overflow:hidden;
width:286px;
border:1px solid #000;
margin:10px;
padding:10px;
}
.wrapa{background:red}
.wrapb{background:blue}
.wrapc{background:green}
.wrapd{background:yellow}
.wrape{background:cyan}
.wrapf{background:teal}
.wrapg{background:orange}
.wraph{background:purple}
</style>
</head>
<body>
<div class="wrapa">Wrap a</div>
<div class="wrapb">Wrap b</div>
<div class="wrapc">Wrap c</div>
<div class="wrapd">Wrap d</div>
<div class="wrape">Wrap e</div>
<div class="wrapf">Wrap f</div>
<div class="wrapg">Wrap g</div>
<div class="wraph">Wrap h</div>
</body>
</html>
It would be much simpler and better to do something like this instead.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.box{
position:relative;
overflow:hidden;
width:286px;
border:1px solid #000;
margin:10px;
padding:10px;
}
.wrapa{background:red}
.wrapb{background:blue}
.wrapc{background:green}
.wrapd{background:yellow}
.wrape{background:cyan}
.wrapf{background:teal}
.wrapg{background:orange}
.wraph{background:purple}
</style>
</head>
<body>
<div class="box wrapa">Wrap a</div>
<div class="box wrapb">Wrap b</div>
<div class="box wrapc">Wrap c</div>
<div class="box wrapd">Wrap d</div>
<div class="box wrape">Wrap e</div>
<div class="box wrapf">Wrap f</div>
<div class="box wrapg">Wrap g</div>
<div class="box wraph">Wrap h</div>
</body>
</html>
You have the one common class for the generic box and then you define the specifics for each as required. Its simpler and more efficient in this case but that won’t be the same for all cases.
Also remember that when you start pulling rules out of an original style and place them in a common section somewhere miles away from the original rule you may end up not knowing that there are additional rules somewhere else. How can you know without checking through the whole file so you must use common-sense and a structured approach at all times.
Only b through f are the same width.
11 are relative
Not all of them share every single property.
14 are:
border-radius: 25px;
5 are
606 width