Search code examples
htmlcssboilerplatecss-frameworkskube-css

Using a css boilerplate within an uncontrolled environment

I'm thinking about using a CSS boilerplate(kube, or any other) to build my forms. They work great in a sample html file, however if I want to use within an uncontrolled environment (meaning that css is included outside my control), it messes up those styles. I would like to know if it's possible to only apply these styles to elements within an parent container (forexample .custom-options)?

Solution

  • If you only intend to use the boilerplate to target forms inside a .custom-options container, one option could be to just make the selectors more specific:

    body.custom-form-page .custom-options input[type="text"],
body.custom-form-page .custom-options input[type="password"],
body.custom-form-page .custom-options input[type="email"],
body.custom-form-page .custom-options input[type="url"],
body.custom-form-page .custom-options input[type="phone"],
body.custom-form-page .custom-options input[type="tel"],
body.custom-form-page .custom-options input[type="number"],
body.custom-form-page .custom-options input[type="datetime"],
body.custom-form-page .custom-options input[type="date"],
body.custom-form-page .custom-options input[type="search"],
body.custom-form-page .custom-options input[type="datetime-local"],
body.custom-form-page .custom-options textarea,
body.custom-form-page .custom-options select[multiple="multiple"] {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1;
  font-size: 14px;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
  border: 1px solid #bbbcc0;
  outline: none;
  padding: 7px 5px;
  position: relative;
  z-index: 2;
 -webkit-appearance: none;
}

    It's not pretty but... the more specific selectors will be given more precedence over wordpress' own styles.

    Try to use !important only as a last resort if you can't get a selector to be specific enough.