Someone help to make elements and style it!

Like what to set for input tag for example what is no need because will set default with then what set with on class? What is main property what need to set on input and not on include with a class?

Like

input
{
padding: 20px;
color: red;
background: green;
}

.input
{
margin: 20px;
text-transform: uppercase;
}

So witch one can set on default tag and other only with class? I saw many times both way but its looks so horrible! No idea what write and where! You not think? Like margin padding font and etc is need for input without class but then what need for extra .input for extra style???

Thanks!

I don’t think it really matter much how you do it unless you have a very large site to maintain, or lot of unique inputs, or on the off chance that you are making a CSS framework.

Here is how Bootstrap does it.

/* _forms.scss form-control class */
.form-control {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

/* _reboot.scss normalize/defaults */
button, input {
  overflow: visible;
}
button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
1 Like