Today I Learned - Rocky Kev

TIL CSS Specificity

POSTED ON:

TAGS: webdev css

Least to Most Specific

element: h1, div
attribute: class, attribute [type="input"]
id: Higher. can cause trouble for styling.
!important: this means that there's a bigger problem with your css.

Specific based on apply order

Comparing Elements together

h1 {
  font-size: 1rem;
}

// this will apply because it's lower in the file
h1 {
  font-size: 2rem;
}

Comparing Class Vs Element

.header {
  font-size: 2rem;
}

// this is ignored, since .header is a class.
h1 {
  front-size: 1rem;
}

Comparing Class VS more specific Class

// this is ignored. This is 1 level of specificity.
.header {
  font-size: 1rem;
}

// this is applied. Because it's 3 levels of specificity.
.wrapper .container .header {
  font-size: 2rem;
}

Related TILs

Tagged: webdev

TIL Content sectioning

Content sectioning or landmarks, like sidebar, content, footer. You know, like better names.

TIL php-fpm

PHP runs as a separated service when using PHP-FPM. By using this PHP version as language interpreter, requests are processed through a TCP/IP socket; so that the Nginx web server only handles the HTTP requests and PHP-FPM interprets the PHP code. The fact of having two separate services is key for increasing efficiency.

TIL Considering Device Obsolescence with web development

I'm incredibly guilty of pushing to build for the latest tech. For good reason too - you can write less code, use more native functions, and things are just more likely to work.