8 ms·

The more web development I’ve done the more I’ve swung back to just writing CSS myself rather than depending on CSS frameworks; I’ve ended up seeing these less

• rimliu 8y ago
  One of the sad realities of the web was proliferation of bootstrap everywhere. IIRC it was intended as a prototyping framework at first. But even sadder is grid frameworks based on the CSS grid popping up :( https://www.youtube.com/watch?v=mDRfFEcj3-Q https://www.youtube.com/watch?v=mDRfFEcj3-Q
  • stephenr 8y ago
    For 'business CRUD' interfaces, choosing something like Bootstrap is a good option. Record lists and entry edit forms etc generally don't need a designers eye.
    • noir_lord 8y ago
      Agreed, That's certainly what I do and how I use it, also BS4 is very modular, you can tear out all the bits you don't use (or comment them out in case you ever do need them) and it's relatively trivial to alter other things (I use a 24-col grid with a 16px gutter width instead of the default 12/30 etc). I could replicate the bits I use from bootstrap using something else or from scratch but the RoI in terms of time invested just makes no sense. I don't think I've ever used bootstrap 'as is' since 2, I generally create something similar to a 'theme' that is layered on top of whatever is BS-current, makes upgrading a lot less painful that way since I isolate a lot of my changes. The big advantage is done right you leverage all the thousands of bug reports to fix things without overly constraining yourself.
  • tomcam 8y ago
    Why is that bad if you have users with older browsers? I have thousands of paying customers with a very wide range of browsers. Why should I make their lives harder by using flexgrid?
• swatcoder 8y ago
  Frameworks are handy for — you know — framing. They’re a helpful scaffold provided your project aligns with their model. This applies to UI framework, app frameworks, whatever. Why do these not “accelerate your work”? Maybe because you’re taking work that’s differently shaped. Maybe original, custom styling is an important part of what you’re selling. That’s great. But it’s not nearly true for everybody. And so a lot of people use frameworks like this to get the styling where it needs to be, so that they can focus on whatever other thing they’re really selling.
• londev 8y ago
  We’ve ended up with our own, not so much a framework but a set of commonly used mixins and set of SASS files - some of which might even be empty placeholders - that stop us trying to work out the same issues over and over. I treat it a bit like adding packages with NPM, just adding the small bits we need to achieve certain things. When I’ve tried to use proper frameworks before they have always been too opinionated and I would find myself working around them.
• ndnxhs 8y ago
  From what I understand CSS frameworks used to make web dev more bareable because you could just use a simple class name and the framework would apply a load of hacks to get something sensible that works in all browsers. Bootstrap always seemed like a polyfil for flexbox.
  • GordonS 8y ago
    Bootstrap 4 now actually uses flexbox
• mfrye0 8y ago
  I've done frontend for quite awhile. I usually start with some sort of framework for every project and use only the minimal pieces for the foundation. Generally you need the same stuff for every site: - reset/normalize the styling cross browser - basic grid system - typography, forms, and buttons - "componentized" files with variables (sass, less, post css, etc) Basically I start with a custom build of whatever framework, use that to build the MVP, then customize it according to the designer requirements. Lastly, I'll pull in components as I need them. Why reinvent the wheel and start from scratch?
  • ryannevius 8y ago
    But is that grid system consistent across different sites? In my experience, I usually need to customize the "grid" to specific breakpoints and widths, as defined by designs/content. I find that it's often faster to just write a few helper classes for layout – specific to the site I'm working on – rather than use 15% of a framework's grid and still do heavy lifting. Of course, this isn't the case if the design team designs with a framework's grid system/breakpoints in mind.
    • franciscop 8y ago
      I made the grid of Picnic CSS very flexible to be able to do that, what do you think? :) https://picnicss.com/documentation#grids https://picnicss.com/documentation#grids In exchange it makes the framework a bit heavy (~10kb), but if you use the CSS these can be modified and optimized as seen here: https://github.com/franciscop/picnic/blob/master/src/plugins/grid/_plugin.scss https://github.com/franciscop/picnic/blob/master/src/plugins... Edit: this is the independent experiment I did before merging the grid system into Picnic, which I think it's still quite cool: https://francisco.io/flexpoint/ https://francisco.io/flexpoint/
    • mfrye0 8y ago
      For sure. Like I said, I usually do a custom build of a framework, then strip out the stuff I don't need. And if it's designed with variables, changing small stuff like breakpoints etc is maybe a few quick changes.
• chvid 8y ago
  I have come to believe the same. Plus I have seen really complex and unfruitful css when a project starts customizing and extending ie Bootstrap.
  • badestrand 8y ago
    I never understood how people could use bootstrap with custom designs. It gives you CSS and JS for so many elements and classes so if you want it your way then half your CSS is just undoing (like `margin-left: 0` or `font-size: inherit`) their styles.
    • mattkevan 8y ago
      If the decision is to use Bootstrap then you have to design with it rather than against it. The defaults are pretty sensible, so as long as everyone - including the designers - understand they need to customise the design to Bootstrap rather than Bootstrap to the designs it works really well. It' a fast way of working as Bootstrap has already done most of the basic stuff, and by making changes in the right places it's easily possible to not make it look like 'just another Bootstrap site'.
