How can you change the default width of semantic-ui sidebars?

Question

Semantic-ui sidebars are 275px wide. Where should I add the css/js which makes them wider or narrower?

Their code is

.ui.sidebar {
   width: 275px!important;
   margin-left: -275px!important;
}

If I modify this, then the change is global for all the sidebars. If I change their content's width, semantic-ui ignores my change and overrides it with the default 275px.

You can find the sidebar example here: http://semantic-ui.com/modules/sidebar.html#/examples

Answer 1

One way to do it is to just add a new class:

.ui.custom.sidebar {
  width: 315px !important;
  margin-left: -315px !important;
}

.ui.active.custom.sidebar {
  margin-left: 0px !important;
}

.ui.active.right.custom.sidebar {
  margin-left: -315px !important;
}

Answer 2

To quote MDN: "Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets."

"Always look for a way to use specificity before even considering !important"

I would recommend using specificity to solve this problem, not !important as it is considered a bad practice. Assuming these styles are being applied to a div you can be more specific like this:

div.ui.sidebar {
   width: 275px
   margin-left: -275px;
}

Answer 3

Change max-width to a bigger value instead of the default one in your css.

max-width: 1000px !important;