I was told to use less code rather than more code, so which of these codes is better?

Both Codes

Background/Border

`<div style="width: 88px; height: 24px; background-color:#ffffff; color:#000000; border-left: 89px solid #00ffff;border-right: 89px solid #ff00ff;border-radius: 50px;"> </div>`

Display:Block

<div style="display:block; width: 89px; height:24px; background-color:#00ffff; border-top-left-radius:50px;border-bottom-left-radius:50px;margin: 0px 0px 0 0px;">
</div>

<div style="display:block; width: 88px;height:24px;background-color:#ffffff;margin: -24px 0px 0 88px;">
</div>

<div style="display:block; width: 89px; height:24px; background-color:#ff00ff; border-top-right-radius:50px;border-bottom-right-radius:50px; margin: -24px 0px 0 177px;">
</div>

Both of those are several times too long compared to doing it properly. Dump them and start over with a much shorter version.

To use less code learn how to use CSS External Style Sheets link

Each div is repeating items:

<div style="display:block; width: 89px; height:24px; background-color:#00ffff; border-top-left-radius:50px;border-bottom-left-radius:50px;margin: 0px 0px 0 0px;">
</div>

<div style="display:block; width: 88px;height:24px;background-color:#ffffff;margin: -24px 0px 0 88px;">
</div>

<div style="display:block; width: 89px; height:24px; background-color:#ff00ff; border-top-right-radius:50px;border-bottom-right-radius:50px; margin: -24px 0px 0 177px;">

</div>

CSS External style-sheet

.div1,
.div2,
.div3 {display:block; height:24px; width: 88px;}

.div1,
.div3 {width: 89px;}

.bg1 {background-color:#00ffff;}
.bg2 {background-color:#ffffff;}
.bg3 {background-color:#ff00fff;}

.bd1 {border-top-left-radius:50px;border-bottom-left-radius:50px;}
.bd2 {}
.bd3 {border-top-right-radius:50px;border-bottom-right-radius:50px;}

.mg1 {margin: 0px 0px 0 0px;}
.mg2 {margin: -24px 0px 0 88px;}
.mg3 {margin: -24px 0px 0 177px;}

**HTML ** ```
**Edit:**
Added one of many descriptive web-ages that are available.
Amended and sligtly optimised CSS style-sheet,
5 Likes

A little shorter again with a bit of nit picking.
No need to tell a div to display as block.
Shorthand colours and shorthand border-radius.

.div1,
.div2,
.div3 {height:24px; width: 88px}

.div1,
.div3 {width: 89px}

.bg1 {background-color:#0ff}
.bg2 {background-color:#fff}
.bg3 {background-color:#f0f}

.bd1 {border-radius:50px 0 0 50px}
.bd3 {border-radius:0 50px 50px 0}

.mg1 {margin: 0px 0px 0 0px}
.mg2 {margin: -24px 0px 0 88px}
.mg3 {margin: -24px 0px 0 177px}
3 Likes

Can anyone join in?

.div1,
.div2,
.div3 {height:24px; width: 88px;}

.div1,
.div3 {width: 89px;}

.bg1 {background-color:#0ff;}
.bg2 {background-color:#fff;}
.bg3 {background-color:#f0f;}

.bd1 {border-radius:50px 0 0 50px;}
.bd3 {border-radius:0 50px 50px 0;}

.mg1 {margin: 0;}
.mg2 {margin: -24px 0 0 88px;}
.mg3 {margin: -24px 0 0 177px;}

There was a dearth of semi-colons to my eye, and a surfit of “px’s”

3 Likes

The semi colons were me nit picking, being the last they are not needed. The px was a nit picking opportunity missed. :slight_smile:

3 Likes

I like consistency… :stuck_out_tongue:

3 Likes

While I know that to be true, I always put them in anyway. The main reason for that is to ensure that if I add a new rule later, I don’t spend ages trying to debug it before I notice I’d forgotten to add in the semi-colon preceding it. (And yes - that’s the voice of experience. )

5 Likes

Meeow, too

1 Like

I’m consistent.

Well worth reading :slight_smile:

https://www.sitepoint.com/google-html-css-javascript-style-guides/

end every declaration with a semi-colon (even the last one)

1 Like

yes - consistently bad.

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.