XF 1.5 General CSS Question

[Amaury]

I realize this is kind of a strange question and, like with anything, it likely just comes down to personal preference. This particular CSS question has to do with borders, and being a general question, I'm not really asking for support, more just curious. (As such, if this is better suited for Forum Management, please move it accordingly. Thanks.) The question is on what's "more correct," but, again, as this likely comes down to personal preference, there's probably no "correct" answer. Still, I'm curious, and I want to see others' feedback.

Let's say you have an element that only has top and bottom borders that are red and you want to make them blue. Would it be "more correct" to use:

border-color: blue;

Or:

border-top-color: blue;
border-bottom-color: blue;

Similarly, now let's say you want to add right and left borders to that element. Would it be "more correct" to use:

border: solid 1px blue;

Or:

border-right: solid 1px blue;
border-left: solid 1px blue;

Reason being that there are already top and button borders, so why use the general "border"? It's basically like you're stacking on top of the already-existing top and bottom borders, though not really, visually, but still.

Or:

border-right-style: solid;
border-right-width: 1px;
border-left-style: solid;
border-left-width: 1px;

For similar reasons as above. You already have the color.

 

[Lisa]

Well border on its own is for all sides, so if you're only styling parts (top and bottom, or left and right) then I would specify with border-top, border-bottom or border-left, border-right.


With that said, you wouldn't need to do separate border-right-style, width thing though - you just need border-right :solid 1px blue; for example.

 

[Amaury]

Good point on the latter, and that's how do it there. There's no need to over-complicate it.

On the other matter, part of it likely also depends on whether all the border sides are or will be the same color or not. In my case and almost all other cases, every border side is the same color. Both of these have style properties, but for example's sake, let's say they don't and you need custom CSS.



I want to change the border color to red. It's much simpler to use border-color (since it will get both top and bottom) rather than using border-top-color and border-bottom-color. For the second one, though, it doesn't really matter, but border-color is just shorter. In the end, it's likely one of those things that falls into the "if it works, it works and there's no need to tweak it" category, a variant of "if it's not broken, don't fix it," with the one exception being when you need to increase specificity if you want something that's pretty general, like headers, to only affect one area. It's also less code.