css performance

usually i build site, i put css file, properties news set elements tangible during once. this:

#myelement {
    color: #fff;
    background-color: #000;
    padding: 10px;
    border: 1px plain #ccc;
    font-size: 14pt;
}

.myclass {
    font-size: 12pt;
    padding: 5px;
    color: #ee3;
}

i've deliberation bursting adult definitions array opposite files (colours.css, layout.css, fonts.css ...) i have seen recommended. something this:

/* colours.css */
#myelement {
    color: #fff;
    background-color: #000;
    border-color: #ccc;
}
.myclass {
    color: #ee3;
}

/* layout.css */
#myelement {
    padding: 10px;
    border: 1px solid;
}
.myclass {
    padding: 5px;
}

/* fonts.css */
#myelement {
    font-size: 14pt;
}
.myclass {
    font-size: 12pt;
}

to devaluate http requests, i'd mixing files stripping whitespace before rollout, that's an issue, nonetheless doubt is: does carrying those selectors steady over over means any opening issues browsers?

alternatively, there any collection prevaricate (potential) emanate merging definitions opposite files? ie: take quarrel given second instance (3 opposite files), brew file, initial example.