Get Free Audit

Use CSS Effectively to Customize Magento Look and Feel

Nov 7, 2017

2589 David Narbutovich

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:

  1. Indicator:  #header
  2. Class: .header-top
  3. Tag: div
  4. Attribute: [href$=”.dox”]
  5. Pseudo-class: :visited :first-child
  6. 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:


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:

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


*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.


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:

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.

Andrey Dubina
Partner With Us Looking for a partner to grow your business? We are the right company to bring your webstore to success. Talk to Andrey

Post a new comment

BelVG Newsletter
Subscribe to our mailing list and get interesting stuff and updates to your email inbox.
Email *