You Would Be Better at CSS If You Know How CSS Works Behind The Scene

সোমবার, ১২ জুলাই ২০২১, দুপুর ৪:৩৯ সময়

CSS is extremely Powerful and looks so simple. If you know its ins and outs about how CSS works then it becomes a lot easier to write efficient and less code to style a certain page. This article covers most Important concepts  you need to know about How CSS works behind the Scene. So lets Dive into it.

This Article is probably going to be slightly lengthy but One Thing I can Promise You It is going to be totally worth it.

AN OVERVIEW

Internet এ অনেক কিছুই ঘটে থাকে behind the scene যতক্ষণ পর্যন্ত না যে webpage টা আমরা request করেছি তা browser এ load করা শুরু করতে পারে, Things like- http request, domain name ঠিক আছে কিনা তা চেক করা ইত্যাদি। but আমরা এই topics এ focus করব না instead we are only interested on, কি ঘটে একটা browser এ যখন user কোন একটা certain page open করে ।

So, our Starting point is when browser initial html file টা load করা শুরু করে এবং তারপর browser এই loaded HTML file টা নেয়, সেটাকে parse করে অর্থাৎ HTML file এর মধ্যে যত code লিখা থাকে তা browser line by line decode বা read করে । From this Process, browser একটি so called Document Object Model(DOM) build করে যেটা মুলত describe করে একটি entire web document কে । মানে একটি family tree এর মত যেখানে parents , children, siblings Elements থাকবে HTML এর, মুলত এখানে সেই HTML Decoded Code store থাকবে।

যখন browser HTML টা parse করবে তখন সে একটি stylesheet ও পাবে যেটা HTML head element এর মধ্যে include থাকে এবং browser এই stylesheets টা ও load করা শুরু একইসাথে । just like the HTML, CSS টা ও একইভাবে HTML এর মত Parse হবে কিন্তু CSS এর Parsing phase টা একটু আলাদা এবং একটু complex. যদি briefly বলি তাহলে , মুলত CSS টা যখন parse হয় তখন সাধারনত দুইটা জিনিশ ঘটে :

                  1.Resolved Conflicting CSS Declaration (Cascade)

                  2.Process Final CSS Values (from relative units to pixels)

  • For example : একটি element এর margin-50% দেয়া হল। এখন সেই 50% একটা smartphone এ একরকম হবে এবং একটা large screen এ অন্যরকম দেখাবে। আর এজন্য ই এই percentage and other relative units calculated হয় শুধু মাত্র user device এর উপর parsing phase এর মধ্যে। যখন এই processing parts এর কাজ শেষ হয়ে যায় CSS এর ও একটি tree structure build হয় যেটা similar to DOM এবং এই structure এর নাম হচ্ছে CSS Object Model (CSSOM) ।

এখন এই HTML Parse and CSS parse একত্রিত হয়ে Create করে একটা so called Render Tree. and then we have everything to render the page. কিন্তু এই render করার সময় browser ব্যাবহার করে Visual Formatting Model । এই Visual Formatting Model এর Algorithm টা calculate হয় bunch of stuff যেগুলার ব্যাবহার সম্পর্কে আমাদের সবার ই ধারণা আছে । Things like -BOX-Model, Floats and positioning etc. And Visual Formatting Model এর কাজ শেষ হওয়ার পর The website is finally rendered in the browser.

Note - [ Explore the picture-1 for understanding visually ]

Techdiary: when Load Up the Page
when Load Up the Page

How CSS is Parsed [ 1.Resolved Conflicting CSS Declaration (Cascade) ]

cascade টা হচ্ছে আমরা যখন একটি element এর মধ্যে একের বেশি CSS Rule apply করি,তাহলে কোন rules টা HTML element এর উপর apply হবে তার সমাধান করা । এই একাধিক CSS rules বিভিন্ন stylesheets থেকে আসে। কারণ CSS declaration different source থেকে আসে ।

সবচেয়ে common declaration source হচ্ছে যেটা আমরা developers রা লিখি । এই declaration টাকে বলা হয় author declaration. আরেকটা declaration source হচ্ছে user declaration যেটা user এর থেকে আসে । যেমন- যখন user browser এর ডিফল্ট font size change করে । Last but not the least, declaration source হচ্ছে default browser declarations যেটা browser default ভাবে সেট করে থাকে । for example: browser এর default font-size: 16px, বা কোন anchor tag এ যদি আমরা কোন style না করি তাহলে browser এ তা blue color থাকে এবং একটি underline ও থাকে । এটাই মুলত browser declaration বা user agent stylesheets.

