Use CSS Effectively to Customize Magento Look and Feel

The article is written for developers who are about to take the Magento Certification exam. Here you can find the most relevant issues concerning priority rules and types of selectors. All knowledge acquired will help you win the exam.

Which types of selectors and rules of priority are available in CSS2

As it stands, there are following types of selectors:

Indicator: #header
Class: .header-top
Tag: div
Attribute: [href$=”.dox”]
Pseudo-class: :visited :first-child
Universal selector, (all elements): *

In order to gain a better understanding of selector’s priority, we assign numeric values to them and compare their numbers:

Priority	Groups	Example
100	Selector indicator	#id #header
010	Selectors of classes, attributes, and pseudo-classes	.class-name .nav-item :visited [data-toolpit]
001	Elements selector	div ul a
000	Universal selector pseudo-class :not()	* :not()
1000	Styles specified in the attribute style=””	<a style=”color: red;”></a>
10000	Styles are to be respecified !important	a{ color: red !important; }

*More examples of pseudo-classes/pseudo-elements selectors you can find below

Let’s consider some examples:

div{color: gold;}
div{color: red;}

1 2	div{color: gold;} div{color: red;}

Since both selectors are equal 001 === 001, so the key factor is order, that’s why the latter is the highest priority.

One more example is dedicated to the same topic:

Partner With Us Let's discuss how to grow your business. Get a Free Quote.

Talk to Andrey

.nav.nav__tyle.nav__type2{ /* ...*/ }
/*
	In this selector we use three classes, so it follows:
	030 = 010 (.nav) + 010 (.nav__tyle) + 010 (.nav__type2)
*/

#header-search.active{ /* ...*/ }
/* 
	110 = 100 (#header-search) + 010 (.active) 
*/

ul#main-header nav#main-navigation.opened .mobile-menu:first-child{ /* ...*/ }
/*
	232  = 001 (ul) + 100 (#main-header) + 001 (nav) + 100 (#main-navigation) + 010 (.opened) + 010 (.mobile-menu) + 010 (:first-child)
*/

.nav.nav__tyle.nav__type2{ /* ...*/ }

In this selector we use three classes, so it follows:

030 = 010 (.nav) + 010 (.nav__tyle) + 010 (.nav__type2)

#header-search.active{ /* ...*/ }

110 = 100 (#header-search) + 010 (.active)

ul#main-header nav#main-navigation.opened .mobile-menu:first-child{ /* ...*/ }

232 = 001 (ul) + 100 (#main-header) + 001 (nav) + 100 (#main-navigation) + 010 (.opened) + 010 (.mobile-menu) + 010 (:first-child)

*The selector described above is provided for reference only.

Using this simple method helps to determine selector’s priority.

The supplementary list of CSS pseudo-classes and pseudo-elements is presented:

Type
Pseudo-classes	:active , :left , :first-of-type , :placeholder-shown :any , :link , :fullscreen , :read-only :any-link , :not() , :focus , :read-write :checked , :nth-child() , :focus-within , :required :default , :nth-last-child() , :hover , :right :dir() , :nth-last-of-type() , :indeterminate , :root :disabled , :nth-of-type() , :in-range , :scope :empty , :only-child , :invalid , :target :enabled , :only-of-type , :lang() , :valid :first , :optional , :last-child , :visited :first-child , :out-of-range , :last-of-type …
Pseudo-elements	::before, ::after ::first-letter ::first-line ::backdrop ::placeholder ::selection

Which CSS related methods of Page Speed Optimization do you know

There are general methods of speed optimization:

Compress css
Combine css files
Split styles according to Media Query Breakpoints
Remove all unnecessary vendor prefixes

1. Compression helps your users save traffic and increase load speed. Nowadays there are a number of CSS compressors/minifier which you can find here css-minification-benchmark

2. If your web server uses HTTP/1.1 protocol, you should see about decreasing the number of HTTP queries. Since the number of simultaneous connections to HTTP/1.1 is limited, the speed of the pages containing heavy content is low. That’s why you’re suggested to combine CSS files.

3. You might be surprised to see the world “split” after we’ve discussed its combining. But this is considered as a useful method under specific conditions. Modern websites prefer adaptive design, so it’s better to split styles for mobile and desktop to improve load speed.

All you need to perform is as follows:

Combine repeating media queries. There are plugins that execute it automatically (css-mqpacker, postcss-filter-mq, postcss-mq-optimize).
Select a separation point, for example 768px. The first file contains common styles, the second one includes mobile styles, and the third one includes styles for desktops and tablets.

<!-- Before -->
<link rel="stylesheet" href="styles.css">
<!-- After -->
<link rel="stylesheet" href="style-all.css"     media="all">
<link rel="stylesheet" href="style-mobile.css"  media="(max-width: 767px)">
<link rel="stylesheet" href="style-desktop.css" media="(min-width: 768px)">

If media query in the attribute media doesn’t match, then file will be not loaded.

4. Every project has its own list of compatible browsers which can be modified with time. But nobody gets involved in getting css pure. But it’s easy to perform by using autoprefixer + browserlist:

Define the list of compatible browsers (http://browserl.ist)
Parse css via autoprefixer

According to the browser’s list made, autoprefixer defines css properties enabled and adds vendor prefixes if necessary. By default, it also removes outdated prefixes.