4 ms·

CSS is difficult because the complexity and inconsistency of mixing the intrinsic styles of HTML tags and CSS styles. For example, width can be set on <div> bu

by ww520 3y ago

CSS is difficult because the complexity and inconsistency of mixing the intrinsic styles of HTML tags and CSS styles. For example, width can be set on <div> but has no effect on <span>. You have to set its display to inline-block. Another example, <a> has its default colors. Setting CSS colors on the parent element has no effect on the <a> colors, which defeats the CASCADE nature in CSS. You have to apply the styling on <a>. But some styles like font-size does get through from parents. Another example, text overflows out of bound by default. You have to do the trick of turning off overflow. It feels like setting the bound has no effect. CSS just has lots of inconsistencies and requires knowing many little tricks to use it effectively.

Terretta 3y ago
> inconsistency of mixing ... width can be set on <div> but has no effect on <span> One of these is a division of layout, one of these spans the thing it wraps. The <span> should span the span of the content. The affordance of an anchor hypertext reference <a href> was supposed to be consistent for usability, and the <a> is on the link aspect, not on the text. The text that's inside the <a>here</a> is part of the text on either side of the anchor, and should of course reflect the font size etc., because the font applies to the text, while the <a> style applies to the indication/affordance of anchorness. And, you can pick what you want the a to be given which division or span of content it's in, and the most specific style will apply: https://jsfiddle.net/mD5us/4/ https://jsfiddle.net/mD5us/4/ Arguably, both of these are not just consistent, but the way it should work in principle given the apples and oranges you're comparing.
- ww520 3y ago
  Yes. All these are "supposed" to work the way they are and they are given good reasons, but it still doesn't negate the facts that the same CSS style has different effects on different tags. The <span> tag is a good example. As a user of CSS, when I apply a width to a span, I want its width set. I don't care it spans items. If I want span to have no width, I would just leave it alone. The fact that setting the width spells my intention clearly to restrict its width. In regarding to the selective application of colors and font-size on <a>text</a>, both the colors and font-size are styles that affect the text of the link. Why does one go through and the other doesn't? Don't you want consistent appearance of the link both in colors and font-size, in the name of affordance?
  - Terretta 3y ago
    Semantics and context matter. Width is a lovely word for things that have width, and meaningless if applied to things that don't. Consider “Set your emphasis width to 12 points.” None of that is applicable even though there are 3 CSS keywords in there and you can make sense of the sentence. > Don't you want consistent appearance of the link both in colors and font-size, in the name of affordance? Speaking for me, no. All words in the sentence, both inside and outside the anchor, should be consistent font, but the anchor has both state and behavior that can include color, underline, etc., to set what's inside the anchor to be inconsistent from the surrounding text, for attention and information. Generally, font size is not one of those things that would vary (Mac dock icon mouseover as a counter-example). There's a decent chance much of this makes more sense if you were making sites before these capabilities were developed and were along for the progression. It likely does seem like a chaotic mess when picking it up for the first time in present state, so I think it's a fair reaction.

by ww520 3y ago

Terretta 3y ago

> inconsistency of mixing ... width can be set on <div> but has no effect on <span> One of these is a division of layout, one of these spans the thing it wraps. The <span> should span the span of the content. The affordance of an anchor hypertext reference <a href> was supposed to be consistent for usability, and the <a> is on the link aspect, not on the text. The text that's inside the <a>here</a> is part of the text on either side of the anchor, and should of course reflect the font size etc., because the font applies to the text, while the <a> style applies to the indication/affordance of anchorness. And, you can pick what you want the a to be given which division or span of content it's in, and the most specific style will apply: https://jsfiddle.net/mD5us/4/ https://jsfiddle.net/mD5us/4/ Arguably, both of these are not just consistent, but the way it should work in principle given the apples and oranges you're comparing.

ww520 3y ago
Yes. All these are "supposed" to work the way they are and they are given good reasons, but it still doesn't negate the facts that the same CSS style has different effects on different tags. The <span> tag is a good example. As a user of CSS, when I apply a width to a span, I want its width set. I don't care it spans items. If I want span to have no width, I would just leave it alone. The fact that setting the width spells my intention clearly to restrict its width. In regarding to the selective application of colors and font-size on <a>text</a>, both the colors and font-size are styles that affect the text of the link. Why does one go through and the other doesn't? Don't you want consistent appearance of the link both in colors and font-size, in the name of affordance?
- Terretta 3y ago
  Semantics and context matter. Width is a lovely word for things that have width, and meaningless if applied to things that don't. Consider “Set your emphasis width to 12 points.” None of that is applicable even though there are 3 CSS keywords in there and you can make sense of the sentence. > Don't you want consistent appearance of the link both in colors and font-size, in the name of affordance? Speaking for me, no. All words in the sentence, both inside and outside the anchor, should be consistent font, but the anchor has both state and behavior that can include color, underline, etc., to set what's inside the anchor to be inconsistent from the surrounding text, for attention and information. Generally, font size is not one of those things that would vary (Mac dock icon mouseover as a counter-example). There's a decent chance much of this makes more sense if you were making sites before these capabilities were developed and were along for the progression. It likely does seem like a chaotic mess when picking it up for the first time in present state, so I think it's a fair reaction.