CSS RULE Terminology:

                                 h1{

                                          text-align: center;

                                      }

Here,

h1 ===> selector

[from Open curly braces to closing curly braces ] ===> Declaration Block

text-align ===> property Name

center ===> property Value;

 text-align: center ===> declaration

so, cascade টা আসলে বিভিন্ন declarations গুলা combined করে specific একটা result টা show করে।

কিন্তু cascade কিভাবে এই conflict গুলা resolved করে ? well, এটা মুলত হয় ৩টি উপায়ে ।

Importance  >  Specificity  >  Source Order

Importance

1.User Declarations !importance

2.Author Declarations !importance

3.Author Declaration

4.User Declaration

5.Default Browser Declarations(user Agent)

list দেখলেই বুঝা যাচ্ছে যে প্রথমে User যদি কোন Declarations !importance mark দিয়ে দেয় তাহলে সেটা apply হবে , then Author Declarations mark with !importance, তারপর Author Declaration , user Declaration and finally browser Declaration. সবার last হচ্ছে browser Declaration যার ফলে easily আমরা যেকোনো browser default Declarations গুলা overwrite করতে পারি ।

যখন বেশিরভাগ সময় ই আমাদের CSS এর Author Declarations এ অনেক conflicting rules থাকবে without having a !important keyword (cause We Know that, !important mark দিয়ে CSS লিখা bad practice হিসেবে count হয় এবং এটা avoid করা উচিত ) তখন সব declarations same importance পাবে । তখন কি হবে ? তখন cascade calculate করে specificity এর উপর ভিত্তি করে, and then compare them. specificity count হয় left to right. যার number বেশি হবে সেটার style highest precedence পাবে এবং সেই style টা apply হবে । cascade এভাবে এই result find করে ।

SPECIFICITY (PRECEDENCE)

1.Inline CSS

2.Id 

3.classes, pseudo-classes, attribute

4.elements,pseudo elements

Note - [ Explore the picture for understanding visually ]

Techdiary: HTML Markup
HTML Markup
Techdiary: CSS
CSS
Techdiary: Result
Result

Source Order

Now Imagine from the picture-3, শেষ এর দুইটা elements এর same specificity অর্থাৎ [ (0 1 2 2) & (0 1 2 2) ] তখন কিভাবে cascade result দিবে ? well, তখন যে declaration টা last e declare হবে, that is the one will apply. that's it. As Simple as that.

Quick Overview

1. CSS Declaration যদি !important mark করা থাকে তাহলে সেটা Highest Priority হিসেবে গণ্য হয় ।

2. কিন্তু যদি maintainable code লিখতে চান তাহলে !important keyword টা ব্যাবহার করবেন as a last resource.

3. Inline Style টা সবসময় এ external style থেকে বেশি priority পাবে ।

4. একটি selector এর যদি 1 টি Id  থাকে তাহলে সেটা 1000 Class এর চেয়ে বেশি specific.

5.একটি selector এর যদি 1 টি class থাকে তাহলে সেটা 1000 element এর চেয়ে বেশি specific.

6. The Universal Selector(*) এর সবচেয়ে কম specificity থাকে (0,0,0,0)। 

How CSS is Parsed [2. Process Final CSS Values (from relative units to pixels) ]

Enough discuss about CSS Cascade. Now focus on CSS VALUES Processing.

1. সব  CSS property গুলার একটা initial value থাকে । এই value গুলো used হয় যখন আমরা কোন value declare না করি যদি সেখানে কোন inheritance value না থাকে ।

2. Percentages এবং relative units like REM, EM  etc.  সবসময় pixel (px) এ convert হয়ে যায় ।

3. Percentages সবসময় measure করা হয় তার parent এর font-size এর ভিত্তিতে যদি font-size specify করতে চাই । 

For Example:                       

             html { font-size:16px; } 

             header { font-size:200%; }   //the actual value will be 32px;

4. Percentages সবসময় measure করা হয় তার parent এর width এর ভিত্তিতে যদি length(margin, padding etc.) specify করতে চাই । For Example:

            header { width: 500px; } 

            header-child { padding:10%; }  //The Actual Length will be 50px; 

