1
I am using the Sass version of boostrap, and would like to know what is the best practice.
I have the assets bootstrap originals and have mine assets personal that I believe overwrite the boostrap ones, so I don’t touch the boostrap originals.
My question is: is it worth going through the bootstrap’s original files or me using the way I am, the compiler itself checks if the declaration already exists and overwrites leaving only a reference in the generated css?
2
This kind of question, in my view, depends on many factors in your project. But, like you, I also had this doubt when I started dealing with css in 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 analyze the bootstrap buttons.
You really need all the css concerning them? The pure css of bootstrap buttons has over 500 lines of code. And if you need to change something in the middle, is it easy/feasible? Won’t it interfere with another type of button (flat, ghost, gradient)? And if you write code to override this button, will it work? Or will you need one !important messing up the hierarchy even more?
Or else an even simpler question to consider, how difficult it would be to create my own button style?
I, for example, have a Sass called _buttons on it I created my own button framework. I own
All this with a total of +- 100 lines, including alternative 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 wouldn’t be useful, easy to maintain, apart from the many lines of code I saved and the file size: 160kb of the entire bootstrap vs 4kb of my.scss button (or 60kb of the entire project - including much more css);
But in the grid area, for example, bootstrap has excellent css! In this case, I also created a Sass file called _grid, where I literally copied the entire bootstrap grid and made some small changes, such as changing the class name to get the 'face' of my project, but the functionality itself is all bootstrap.
That is, I mixed what was best in 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 organization of the project, creating classes, not to create classes with the same name, outside the size of the files, because you will have 2 potentially large css files to often overwrite almost in total the function of one or the other. Besides, it is often not even used all the css of bootstrap, like affix css, helpers, Breadcrumbs, etc..
I recommend you make a necessity order: - Resete de 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 more advantageous to use ready.
Of course, it all depends on the project as well. Often we have no deadline, much less budget for it. But I hope I can give you a better north.
Browser other questions tagged css twitter-bootstrap bootstrap-3 sass
You are not signed in. Login or sign up in order to post.
It would be for example, you import all the bootstrap style but use your own css to style the buttons?
– celsomtrindade
That, only instead of importing the css from the BS I use the version
sass– Alan Rezende
But are you already getting version 4? Or still on 3? I just got confused by the part that says you’re using Sass, which only has version 4.
– celsomtrindade
BS in Sass already exists in version 3 a long time http://getbootstrap.com/getting-started/#download
– Alan Rezende
humm.. Good to know. I’ll see if I can analyze well to elaborate a response.
– celsomtrindade