• avip 8y ago
  As a "non-fluent CSS user", I find it challenging and frustrating to maintain visual consistency and cross-browser compatibility without frameworks. I totally appreciate the fact it's me being lazy to really learn CSS who is at fault. Think of it like different construction methods - you can build something, let's say the Pyramids, or you can take something already built and beautiful, but is not what you need, and slowly curve Petra inside the walls. Both work.
  • pbhjpbhj 8y ago
    s/lazy/efficient
  • Touche 8y ago
    I think you're probably still thinking about CSS as it was 5 years ago. When you had to do weird hacks to get things the way you wanted them. Modern CSS is much easier. In fact, if you are sticking .row and .column everywhere you are doing considerably more work than just to define a grid layout using display: grid once in your CSS, and then just use semantic HTML thereafter.
    • Chetan496 8y ago
      While the grid and flexbox have made things better, the display:grid is still not supported in IE 11 very well. The grid css model was implemented in IE very early but as the specification got updated, IE remained with a different(older and incompatible) implementation of display:grid. Of course, we can still make display:grid work in IE11 by some additional work. But this is an additional overhead. Flexbox has very good support and consistent behaviour in all major browsers and for most of the time we can use flexbox model. With some learning for using flexbox and grid I could appreciate their utility. (though I do not use CSS regularly) The state of CSS is very much improved and these days we don't have to depend on hacks like the float and clear in CSS. But, minor problems like the inconsistent behaviour of display:grid in IE 11 - make the need for a CSS framework relevant.
      • grouchoboy 8y ago
• bufferoverflow 8y ago
  What, not even SASS/SCSS?
  • osdiab 8y ago
    I don’t really think of preprocessors the same way as something like this library or bootstrap, that provide specific prebaked components and layouts
• nicoburns 8y ago
  You might like inuit.css. It's a SASS framework that only includes helpers and an overall structure (no actual visual styles). I use it for all my projects. The most useful bit is that it allows you to choose a line height and then gives you padding varibales based on that, so it's really easy to have consistent padding everywhere.
• Vanderson 8y ago
  I find the critical difference is length of time committed to a project. For my core business interfaces I use my own framework developed and refined over many years. For front end website development I just recently gave up and decided to use Bootstrap. (not implemented yet, just decided it recently) Mainly so that any web designer can jump in on the site and be productive with it, not just me. I don't want to use my personal framework for sites that others will have to work with because onboarding is too much work for them and I am constantly improving my framework. But for my own work you couldn't pay me enough to use someone else's framework.
  • cies 8y ago
    > Mainly so that any web designer can jump in on the site and be productive with it, not just me. This is why I think CSS FWs (but also web FWs) are often preferred. At some point a large'ish team should be able to dive in to the project, get some shit done, and more on to other work. This get reeeealy hard without a high degree of standardization. FWs are primarily a means of standardization for me.
    • Vanderson 8y ago
      >At some point a large'ish team should be able to dive in to the project... FWs are primarily a means of standardization for me. I don't work with a large team internally, but externally I do. Every website built using my platform has potentially multiple people editing it. Also, wouldn't you consider long term support just as important as team size? As much I don't like other people's frameworks, the more common the framework the more history of support online and ease of finding someone who can fix/upgrade it later. At least that is my assumption moving forward with Bootstrap. Anyone else have feedback on supporting Bootstrap sites long term?
      • mattkevan 8y ago
        This is exactly why Bootstrap is so useful. As it's so well used and known there's generally a solution out there for any weird problem you might have, and any developer can pick it up and be productive immediately. Yes it's big, and to get the most from it you have to design for it from the start, rather than make it fit whatever the design is. For a large web project I'm leading, we're using Bootstrap 4 with our own styling, but at every step from information architecture through to front-end we're using default components and variables wherever possible. It definitely makes things faster, more convenient and maintainable. It's like using a well-known content management framework like Drupal instead of a home-brewed CMS built in Racket* or something. Drupal is boring, heavy and overkill for smaller websites, but it solves common problems for big websites really well, has a huge library of contributed code and is well understood by lots of people. The Racket site would probably be more fun, faster and cheaper, but a nightmare to maintain three years later when all the original team members have left. * Not knocking Racket, I love Racket. Just picked it as an example of something more obscure than Drupal.
• Waterluvian 8y ago
  A lot of my projects are UIs for robotic hardware manipulation and monitoring. The style is one of the lowest priority items. I love libraries that are just pre styled components in a box. I usually only have to use CSS to adjust their positioning and size. When the occasional project comes along where some misinformed decisionmakers decide that the UI needs to be sexy, then it's vanilla CSS or maybe SASS time.
