This may be a matter of personal preference, but I’m new to LESS and not sure if there is a best practice on this.
When modifying a theme, should you avoid editing the individual .less files and anything that can’t be changed via variables.less should be defined in app.less?
I’m going to use a very basic example:
The .navbar has a 1px solid border and it’s defined in navbar.less. If you wanted it to be 3px, would you just edit the border property in navbar.less, or would you put your change in app.less and let it override it?
Again, I understand this may be a personal preference thing, but I just wanted to get other’s opinions. Does it really only matter if you plan on updating the bootstrap less files in the future?
Some people will never update the other files so they have the option to update Bootstrap in the future. Personally, it really depends on the site. For a small business type site where they won’t be doing lot’s of updates with me, or probably anyone really, I’ll go ahead and modify the Bootstrap files.
If it were a bit larger site, or one that I wanted to keep better updated, including Bootstrap, I would probably avoid editing those files. it’s hard to say what “best practice” might be though when you’re talking about start themes and frameworks. Even though they’re nice to update, they’re often used as a base, and thus need a good amount of editing.
Many web apps use a PHP framework like Symfony, Laravel, etc. Oftentimes though, they are the base, and are added and built upon. It makes it difficult to upgrade, after so much modification, you probably only need to update sections you know you could use anyways.
There’s a section on customising in the Bootstrap docs. It only covers overriding styles at the moment but I’m confident they will cover editing .less files and mixins in due course.
Personally, I think you need to use all three depending on the situation, but the most important thing is to commit logically and often.
@kalenjohnson is correct that it depends on the site/use case. Being able to update Bootstrap is nice, but not really feasible for anything that’s heavily modified. Also keep in mind that if you always re-define things in your app specific LESS files, it’s going to lead to a bigger CSS file in the end. Bigger CSS = higher load times.
Thanks for the thoughts guys. I really appreciate this forum.
I think for most of my projects I’ll just edit the specific .less files. The sites I’ll be building for work will be smaller in size and I will be the sole creator and ongoing manager of them. If something of larger scale comes along, I’ll reevaluate my plan.
Just my 2-cents worth - i used to edit all the LESS files, but found I would get lost when lots of changes were made. I now only use app.less and variables.less and work a lot faster. My clients are small-medium businesses, so increase in load time is negligible, and by minifying content and using a CDN, tend to not really see much difference in speed.
I’m just weighing in to join the community, but I would normally either:
Create a variables.less file and copy paste the styles from the bootstrap/*.less files I wanted to override.
Start each project with my own variables.less folder and manage most overrides in there.
After reading the post from @Foxaii about customising bootstrap, I’m a little inclined to create custom classes.
Last 2 cents
Someone wiser than me once said “maintainability” and the moment he said that - I wanted to refactor all my code to best practice (and have done so as much as I can since). The thought of someone else having to deal with my “this is how I did it” code philosophy, made me change my ways for the better.