I'm using the sass version of the boostrap, and I'd like to know the recommended practice.
I have the original% bootstrap% and I have my personal assets that I believe overwrite those of the boostrap, so I do not move in the boostrap originals.
My question is: is it worth tinkering with the original bootstrap files or am I using it the way I am, does the compiler itself check if the statement already exists and overwrites leaving only a reference in the generated css?
This type of question, in my view, depends on many factors in your project. But like you, I also had this doubt when I started messing with css in the bootstrap. Everything is much easier, but at the same time, everything is so closed, because the styles are fixed and whenever we need to change something, we have to rewrite that css.
In fact bootstrap is an excellent tool, but for example, let's look at bootstrap 'buttons'.
Do you really need all css for them? The pure bootstrap button css has more than 500 lines of codes. And if you need to change something in between, is it easy / viable? Will not it interfere with another type of button (flat, ghost, gradient)? And if you write a code to override this button, will it work? Or will you need a !important further shuffling the hierarchy?
Or an even simpler question to analyze, how difficult would it be to create my own button style?
I, for example, have a sass called _buttons in it I've created my own button framework. I own
This all with a total of + - 100 rows, including alternate states of :hover and :active . In this style I can merge and create the most diverse buttons, sizes and colors.
In this case, it was not necessary, much less advantageous, to have the entire button structure that the bootstrap provides. It would not be useful or easy to maintain apart from the various lines of code I saved and the size of the file: 160kb bootstrap all vs 4kb from my button.scss (or 60kb of the whole project - including much more css);
But in the grid area, for example, the bootstrap has an excellent css! In that case, I also created a sass file called _grid, where I literally copied the whole bootstrap grid and made some minor changes, such as renaming the classes to get the 'face' of my project, but the functionality itself is all bootstrap.
That is, I mixed what was best in the bootstrap (at least for that need, for that project) with what would be more practical for me.
Keeping the two files will require a lot of attention in the project organization, creating classes, not to create classes with the same name, outside the size of the files, as you will get 2 potentially large css files to often overwrite almost which in total the function of one or the other. Aside from that, not all the bootstrap css, such as affix css, helpers, breadcrumbs, etc. are often used.
I recommend that you place an order of need: - Resume of css; - Common styles (grid, alerts, notifications, etc ...); - Modular styles (buttons, forms, pagination, etc.);
And make a mix of what you can create and what is most advantageous to use.
Of course, everything depends on the project as well. Often we have no time, much less budget for this. But I hope I can give you a better north.