• franciscop 8y ago
  I'm the author of one of these independent CSS libraries that has been in the front page of HN several times. I normally use the libraries I write quite a lot, and it speeds things up for myself. This is mainly because of the deep knowledge I have for them, but if other people find them interesting so let it be. Why would still make sense for skilled teams like yours? I can think several reasons: - Prototyping: Probably not everything you do is detailed development and you might want to throw a quick prototype with not-too-bad styles. It won't be groundbreaking, but the ROI of using a CSS framework for those normally pays off. - Cross-browser testing: an open source library will get bug reports from many varied places, and normally it's well tested cross-browser. Do you know about all of the flexbugs [1]? Do you even want to know? What about the 2012 trick of Paul Irish for box-sizing [2]? Did you know it was updated in 2014 and how awesome this update is? - Documentation: when onboarding a new member on the team, if you are using one of the more popular libraries there is a large amount of documentation, github issues, stackoverflow questions and general articles on the web. While you might put the work to do this internally, even with great teams the internal documentation is normally very much worse than the OSS docs. - Other topics such as accessibility (color contrasts, keyboard states, etc) are normally polished in the libraries. It's not free, it comes after bug reports. For these reasons it doesn't make any sense that an experienced team build the whole CSS utilities from scratch for each project. So the only sensible thing as a company is to reuse some of the CSS through projects. Then you got an internal library! Why not open source it? You got one of those! Just look at the CSS [3] of "simple button" of my library, which already inherits half the style from a label. If I had to do buttons from scratch I'd forget at least 2 of those: the cursor pointer (because most links with .button would have it naturally, but not those with events and without href!) and the box-shadow to 0 (which only happens in some obscure combination of browser, device AND resolution). I just offloaded that knowledge long time ago into my library and now I focus on improving on other things :) [1] https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs [2] https://www.paulirish.com/2012/box-sizing-border-box-ftw/ https://www.paulirish.com/2012/box-sizing-border-box-ftw/ [3] https://github.com/franciscop/picnic/blob/master/src/plugins/button/_class.scss https://github.com/franciscop/picnic/blob/master/src/plugins...
• cptskippy 8y ago
  While I share your sentiment about frameworks, I work in enterprise app development and I can't remember the last time I encountered someone else who had a firm grasp of CSS or even the Frameworks. Our organization adopted Bootstrap because it's a consistent and familiar framework and it takes less time for the inexperienced developers (most in my experience) to come up to speed on an app. When you have 20 developers rotating responsibilities between 40+ apps with regular turn over and contractors cycling out, have consistent project setups and standard frameworks across the organization is essential.
  • zerkten 8y ago
    Out of interest, would a firm grasp of CSS be a benefit, or merely neutral compared to other developer skills when you are recruiting?
    • epicide 8y ago
      Not OP, but I'd say a willingness and proven ability to learn far outweigh any particular tools. Proving ability to learn does require past experience, of course. I think it helps a lot more to show that you understand styling principles (reusability, selector precedence) than it does to be able to make pixel-perfect implementations based only on knowledge off the top of your head. [0] That being said, in order to have that understanding, you probably need to have some experience with CSS or similar. Basically, hands-on CSS experience is the means not the ends. [0]: Perhaps all of this is what you meant by having a "firm grasp of CSS".
    • cptskippy 8y ago
      It depends on where that developer was slotted in. We currently have ~3 dedicated front end developers who have limited skills beyond HTML, CSS, and Javascript who maintain our large forward facing public presence. The remainder of our developer pool are full stack developers who maintain a myriad of internal systems and apps used to run the business. A few of these apps are publicly accessible but they're niche and don't require strict adherence to brand or accessibility standards. The remainder are simply internal applications. A firm grasp of CSS would seem to be essential to the front end devs, though I might be inclined to say it's not given some of the code I've seen. I am however willing to give them the benefit of doubt because I know they're a newer team that inherited an unfathomably large site running on an ancient CMS (Stellent) and the new products they're working on are integrated with some pretty heinous 3rd party platforms. For the remainder of our Devs usability and appearance take a back seat to functionality. So CSS chops are more of a nice to have.
• nathan_f77 8y ago
  I've been writing my own CSS too, but the problem is that my site looks really awful. I'm not a good designer, so I'm going to rewrite my front-end using a CSS framework that has great components and a nice design out of the box. It's really great for people like me who need a few more "guard rails" to keep things looking alright.
• g105b 8y ago
  As far as I can see, people who know a client-side language well do not need to fall back on a framework, as the languages these days are more than capable of completing the tasks themselves, without being reimplemented by a framework over and over again.
• Raphmedia 8y ago
  > But I keep seeing frontend frameworks on HN They are very popular on HN because the main users here are not front-end engineers or designers. They are hackers who want a quick landing page for their project. Those quick and dirty frameworks are perfect for it.
• thex10 8y ago
  > am I/teams like mine that include at least one person fluent enough in CSS to write reasonable style sheets/styled components, just not the target audience? I think this is only partly correct. I am an experienced front-end dev who is very CSS-capable, but I enjoy using Bulma[0] as of late because its default styling is very close to what I want already. The default style works well enough for me because the projects that I work on (prototypes, experimental stuff) generally don't involve or need custom designs. Edit: However, I work mostly alone... back when I was on a larger team working on different stuff, we'd usually use Bootstrap. In my experience most Bootstrap users don't even know how to use Bootstrap well though... [0]: https://bulma.io https://bulma.io