Why repeat yourself in CSS?


#1


Hey there! I have a question.
I have not quite mastered the positioning, float and display tags but I will get there eventually. For now what bugs me is the following:

I did the python course and there it was mentioned that you should never repeat yourself in writing code (DRY!). I love that statement, laziness makes for a good creativity motivator :wink:. So what I am wondering is why in the example resume stylesheet are a lot of attributes repeated in the different selectors? Font-family and color for example. Wouldn't it be easier to put that in the div part of the css?

I do get that every selector signifies a different part of the website and may need specific behavior. But that still doesn't explain why the font-family isn't just mentioned once, right?

Is there an explanation for this? Or should I really view the div parts as the background for the p and h parts?

Thank you!
(below is(part) of the example)

div {
	border-radius: 5px;
}

#header {
	z-index: 1;
	position: fixed;
	width: 97.5%;
	margin-top: -20px;
	height: 60px;
	background-color: #668284;
	margin-bottom: 10px;
}

#name {
	float:left;
	margin-left: 5px;
	padding-top: 5px;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	color: #ffffff;
}

#email{
	float:right;
	margin-right: 5px;
	padding-top: 5px;
	font-size: 16px;
	font-family: Verdana, sans-serif;
	color: #ffffff;
}

h4 {
	margin-left: 5px;
	margin-bottom: 15px;
	font-family: Verdana, sans-serif;
}


#2

in sizing and colors you had the freedom to build to pick the colors, font-family and so on.

If you use the same font-family for the all the headings and so on, you should add it do div css selector.

DRY also applies to CSS, so yes, this is important


#3

Thank you!

So in the example the use of Verdana as font-family could have been put in the div css selector (and then only mention font-family in other selectors when they were different)?


#4

or even to the body css selector.

css inherits from its parent, so if you add to div or body it will inherit. If you then add a different font-family to for example h2, the font-family will be overwritten (if for example for h2 you want a different font)


#5

Okay! Yes! I thought so :slight_smile: thank you!

It doesn't, however work the same for the positioning, displaying and floating attributes does it :wink: would be weird anyway, I suppose :slight_smile: Can't position your paragraph properly in your div if you only specify attributes in div.


#6

no, it doesn't. Css files can get pretty large because everything has to be positioned.


#7

Thank you! Also for your quick reply. Much appreciated! :grinning:


#8

geen probleem, graag gedaan

(no problem, you are welcome)


#9

hahaha dude :slight_smile: Dutchies ftw!

fijne avond! En fijn weekend :slight_smile:


#10

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