Articles tagged with Sass

Hide number input spinners using CSS

HTML 5 number pickers are great, since they help restrict users to the input ranges required in certain cases. Some browsers add little up and down arrows to help the user step though numbers. On some browsers the pickers show by default even when the form inputs are not focused, which is a bit ugly. You can use CSS to turn off the number input arrows. Obviously you want to put them back on focus since they are meant to be there by default.

// Webkit:
  // Hide number picker
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  // Show number picker on focus
  input[type=number]:focus::-webkit-inner-spin-button,
  input[type=number]:focus::-webkit-outer-spin-button,
  input[type=number]:hover::-webkit-inner-spin-button,
  input[type=number]:hover::-webkit-outer-spin-button {
    -webkit-appearance: inner-spin-button;
    margin: 0 2px 0 0 ;
  }

  // Firefox:
  // Hide number picker
  input[type=number] {
    -moz-appearance:textfield;
  }

  // Show number picker on focus
  input[type=number]:focus,
  input[type=number]:hover {
    -moz-appearance:number-input;
  }
  // Note: Example is written in Sass not CSS!
  
Read post... Posted in 'Web development'

CSS best practices

There are a few ways of writing css. For consistency we will adopt only one naming convention. This is lowercase and hyphen separated. It is the most readable and fits well with other CSS methodologies that are covered below.

Yes

.hyphen-separated {...}

No

.camelCase {...}
.underscore_separated {...}
.alllowercase {...}
.ALLUPPERCASE {...}

Specificity

Keep your selectors short and with as low a specificity as possible. A maximum of three classes in your selectors is recommended. Why? Two reasons:

  • Selectors with a high specificity can be time consuming to override
  • long selectors can bloat your css.

Yes

.my-thing { … }
.my-main-thing .my-thing { … }
.my-main-thing .my-space .my-thing { … }

No

.my-main-thing .my-sub-thing .my-space .my-thing { … }

Do not include one or mote #ID’s in your selectors…EVER. It’s too specific. Use #ID with javascript … but not styles.

So you like namespacing with #ID’s? Cool…namespacing is good, just do it with a class instead.

Yes

.my-thing { … }

No

#my-thing { … }

!important is ok in a very small number of circumstances. One example is error messages which always display the same way – red and bold. We don’t have a ...

Read post... Posted in 'Web development'