Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I am working on a large team project that has react-bootstrap 1.0.0 as well as bootstrap 4.3.1's css+js. Some developers prefer using react-bootstrap components, while others prefer styling elements with bootstrap classes. So we've ended up with two different styles of code:
<ListGroup>
<ListGroup.Item>
Cras justo odio
</ListGroup.Item>
vs.
<ul className="list-group">
<li className="list-group-item">
Cras justo odio
</li>
What obstacles might we encounter by continuing this way?
One issue I see might be upgrading react-bootstrap or bootstrap in the future. Since react-bootstrap depends on bootstrap, upgrading one would require upgrading the other at the same time. This means following two migration strategies at once.
The answer could vary depending on who you ask, but I would suspect a large majority to agree that it is a bad idea. There really is no such thing as "just being inconsistent." A lot of the reasons why this should be avoided boils down to the fact that something, somewhere is inconsistent. Here are a few examples:
Cross-Library Interactions - The biggest reason in my opinion is that Bootstrap is a DOM-manipulating JavaScript Framework, and React is a JavaScript UI Library. In order words, it's possible for Bootstrap to unexpected modify React components, resulting in unintended side effects. Imagine using jQuery to manipulate your React components. With Bootstrap, that's effectively what you're doing. React Bootstrap was built to replicate Bootstrap with the JS implementation was rebuilt from scratch, but reuses class names that can be targetted by the core BS JS.
Speed/Performance - By including both Bootstrap and React Bootstrap, you have two dependencies that serve the exact same purpose. Regardless of how small it may be, you can save a few extra bytes by dropping one of them.
Maintainability - If your application needs to be updated, you either need track down someone with that particular expertise or have someone learn that style anyway. Even if all your developers are familiar with both styles, it gets confusing having to switch between two different mindsets.
Expectability - Which parts of your application uses which style? How do you know? How would a developer know when they need to switch styles? Rather than have it be a coin toss on what to use when, it's easier for everyone if the entire application was consistent.
Hiring/Training - In any team, let alone a large one, people come and go. So should you ever lose a developer and need to replace them, this is an extra factor to consider, whether it be in the hiring process itself or (more likely) part of the training.
Your React-Bootstrap components and your JSX with Bootstrap classes will be styled by the same CSS file. RB doesn't include any of its own styles and requires you to use Bootstrap's CSS. No double migration necessary there. If you update or replace a stylesheet it will affect both of your code blocks.
React-Bootstrap also doesn't use Bootstrap's JavaScript, but its own reimplementation. That means attaching Bootstrap's JS shouldn't affect the function of RB components and that it would be necessary if you wanted to use Bootstrap's JavaScript behaviors in the second version of your code.
Info here:
https://react-bootstrap.github.io/getting-started/introduction/
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 10 months ago.
Improve this question
I wanted to develop a large-scale web application using Tailwind CSS.
Is Tailwind CSS suitable for large-scale web applications?
& Tailwind CSS worth investing time and money, or should I go with Vanilla CSS or another UI framework?
In my case, I have a design system and extensive database records, and I will need to use Animations, Drag & Drop ..etc. to build my SaaS product (Dashboard Builder).
I am looking forward to your guidance.
Just offering some counter points to these answers saying don't use Tailwind:
Setup properly (eg. using webpack/postCSS, not just pulling in a .css file from a CDN), you actually have a lot of control.
You can use a tailwind.config.js file to configure almost all aspects of the CSS - setup new colours, spacing, enable/disabled hover/focus effects etc. Once this file is setup correctly for your design system it is very easy to create a consistent application.
Tree shaking is built in by default - on running a production build your bundler will scan your code and strip out any classes which aren't used, resulting in the smallest possible file size.
It comes with a bunch of functions, mixins and helpers where you can create your own classes if need be - while keeping it consistent with default tailwind classes.
Another big one is that any future developers working on the project won't. have to learn your CSS system, they can read Tailwinds well-written documentation and know how to use it fairly quickly - if they don't already.
It's been tested by thousands of developers worldwide, so it covers a huge amount of edge-cases and browsers quirks you might miss if you're building your own system. A lot of developers think they can build a better system but that's not always the case.
This isn't to say it's right for your project - there's only really you who can weigh up whether having absolute control of your styles is worth losing the time saved using Tailwind - but a lot of the regularly thrown out negatives of Tailwind (file size/control/'need lots of classes') are not really issues if setup correctly.
I wouldn't recommend in your case. TailwindCSS should not be preferred if you have a design system at hand. Your code will get messy when you try to apply tailwind classes conditionally. You can work around this by using selector utility functions to decide which classes you'll use. I would prefer something like SCSS or a UI framework.
In my experience, Tailwind is useful for rapid development - for when the priority is speed rather than extreme customizability. There is also rather a learning curve to be proficient at creating good pages with tailwind (outside of copy-pasting existing components).
For a large-scale application in the space of a "dashboard builder", I'd think that there'll be lots of custom-designed components, so I personally wouldn't use Tailwind.
I have something on my mind for quite a while but couldn't find an answer to it. Consider the following:
You like to build a fancy website with React and have to decide which front-end framework you should use. In my example I have chosen Material-UI.
Now you came to a point where you need more features like a responsive grid system, show/hide styles etc. Instead of implementing them on your own (or copying it from bootstrap/foundation, for example) you think: 'Hey, why wouldn't I include another framework beside Material-UI'.
Now comes the question. I know that most of the css frameworks available have their own normalisation css and basic styles for typography and other elements.
Can I safely include another (more featured) css framework beside Material-UI without breaking fundamental things or should I avoid that?
Furthermore, what is a good practice approach to extend the css features without copying parts from other frameworks and without reinventing the wheel all the time. Did you ever had a case or project where you had to combine multiple front-end frameworks and how did you solve this problem?
Thanks for your feedback.
Cheers
Gregor
FYI, there's a Material Design version of Foundation, you can check it out at http://eucalyptuss.github.io/material-foundation/
Now, talking about your doubts... one should be very careful when mixing and/or using more than one framework at the same time... one issue can be conflict, other can be unnecessary bloating which could make load time heavier.
However, if you are aware of that, most of modern frameworks (as Foundation) can be compiled partially, so you will be loading only the stuff you'll use, minimizing all possible issues.
Have been thinking this exactly thing lately.. I would choose one that has most of the features i need in my project. I usually go just with Bootstrap (sass version) and use only the styling part of that (css grids mostly).
Mixing frameworks will eventually be hard to maintain and you have to include lot of extra (unused) features into your application. When using some "cool", full featured components like Material-UI has, there will still be times when some component doesn't have just the property you would need.
So my opinion is:
Use some framework for styling only. This way you have uniform look in your site. Or even just some responsive grid library could be enough.
Usually basic html components are enough to fill basic needs, you can just build your own custom components for special needs (or use some from npm library). This way you have just the features you need.
This way my site is not depending just some single framework. I can change the styling part anytime, i can change one component to another etc. without having to re-write my whole application just because it's been developed entirely with some "full featured" framework.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 7 years ago.
Improve this question
EDIT: While my specific issue is due / relating to the Twitter Bootstrap
system, the solution I am looking for does not need to be Twitter
Bootstrap specific, but more a solution for any CSS style sheets.
I am starting to explore the world of Twitter Bootstrap for a current project I'm working on. I am using Bootstrap 3.3.6
The Issue (why I have the problem below)
The basic Bootstrap CSS file is 6760 lines, as well as additional files for adding my own custom CSS to the site. In total this gives that the site for each page loads ~8700 lines of CSS (unminified).
But the rules applied to the website use only ~700 of these lines. That's a massive overhead for each page, and even with minifying the CSS into the .min.css format this is still a huge percentage overhead.
I am looking for a way of reducing this overhead without removing any of the used rules from the CSS files.
What I've tried (And why it didn't work or is impractical)
I have previously used with great success the Firefox Dust-Me CSS refiner which can identify all unused CSS rules in a page, or even on a whole site.
This is the sort of thing I want, but it has two serious drawbacks:
It only retains CSS rules that are used on the page for the device/media that is used (so for example, it tells me that all the rules in the IE10 viewport bug workaround CSS file are not used because I'm using Firefox browser rather than IE10). It also does not take into account media query specific rules.
The other main drawback for using Dust-Me (specifically, but other similar programs I've found have a similar shortfalls) is that while it will tell me which rules are not used, it doesn't give me an ability to copy/paste the used CSS from the source files.
I have also looked into a few other CSS spare rule removers and the Google Chrome Developers Audit which is useful, but does the same thing, listing in text format the unused rules, which is barely half the job I am looking for.
The Problem (Why I need your help to solve this)
So I am in a position I have a Google Chrome Audit that tells me that 88% of bootstrap.css and 65% of bootstrap-theme.css are unused. These unused elements are listed in text format, and there are hundreds of them. currently I can only see that I would need to do find/replace on each one, removing them [the rule identifiers] from the source before then going through the CSS file and removing all the commands that no longer have any rules.
So I am asking this:
What is the best method or approach for me to read the CSS from a whole website, and
return only all the CSS rules that are referenced in the site, so rules that
are not referenced are not returned to the operator?
I can then take the output from this function and then minify it and save the massive CSS overhead of bootstrap.
Or, is there a completely different way of doing this I've not considered?
Additional:
I have read How to remove unused styles from twitter bootstrap? which is similar to what I'm asking, but the correct answer here references some sort of Bootstrap selection where I can choose which styles I take from the Bootstrap. This is dated 2013 and seems to refer to Bootstrap version 2.
Also, I do not use Grunt and am unfamiliar with Less. Sorry :-/
You can customise the components that are compiled at http://getbootstrap.com/customize/.
This way you will have a smaller outputted file but all dependencies will be met.
To get even finer control you can use the source .less files to compile only the components you want.
You can use unused-css.com which takes an URL as input, which is what you asked for.
I have already built a site using CSS. Now looking back I regret not taking the chance of using Bootstrap. My website is already built and styled. My questions is, is it possible to use bootstrap even though you already have styled you website without having to remove all the CSS?
Bootstrap uses a set of pre-configured classes to implement it's styling rules..
So unless you somehow incorporated the same class names in your site and intended the same styling as was intended by the Bootstrap developers, you are going to have to make the necessary changes on your own.
That said, if your project is intended to be extended in the future, it may still be a good idea do re-work what you did up until now with Bootstrap, in order to save time in the future (I am assuming that the project is not very large in scope).
There are few things you need to know:
Bootstrap uses box-sizing: content-box so if you are not, it will probably impact all your padding/border stuff.
Bootstrap comes with a reset and few helpers with generic names that can interfere with your own style.
That said it's totally ok to add bootstrap to your project and it should be smooth.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I've recently started on a large multi-year client project, and the first phase of front-end development is creating a pattern library to use across the project. I'm using Compass and Blueprint for my grid. The #include blueprint-grid mixin looks perfect for this project: it'll automatically generate semantic classnames (i.e., .span5) that the rest of the team can reuse across all pages.
However, the Compass documentation states:
Best practices discourage using this mixin, but it is provided to support legacy websites and to test the sass port against blueprint's example pages.
Why is that? Why is there a push to use non-semantic classes in modern grid systems? It seems less DRY to create a new CSS class for various page elements that will all share the same grid widths. For example:
.dashboard__chart {
#include column(6);
}
.dashboard__news {
#include column(6);
}
when I could simply just have a .span6 class to apply in my markup.
This may be situational: the non-semantic classes make sense if your entire project has a similar layout throughout (e.g., a news website or blog). However, this dashboard/reporting tool project has somewhat differing layouts throughout every page.
So back to the original question: why is it best practice not to use semantic classes, and what's the best way to avoid them?
it'll automatically generate semantic classnames (i.e., .span5)
I don't think that "span5" is a semantic name in that it doesn't describe the content at all but describes the layout in a fairly specific way.
Of course, the term "semantic" is thrown around a lot, but in its purest sense it should have little or nothing to do with presentation.
Reasons not to use names which describe presentation:
If the layout changes, the name is wrong
The layout may be adapted to for a different device for which it is wrong and/or meaningless.
The markup has less meaning to anyone reading it (i.e. your team)
Layouts can become brittle; changing one class that has been used in many different places and with many different meanings may break in some places in which it is used.
The biggest downside to generic classes like "span6" is that they are abused (I've seen this with Bootstrap, which has similar grid classes defined). "I need this element to span 2 columns...great! I'll just slap a 'span2' class on it and be done!"
This doesn't mean that you shouldn't look for reuse; but that reuse can come from class names that are related to the content (admittedly, this can take some effort) and through the use of mixins.
I've recently started on a large multi-year client project, and the
first phase of front-end development is creating a pattern library to
use across the project.
Most projects end up with exceptions/compromises for the sake of practicality, but you have the opportunity to start with a best-practices approach.