5.em Unit টা সবসময় measure করবে তার parent এর font-size এর ভিত্তিতে যদি font-size specify করতে চাই । For Example:

             html { font-size:16px; } 

             header { font-size:200%; }   //the actual value will be 32px;

             header-child { font-size:2em; }  //the actual value will be 32 *2=64px;

6.em Unit টা সবসময় measure করবে তার current font-size এর ভিত্তিতে যদি length specify করতে চাই । For Example:

             header {

            font-size:200%;  //the actual value will be 32px;

             padding:3em;  //the actual value will be (32px * 3) = 96px;   

              }

7.rem Unit টা সবসময় measure করবে তার HTML এর  font-size এর ভিত্তিতে (both font-size or length)। For Example:

          html { font-size:16px; }

         header { font-size:2rem; }  //the actual value will be (2*16) = 32px;

        footer { margin:4rem; }  //the actual value will be (4*16) = 64px; 

CONVERTING PX TO REM [ A POWERFUL & WORTHWHILE WORKFLOW ]

If You have ever written CSS before Chances are You (especially Beginners CSS developers ) use px unit most of the time when You style a certain webpage and there's nothing wrong about it. but using rem instead of px will make your life so much easier if you understand rem Unit properly.

How? let me illustrate.

rem unit এর rules অনুযায়ী আমরা জানি এটা শুধু মাত্র root(HTML) element উপর depend করে । তাই এটাকে আমরা আমাদের advantage হিসেবে কাজে লাগাতে পারি । I can't stress enough that How useful rem units are to us.

By default html এর font -size থাকে 16px that means, 1rem=16px;

এখন আমারা যদি HTML element এর মধ্যে font-size : 10px করে দেই 16px এর পরিবর্তে তাহলে 1rem =10px হবে। এখন যেকোনো element এর কোন property value দিতে চাই suppose (padding:2.5rem;) তাহলে 2.5rem হবে (2.5 * 10) = 25px ; অর্থাৎ আমাদের এখন যেকোনো pixel unit কে 10 দ্বারা ভাগ করলে আমারা আমাদের actual rem unit পেয়ে যাচ্ছি । কিন্তু এটা করে আমাদের কি benefit? Nice Question! well, এটা করলে যখন আমরা responsive করতে যাব আমাদের webpage কে তখন just html এর overall Font-size smaller screen এর জন্য decrease দিলে full webpage এর entire design change হয়ে যাবে এবং big screen এর জন্য html এর overall Font-size increase করে দিলেই everything will be change. Yes I know, just শুধু html এর overall Font-size change করলে ই webpage responsive হয়ে যাবে নাহ but believe me, it will reduce so much work from us. and also It's a good practice too for writing code to use relative units like rem.

But this is not the end we can improve even better. আমরা root font-size : 10px দিয়েছি right. but এটা good practice না কারণ এটা করলে user তার browser এর ডিফল্ট font-size change করতে পারবে না । I mean change করতে পারবে but overall font-size:10px ই থাকবে । অর্থাৎ user তার browser এর default font-size যদি সেটিংস্‌ এ গিয়ে manually change করে তাহলে কোন effect ই পরবে না।কারণ আমরা তা override করে ফেলসি html এ font-size:10px দিয়ে । Tis is not good for accessibility reason . এইজন্য আমরা এই unexpected Behaviour টা যাতে না করে সেজন্য আমরা font-size set করব percentage এ . let's do it.

default font-size=16px. that means in percentages it is 100% right? এখন user default font size যদি change করে let's say 18 px or 20px বা যেটাই করুক না কেন যেহেতু আমরা 100% করে দিছি তাই font-size ও 18px or 20px হবে অর্থাৎ কোন problem ই হবে না আর ।

এখন আমরা 16px চাচ্ছি না , আমরা চাই 10px যাতে আমাদের calculation করতে কোন headache নীতে না হয় ।

So, For 10px ==> (10/16)=.625% . তাহলে result আসে 62.5%. Now আমাদের font-size হবে 62.5% HTML এ । That's it. এখন যদি user তার font size change করে lets say 20px তাহলে কি হবে? simple .625 *20 = 12.5px; then the font size of the user browser will be 12.5px.

Hopefully, All the explanation made sense to all of you. Surely If You Understand The theory I just explained really well and follow accordingly, Your Coding efficiency will increase much better than others as well as code readability and also You will be debug your CSS code very easily . So, In order to become a better CSS developers You need to understand this concepts.