Bootstrap: Your CSS is deeply flawed....

[EMStokely]

There are a number of BAD CSS styling issues in Bootstrap that have now become apparent as Ive looked at it in depth. Ive been designing cross-browser CSS since 2000 (15 years) and I had assumed your team understood the long history behind good style sheet design(?) Maybe not....

Please review this small sample of what I see in your codebase:

1. Why are FONTS in pixel units??? That’s the number one NO-NO in CSS design classes! When you lock a font in pixels you automatically prevent scaling in many user agents. Users may be able to "zoom" but thats not the same as users who set font-size, use custom style sheets, or have very very large DPI screen where pixel-based units shrink fonts to almost nothing. This is the FIRST thing we learned in creating good flexible font-sized HTML structuring as well.
2. Why are FONTS not in EM units so users with zoom or text resizing enabled users can see larger fonts automatically when scaling??? Instead you are using pixels or percentages which again, are not consistently interpreted by various user agents when zooming. This locks fonts in with unreliable zoom controls that are vastly different in different displays.
3. Why are PRINT style sheets not available and designed with FONTS in points? There are hundreds of printer types and most wont know what a pixel font size means. Interpretation is vastly different between them. POINTS is how printers normally process print style sheets. Without a print sheet in your CSS your pages are basically a MESS and unprintable as well. Your CSS structures and div's should also be designed around FONT SIZE like EM anyway, so when you create a print CSS sheet, you simple override the FONT SIZE for the page in points in one place. Your whole page can then be zoomed in print preview. Did no one on your team understand printing in CSS and how to design web pages that are also printable?
4. Why are you setting block level elements in pixels??? Another NO-NO in CSS as you dont know what zoom or DPI a given device is at. Again, you should be setting width and height in either auto, percentages, or tied to the font size settings (em units) so the web page grows like a balloon to match screens sizes and zoom settings. Older people often have made changes to fonts in iPhone or web browsers, which then require all the font AND the div's resize with the font size. by hard coding in pixels, youve locked down everyone to rigid sizing so future devices now wont look good. By using EM units for relative font sizing, people on really large screens, for example, where there are many pixels per inch, suddenly get the EXACT same layout and increased margins as say an iPad or tablet.
5. Why are you setting margins on div’s that can have 100% width? NEVER set margin on any structure unless its outer parent has auto width. Doing margins on HTML structures forces the design to “break out” of the parent, overflow, or worse hide content if the parent has say 100% width or borders. Ive seen all your forms and controls now overflow parents because if this. Again, you are adding stuff you dont need. If you STRIP AWAY all that CSS the browser naturally fits all those structures into the web page without any styling. Add all that stuff just destroys the natural display of the native user-agent content layout. Its pretty bad when a web page with NO CSS looks better on multiple devices than one with stacks of CSS added.
6. Why is Bootstrap using so many floats? When you use floats, you break out if the content flow pattern. Floats should be used very very cautiously for a few rare structural pieces or images. Doing so forces those items to break out of the normal inline flow. To recapture that box model you have to add HTML that clears the float. CSS is not designed to provide markup to solve that that so your solution managing floats is often incomplete. You are then forced to clear all or add dummy breaks so the floats dont rip through parent div’s. Bootstrap doesnt tell these kiddos that so their content blocks break through the parent and cause scrolling issues in various devices. With the margin and pixel issues above, your overflow problems are now enhanced. Again, the box model is not designed to use floats for managing structure. That should be on a block level basis.

This is just the beginning of all the bad CSS I see. Im hoping as the web matures we don't keep going back to 2001 to revisit web issues we solved 15 years ago kids today are recreating. I think the term is "reinventing the wheel"......lets get some training and move CSS forward not backward as its a huge waste of time to bolt on these API's and frameworks to then find they are using old-fashioned solutions developers solved 15 years ago. :)

Mitchell

[rafalp]

Posting points in condescending tone from throwaway account named "Go Back to Drawing Board" is dicky thing to do, especially when you are most likely talking about BS3 thats few years old release, being oblivious to great deal of work that happened for 4.0

[patrickhlauke]

Why are you setting block level elements in pixels??? Another NO-NO in CSS as you dont know what zoom or DPI a given device is at.

CSS px changes in line with zoom. if you define something in px and then zoom your browser to 200%, the browser's internal mapping of CSS px is also multiplied accordingly.

and CSS px are also independent from device pixels. if you define something in CSS px, it will look be rendered the same physical size on two devices with the same physical dimension of screen, even if one device has a low dpi and one has a high dpi, because it takes into account device pixel ratios. on the higher dpi screen, physical pixels are distinct from CSS px.

beyond that, thanks for your oh so valuable contribution.