When you have the same values, used in different div's, where appropriate should you condense your code?

 

So if I've got some CSS.....

 

 

/*************************************

Latest Works Styles

**************************************/


#latestWorks {
background: white url('../img/boxBG.jpg') top left repeat-x;
float: left;
width: 591px;
border: 1px solid #bfc5c8;
}	

#latestWorks ul li {
	float: left;
	padding-bottom: 25px;
	width: 50%;
}

	#latestWorks ul li img {
		float: left;
		border: 1px solid #acacac;
		margin-right: 17px;
	}

	#latestWorks ul li p {
		padding-right: 10px;
	}


/*************************************

Latest Posts styles

**************************************/


#latestPosts {
background: white url('../img/boxBG.jpg') top left repeat-x;
float: right;
width: 246px;
border: 1px solid #bfc5c8;
}

#latestPosts ul li {
	padding-bottom: 25px;
}

 

 

Because the <ul>'s in both these divs are lined up horizontally, they both have a padding-bottom of 25px;

 

Is it good or bad practise to, wherever possible, streamline code to the following....

 

 

#latestWorks ul li, #latestPosts ul li {
padding-bottom: 25px;
}

 

 

On one hand it seems it could be more difficult to read if your grouping values in your CSS. On the other hand it's easier to change just one value to all the relevent elements.

 

Thoughts?

 

Ta!

Just think logically about the file as a whole, I'd only ever condense elements together that need to remain consistent with one another.

 

Should you or anyone else amend the file, they can edit one value and not disrupt the consistency of the site too much.

 

On the other hand if you condense absolutely everything, future amendments will be a nightmare as changing one value is going to have a knock on effect on everything else.

 

In the example posted I would condense those values.

It's good if you will always want these two elements to have the same attribute. The best way in this case is to give both containers a class so you can style them the same:

 

.latest ul li

 

Then you give individual styles using their ids if you need to after.

Edited February 24, 201214 yr by mrchristoph