3 ms·
The box-sizing property is actually very useful for when you want to reserve space in a percentage sized element with different sizing units. For example (in S
by goldenkey 5y ago
The box-sizing property is actually very useful for when you want to reserve space in a percentage sized element with different sizing units.
For example (in SASS CSS):
.container {
$footer-size: 2em;
box-sizing: border-box;
height: 100%;
padding-bottom: $footer-size;
.footer {
position: absolute;
bottom: 0
left: 0;
height: $footer-size;
}
}
Otherwise, one would have to use calc() which isn't supported in older browsers.
- jraph 5y agoAbsolutely. By the way, it seems many frontend developers generally prefer box-sizing:border-box, and Bootstrap sets it for all elements by default. Which can be a little disturbing when you don't know it, work on a project that includes bootstrap and you expect content-box. Fortunately, browser dev tools are good at telling you what is going on.
- goldenkey 5y agoThanks, I wasn't aware of this disparity. I handwrite my CSS, been doing it for 21 years now. If I was to use Bootstrap or Tailwind, I'd likely use @extend and @include to compose my own classes. A long time ago, I read an article that stated, with authority, that Bootstrap was being misused. That class names like "font-weight-light mt-4 text-white" should instead have been replaced with "subtitle" with CSS: .subtitle { @extend .font-weight-light, .mt-4, .text-white } The article resonated with me. This approach avoids mixing HTML/CSS concerns and also avoids polluting the CSS namespace. Even if tree shaking and css pruning is applied, I believe this approach would win out in performance for having less classes. I would be wrong if there are tools that will run through HTML and CSS and transform the long bootstrap class attributes into consolidated, shared classes. Global classes, like in Bootstrap, also violate web component encapsulation. Global CSS classes are kind of like global variables in programming languages (like PHP.) Sure, they work and used to be common, but we've since moved on to closures and scope containment for performance and reliability.
- jraph 5y agoI thought this when I first encountered Bootstrap, and it is still my opinion today. I think class names should convey intent and meaning, not the look. I'm glad someone wrote on this. People seem to like bootstrap, but it seems with bootstrap, not only you have to master CSS, but also bootstrap, while without it you only need to master CSS. I'm also used to hand write CSS and I'm a bit at loss when I need to use such CSS frameworks. It seems that some people find it easier to deal with CSS with Bootstrap (including people who don't really like CSS), but haven't really understood this to this day. I know the default behavior of a web page pretty well, but as soon as bootstrap is there, this knowledge is partly gone and my assumptions are broken. It just makes my life a bit harder. This would be fixed by learning Bootstrap properly but I just don't see the appeal, especially that I noticed defaults that I don't like (the sizing for headings for instance). It does not seem to solve a problem I have. It does provide interesting components like popovers though.