If it is at all possible, how can the below code be made better?

#button {
width: 200px;
height: 50px;
padding: 10px;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#box {
width: 400px;
overflow: hidden;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
float: left;
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#widget {
width: 500px;
min-height: 200px;
overflow: auto;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

For newbies?

For newbies, all those who think they are experts but are actually newbies in disguise and all those who are constantly in pursuit of knowledge

What is your definition of better?
Code reduction?

Hmmm,

More efficient; more maintainable; easier to read, follow and understand.

Do you now understand or do you want me to say more?

unnecessary repetition of similar styles
could be optimized by using reusable classes

.button {
width: 200px;
height: 50px;
}
.box {
width: 400px;
overflow: hidden;
float: left;
}
.widget {
width: 500px;
min-height: 200px;
overflow: auto;
}
.common {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

^^^ Very good!

To me, this will solve the problem:

#button, #box, #widget  {
   border: solid 1px #ccc; 
   background: linear-gradient(#ccc, #222);
   box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#button {
  width: 200px;
  height: 50px;
}
#box {
  width: 400px;
  overflow: hidden;
  float: left;
}
#widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
}

Not this:

₱®ÌИСΞ:
unnecessary repetition of similar styles
could be optimized by using reusable classes

.button {
width: 200px;
height: 50px;
}
.box {
width: 400px;
overflow: hidden;
float: left;
}
.widget {
width: 500px;
min-height: 200px;
overflow: auto;
}
.common {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

This is because one will have to create an outer div before an inner div for the second format. I.e
<div class="common">
<div class="box">
</div>
</div>

That is too much code.

But with the first one, you write less and achieve more because they all inherit a general property from the first set of general declarations.

Thank you.

^^ I think the other code is okay..

You don't need to create an outer div to solve the problem you can combine to class in one div like dis

<div class=box common">

</div>

and you are fixed...

But urs is also good too...

^^^ yeah... I just remembered. Gud one, though.

@OP...Can we have more of this often??... I think this can help increase people's participation on the webmasters section.

Both answers are correct. But with experience and id names, we can assume that there will be more than 1 item, so we would go with the 1st answer. Which was the reason i asked yawas her definition of better.

The code can still be stripped down, spacing and code wise.

Maybe it's better if you test folks using a live installation. You can use use Code Pen http://codepen.io/ That way one can change things on the fly and see results. Otherwise na just trial and error una dey do!

Peace

Smh

No time, just passing.

Haus of Dinma: Maybe it's better if you test folks using a live installation. You can use use Code Pen http://codepen.io/ That way one can change things on the fly and see results. Otherwise na just trial and error una dey do!

Peace

Just wondering, why not simply use the firebug extension for Firefox?

Think of Code Pen as a hosted version of firebug.Code Pen is designed to be collaborative. Throw your CSS, HTML and JavaScript code up there and folks can experiment and see results in real time.

Folks,

Both answers are correct (there are 1001 ways to skin a cat) but the very first answer is preferred...Think reuse.

If you have IDs, then it can only be used once. It thus potentially becomes tied to that particular element. If you make them classes (and separate the common elements into 1 class), you can better reuse the code. It is more code upfront but in the long-term, it is more efficient. Makes more sense if you run a very big website with tons of hits per day. This concept is called OOCSS (Object-Oriented CSS). In general, my rule of thumb has always been, "if you find yourself using the same code, irrespective of language, more than once, that's a candidate for abstraction".

I have definitely enjoyed the banter. If you want more like this, let me know. I can come up with more, not just in CSS, but other languages as well

^^^

Sounds like an ad

^^^ he he, it is. OOCSS and RWD are the new technologies and unlike the others, these are forward-looking and recognize the need for a "one web", which is the way everything is going...well, at least, I guess, till someone else comes up with another catchy phrase.

Make i Stop here as even I am beginning to think this response also sounds like an ad

@yawa dnt mind dem... Abeg continue teachin us so dat we wuld learn more from u guys...

^^^ I will come up with something else in due time