CSS: The Bad Components

Every shows language has its great parts and its hideous components. CSS (I know, it’s not a programs language, however whatevs) is no various.

In this post, I don’t do anything however vent. I’ve been coding sites for practically 12 years, and I’ve been doing CSS layouts for nearly fifty percent that (yeah, I was a late bloomer). I have actually involved realize what is good and bad about CSS, and right here are exactly what I think about “the bad parts”.
The “Specification” Box Model
This has been gone over sufficient yet is worthy of a lot more ranting. Although all of us eventually got used to it, having to recalculate the width of a component every time we would like to adjust the padding is simply awful.

The box-sizing residential property has actually assisted this along, and with great browser assistance, and the reality that IE8 sustains it, we could ultimately begin to leave the W3C box model behind us.

Typeface Shorthand

I’ve discussed this before, however exactly what offers with this unit? The six residential properties that could be stated in the font residential property have no company being in a shorthand value.

For the majority of shorthand homes, shorthand is not an issue. You state exactly what you wish, and if any optionals are left out, those are readied to their initial values. So which cares if they’re reset? As an example, anything omitted of list-style or background 99 % of the moment isn’t really receiving anyhow, so never mind if the values are reset.

But many typographic accommodations are anticipated to receive values from a moms and dad. So when you make use of font shorthand, points can get screwed up. And if you’re not acquainted with the property’s complexities, you can be left damaging your head.

In other words, if I state vibrant content on the component, then I anticipate it to be bold, even if I utilize font shorthand.

Yes, we use them at all times, and we’ve increased accustomed to laying out our web pages making use of the only technique we know. Yet the reality is, float-based designs have numerous of the same problems that table-based designs did– albeit not as big, and with better advantages.

The major purpose of the float accommodation is to permit inline content to wrap around a drifted block-level component. Creating pillars utilizing drifts is, essentially, a hack. So like just how we repurposed the

component to create whole web pages, we have actually furthermore repurposed float.

That having actually been claimed, drifts do not have the accessibility problems, upkeep concerns, and efficiency proplems that table-based formats do. So we are in much far better form.

Yet drifts are frustrating. They trigger content to go away. They need clear fixes. They have been at the core of numerous IE margin insects (but that’s certainly additional of a vendor concern, yet hi, this is a rhetoric, right?). And they do not do just what we really desire them to.

Although CSS Regions and flexbox are in the pipe, it will certainly still be a long time just before we have the ability to entirely eliminate float-based formats and their several quirks.


Vendor Prefixes
Does this one even require a description?

IDs as Designing Hooks
Yes, you can still make use of IDs. Yet kindly don’t use them for styling linkeds. Many people still do not agree with me on this. However there is no need to utilize them. A lesson can do anything an ID can do, and with many advantages to boot.

IDs ought to be used practically exclusively for piece identifiers, and for scripting hooks. So you need to still have lots of IDs in your markup, but my assistance is make use of the training credit to specify your styling hooks, and you’ll amazingly see your CSS documents become an enjoyment to collaborate with. And most importantly, you could entirely forget about the issues of specificity.

Vertical Align
This is one of those properties that seems so basic. However it’s not. It could can be found in handy in rare circumstances, but for the many part, it’s not really beneficial.

The one location where it works well performs table cells, due to the fact that it does virtually just what the old valign quality did, so it’s understandable because context.

However when you take into consideration the reality that vertical-align appears to do something completely various inside a table cell compared with when it’s applied to other aspects, well, this makes it among CSS’s true inconveniences.

Collapsing Vertical Margins
Update (March 14, 2012): In the remarks Steven points out a superb point about why breaking down margins are intuitive, contrary to just what I said below.
This idea is very unintuitive, and I don’t know the factor it occurs. However generally, in particular specific situations, if the bottom margin of a block aspect is touching the leading margin of an additional block component, the smaller sized of both margins will break down to absolutely no.

And there’s an entire slew of gotchas and whatnot that aid you to comprehend when this occurs, and when it does not. The good idea is, it normally doesn’t position a trouble. Yet in those uncommon situations, it does seem strange to void, for no noticeable factor, something that is clearly specified by the page author.

Width: 100 %.
Similar to vertical-align, this is one more one of those CSS strategies that doesn’t do exactly what we desire it to do. However, when you know just how percentages work in CSS, it’s not a really tough principle to obtain used to.

When newbies begin making use of CSS and they want a box to fill some horizontal area, their initial reaction is to attempt “width: 100 %”. It seems like it’s visiting cause the component to fill the staying area, and there will certainly be no necessity for calculating the width. However that’s not just what 100 % does.

Percents in CSS are constantly relative to various other settings in your CSS (like a parent aspect). “Width: ONE HUNDRED %” actually does specifically just what it seems like it does. It doesn’t load “ONE HUNDRED %” of the continuing to be room; it packs ONE HUNDRED % of all the area, besides any margin and padding environments.

So this property/value set will certainly typically have unfavorable results, which is probably why it’s not utilized extremely usually.

Perimeter Pictures.
Of all the brand-new CSS3 features, I sense this one will certainly be just one of the most unused and disregarded. I composed a short article for SitePoint to attempt to promote it as a helpful procedure, because the majority of the examples I ‘d seen using border-image were so hideous.

But a growing number of I’m starting to believe that I’ll never ever utilize this accommodation, and if it obtained gotten rid of from the spec, many designers probably would not even notice.

And today, also after composing an entire tutorial on it, and reviewing the entire requirements on that subject, I still can’t code a box with a perimeter image without getting in touch with an endorsement and taking my hair out.

CSS Counters.
Seriously? Does CSS still have these? One more one that I discussed, wishing to discover it much better myself, and wanting to advertise its use. Yet I have actually never ever used it on any kind of project, and I wager I never ever will.

The code is so convoluted and unintuitive, that it leaves us scratching our head questioning “Isn’t this what the component is for ??”.

CSS Remarks.
Advise me again, why I can not do a straightforward single-line remark making use of a dual forward lower? I’m sure it has something to do with the means onward slashes are parsed. But it would certainly be so much simpler if we can comment and uncomment a single line the same way we could in JavaScript, making use of a double reduce primarily of the line.

Double-Colon for Pseudo-Elements.
To separate in between pseudo-elements and pseudo-classes, in CSS3 all pseudo-elements have a double-colon syntax. So instead of:: in the past, you do:: in the past.

As I’ve clarified before, this is nonsense. All web browsers are visiting support the single-colon syntax, practically indefinitely, to follow good style principles.

To ensure that indicates we will not be using the double-colon syntax until all browsers that do not sustain it (consisting of IE8, the present web browser leader) are entirely gone– which could not be for at least 2 or 3 years, and most likely much more.

“CSS: The Bad Components”