Good Code vs Bad Code

It's not so much about "style" as is about best practices. There is a lot of discussion about the topic, but I would suggest you read the following blog posts about the topic.

JavaScript and CSS guidelines for pragmatists:

https://github.com/stevekwan/best-practices

I hope this helps.

do you have an account?

if not no worries, here is another probably better resource to learn about best practices with CSS:

https://css-tricks.com/css-style-guides/

As other answers have mentioned there isn't really bad code unless it doesn't actually function, but there is best practices that a lot of programmers follow, either because it the most effecient and secure way to write the code or it is easier for other programmers to read and also understand.

Not all best practices are the same though.

For example CSS has multiple different ways of being written a few examples are:

BEM (Block Element Modifier)

.block {}
.block__element {}
.block--modifier {}

Examples:

.site-navigation {} /* Block */
.site-navigation__button {} /* Element */
.site-navigation--full {} /* Modifier */

/* BEM */
.person {} /* Block */
.person__hand {} /* Element */
.person--female {} /* Modifier */
.person--female__hand {} /* Element */
.person__hand--left {} /* Modifier */

/* Normal CSS */

.person {}
.hand {}
.female {}
.female-hand {}
.left-hand {}

Both of the above work fine but BEM allows other developers reading your CSS to quickly understand how a class is used and identify which other classes it is related to.

OOCSS (Object Orientated CSS)

The Main princible behind Object Orientated CSS is to write CSS with forethought into code re-use and duplication. Some people do not see it as best practice because it can clutter your HTML but I find myself using OOCSS far more in my personal projects then any other naming convention / CSS syntax because if done correctly can really speed up your site.

Example:

/* Normal CSS */

.header-navigation {
    width: 980px;
    margin: 0 auto;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 260px;
}

.content-wrap {
    width: 980px;
    margin: 0 auto;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
        padding-top: 55px;
        padding-left: 20px;
        height: 800px;
}

<div class="header-navigation"></div>
<div class="content-wrap"></div>

As you can see in the above example there is a lot of code duplication between the class .header-navigation and .content-wrap. You can save space and size in your style sheet by creating a class to share the common attributes.

For example:

/* OOCSS */

.globalwidth {
    width: 980px;
    margin: 0 auto;
    position: relative;
    padding-left: 20px;
    padding-right: 20px;
    overflow: hidden;
}

.header-navigation {
    padding-top: 20px;
    padding-bottom: 20px;
    height: 260px;
}

.content-wrap {
        padding-top: 55px;
        padding-left: 20px;
        height: 800px;
}

<div class="globalwidth header-navigation"></div>
<div class="globalwidth content-wrap"></div>

The benifets of OOCSS is that you can easily re-use classes without duplication.

Title CSS

With Title CSS you use a capitalized name for any global CSS class. For any modifier or descendant class you use a lowercase letter.

For example:

<!-- HTML Markup -->
<div class="Title isModified">
    <p class="descendant">
</div><div class="Title isModified">
    <p class="descendant">
</div>

/* Corresponding Title CSS */

.Title {}
    .Title.isModified {}
    .Title .descendant {}

and many more.

In most places I have worked and in most team projects I have worked on I found that BEM seems to be the general benchmark for best practice as it is easier to see how different classes relate to each other and makes life a lot easier in team projects.. but OOCSS and Title CSS are just a valid (I find myself using OOCSS a lot in my own personal projects that do not involve other developers).