10 CSS pro tips, code this not that

Introduction to 10 CSS pro tips:

CSS is an important part of every web developer’s life. Nothing is possible for a web developer without a design and UI. So, it’s is important to be productive while working with CSS. Here in this tutorial, we cover the most important CSS pro tips to save you some time and make your life a little bit easy.

What do we cover:

In this tutorial, we cover a lot of important CSS tips and tricks to give a boost to your CSS life. Additionally, we also cover some other less important CSS concepts.

The 10 CSS pro tips covers

1. Learn the CSS box model
2. Use Mozilla Firefox CSS tools
3. CSS Flex Box
4. The all important CSS grid
5. Use CSS variables
6. CSS calc() function
7. CSS state management counter
8. focus-within pseudo-class
9. The aspect ration one-liner
10. Lean SASS

1. Learn the CSS box model:

What is CSS box model in web programming?

Understanding the CSS box model is an important prospect for every CSS or web developer. If you learn the CSS box model, it makes everything in CSS easy. It has a huge impact on the web development lifecycle. In this mini CSS box model tutorial, we will take a quick look at what the CSS box model is and how it works. Also, make sure you go through all the CSS pro tips covered in this tutorial if you want to gain an in-depth understanding of the CSS box model.

When talking about the design and layout of a website in CSS, the box model is used. In simpler terms, the CSS box model is a container that contains multiple components including borders, margin, padding, and the content itself. In conclusion, it is a CSS toolkit for customizing the layout of different elements.

The web browser renders every element as a box as described by the standard CSS box model. CSS determines the position, size, and properties such as color, height, width, border, background, etc of these boxes.

The element’s total height and the width of the element are calculated as follows:
Total height: height + top and bottom padding + top and bottom border + top and bottom margin.
Total width: width + left and right padding + left and right border + left and right margin.

CSS box-sizing property:

The total height and total width of an element are defined by a CSS property known as box-sizing. The CSS property box-sizing defines the total height and width of an element. The default value of box-sizing is content-box. In simpler terms, it means that the margin, border, and padding will be added to the total height and width specified using the width and height properties. Also, the addition of margin, padding, and the border doesn’t reduce the total size of the content area.

There is another value for box-sizing known as border-box. Which when set reduces the size of the content area. Or in other words, the total height and total width of an element don’t increase when the margin, padding, and border are added to the element.

Compontents of CSS box model:

1. CONTENT:

This is the main element of the CSS box model. In simpler terms, It is like a box that displays the text, images, videos, etc, sized by using properties such as width and height. The content area contains the main content of the element. The content includes text, images, or videos.

2. PADDING:

Padding creates space around the element within its border.
The padding is set on an HTML element using the properties.
a) padding: 2px; // 2px padding for all sides
b) padding: 2px 3px; // 2px on top and bottom, and 3 px on left and right
c) padding: 2px 3px 4px; // 2px on top, 3px on left and right, 4px on bottom
d) padding: 2px 3px 4px; // 2px on top, 3px on right 4px on bottom and 5px on left
or using the individual CSS properties.
padding-left: padding-top: padding-right: padding-bottom:

3. BORDER:

The border creates a divider or space around the element which marks the end of the element. The padding and content are contained in it. The border can be customized as per the requirements. You can change the size, style, color, and width of the border by using the CSS property border as “border: 1px solid green”. While 1px is the size, solid as style, and green as the color of the border.

Other various CSS properties can be applied to a border. These properties include but are not limited to border radius etc.

4. MARGIN:

Margin is the space outside the border of an element. It creates a space between the adjacent elements. The margin size is determined by the short-hand property margin or individual properties such as margin-top, margin-bottom, margin-left, margin-bottom. These CSS properties work similarly as the padding size properties work.

2. Use Mozilla Firefox CSS tools:

Firefox or Mozilla Firefox is a free and open-source web browser developed by the Mozilla foundation. Mozilla Firefox is available for Windows, Mac, Linux, Android, and IOS devices. As of December 2021, Firefox has an 8.34% usage share as a desktop web browser and is the fourth-most popular browser in the world.

Mozilla Firefox comes with a lot of Developer-friendly tools out of the box. The best of which are

CSS grid layout Firefox devtools:

Firefox has amazing CSS developer tools. One of these is grid-container. when we inspect a grid item, it visualizes the layout of the whole grid container. It makes debugging and changing the properties easier.

In addition to the single grid container, it also shows the table of all grid-layouts applied on the page. To try it, simply select the grid item to check the grid lines and names. You can also see grid-gap and other grid-related properties right in the firefox developer tools.

Flex box Firefox devtools:

Similar to the CSS grid, firefox CSS developer tools also make it easier to work with the flex-box layout. Similar to a grid, it visualizes the individual flex-box properties like flex-direction, align-items, and justify-content.

Element annotations Firefox devtools:

Firefox CSS developer tools provide amazing annotations to make your work as a developer easier.
By just looking at the HTML you can see which elements are overflowing and take necessary actions to fix it. Also, you can see which elements are laid out using flexbox and CSS-grid. It makes a lot of difference when working on the visual side of your website. It makes things tidy and easy to fix.

3. CSS Flex Box:

Before the arrival of CSS flexbox in CSS3, laying a webpage was one hell of a task. It’d take developers hundreds of lines of code to design a simple layout. CSS flexbox made our life easy by all means. Now with a few lines of code, we can layout even the most complicated layouts.

What is CSS Flexbox?

The flexbox was designed to lay out one-dimensional layout models. With CSS flexbox you can design a one-dimensional layout with a few lines of code. Flexbox offers space distribution between items with powerful alignment capabilities. It also provides easy an clean way to arrange items within a flex container.

Flexbox makes layouts responsive and mobile-friendly. It is useful for creating small-scale layouts.

Features of Flexbox:

1. Flexbox is flexibile
2. Provides a powerful way to arrange and align items
3. Provides a way to properly space items.
4. With flexbox, you can easily mange order and sequence of items.
5. Popular css library Bootstrap is based on flexbox.

How to draw a layout with CSS flex-box?

Step 1: Making the parent container a flex container.

To make the parent container a flex container, we set the display property to flex.

.container {
display: flex;
}

Other properties applied on flex-container are.

1. flex-direction:

The flex-direction property changes the direction of the flexbox. By default, it’s set to row. But we can change it to a column to put the flex items in a column.
We can also set the flex-direction property to column-reverse and row-reverse. Which reverses the sequence of the flex-items.

.container {
display: flex;
flex-direction: row; // column, row-reverse, column-reverse
}

2. flex-wrap:

The flex-wrap property specifies whether the flex items should wrap or not.

The flex-wrap property can have three values wrap, nowrap, and wrap-reverse.

The wrap value specifies that the flex items should wrap if necessary while the nowrap value species that the flex items should not wrap. Also nowrap is the default value of flex-wrap if no value is specified. The wrap-reverse value specifies that the flex items should wrap in reverse order.

.container {
display: flex;
flex-direction: row;
flex-wrap: wrap; // nowrap, wrap-reverse
}

3. flex-flow:

In simpler terms, flex-flow is just an umbrella or shorthand property for setting both flex-direction and flex-wrap properties.

.container {
display: flex;
flex-flow: row wrap;
}

4. justify-content:

the justify-content property is used to align the flex-items on the horizontal axis.

.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start; // center, flex-end, space-between, space-around
}

The justify-content property can have one of the five values given below.

a) flex-start:

The flex-start value aligns with the items at the start of the flex container. It’s the default value for the justify-content property.

b) center:

The center value aligns the items at the center of the flex container

c) flex-end:

The flex-end value is the opposite of the flex-start. It aligns the flex items at the end of the flex container.

d) space-between:

The space-between value adds space only between the flex items and not before or end the first and last elements respectively.

e) space-around:

The space-around value adds space between, end, and after the flex items.

5. align-items:

The align-items property is used to align the flex-items on the y-axis. It takes one of the five values given below.

a) flex-start

The flex-start aligns the items at the top of the container.

b) flex-end

The flex-end aligns the items at the bottom of the container.

c) center

Center aligns the items in the middle of the container.

d) baseline

The baseline value aligns the flex items according to their baseline.

e) stretch

The stretch value stretches the flex items to fill the flex container. This is the default value of the align-items property if no other value is specified.

6. align-content

The align-content property is used to align the rows in the flex container. It can have the following six values.

a) flex-start

The center value centers all the rows in the center of the flex container.

b) flex-end

The flex-start value aligns all the rows at the start of the flex-container

c) flex-end

The flex-end value aligns all the rows at the end of the flex-container

d) space-between

The space-between distributes the available space between the flex-rows but doesn’t add space to the start of the first row and after the last row.

e) space-around

The space-around value adds space before the first row and after the last row and as well as distributes the remaining space between the rows.

f) stretch

The stretch value stretches the flex rows vertically relative to the longest items in the row container.

Step 2: Properties applied on a flex-item:

These are the properties that are used on the direct children of a flex container. Also, the direct children of a flex container automatically become flex items.

There are 6 flex-item properties. These are as follows:

1) order:

As the name itself implies, the order is the sequence of the flex items in which they are displayed in the flex container. It overrides the HTML order. The default value of the order is 0. The value of the order less than 0 means that the element with an order less than one will be displayed before every other element.

.item {
order: 2;
}

2) flex-grow:

With the flex-grow property, we can specify how much a flex item should grow relative to the rest of the flex items.
The default value of flex-grow is 0. In simpler terms, it means that the flex-items won’t grow as relative to the available space.

.item {
order: 2;
flex-grow: 1;
}

3) flex-shrink:

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the items in the flex container. The default value of flex-shrink is 1. This means that every item will shrink if the space is less than the needed space for each item.

.item {
order: 2;
flex-grow: 1;
flex-shrink: 0; // The item won't shrink
}

4) flex-basis:

The initial length of a flex item is set using the flex-basis property.

.item {
order: 2;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
}

5) flex:

The flex property is just a shorthand property to specify flex-grow, flex-shrink, and flex-basis properties all in one go.

.item {
order: 2;
flex: 1 1 200px; // flex: flex-grow flex-shrink flex-basis;
}

6) align-self:

The align-self property specifies the alignment of the specific item inside the flex-container. It overrides the property align-items specified on the flex container.

.item {
align-self: center;
}

Try CSS flex-box on Codepen:

See the Pen CSS flex-box model by nadeem (@nasyxnadeem) on CodePen.

4. CSS Grid, the most important CSS pro tip:

CSS grid makes it the most important of 10 CSS pro tips. The CSS grid layout is slightly new to CSS and that makes it more important and also it replaced the traditional float layout. Additionally, it’s a two-dimensional version of the flex-box layout. It makes creating complex page layouts easier and reduces them to a few lines as compared to the tradiotnal float layout.

The CSS grid layout is a powerful tool that allows the creation of two-dimensional layouts. CSS grid layout does a superb job at dividing a large web page into small components and defining the relationships between these components in terms of size, position, and priority or importance.

Also, the CSS grid layout is somewhat similar to tables because it divides the large layout into rows and columns like a table. CSS grid layout has made our life easier. Before the arrival of the grid, we had to write hundreds of lines of code and spend many hours creating a simple layout. But, now it’s just a matter of a few lines of code and a couple of minutes. You can also try CSS grid image gallery to learn more about CSS grids.

How to create a CSS grid layout?

To create a CSS grid layout, we create a container and set its display property to the grid.

That’s not all you need to do to create a grid layout. You have to explicitly create the grid rows and columns using the CSS properties grid-template-columns and grid-template-rows. Given below is an example of a 3 x 3 grid.

.container {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}

Properties applied on CSS grid container.

1) Grid template columns property:

The grid-template-columns property defines the number and width of columns in your grid layout.

Here is an example where we create 4 columns of equal width.

grid-template-columns: repeat(4, 1fr);
or 
grid-template-columns: repeat(4, auto);

The css repeat() function:

The repeat function used above creates 4 columns of 1fr each.

Here is another example where we create 4 columns of different widths.

grid-template-columns: 20px 100px 200px 100px;

2) grid-template-rows:

The grid-template-rows property works the same way as grid-template-columns. The only difference is that it creates rows instead of columns.

Here is an example where we create 4 rows of the same height:

grid-template-rows: repeat(4, 1fr);

Or 4 rows of different heights.

grid-template-columns: 50px 300px 350px 100px;

3) The column-gap property:

The column-gap property adds the specified space between the columns.

column-gap: 30px;

In the above code example, a gap of 30px will be added between all the columns.

4) The row-gap property:

The row-gap property adds the specified space between the rows.

row-gap: 20px;

In the above code block, a gap of 20px is added between the rows.

5) the gap property:

The gap property is a shorthand property for row-gap and column-gap.

gap: 10px; //both column and row gap
gap: 10px 39x; // row-gap: 10px; column-gap: 39px;

6) Justify-content:

The justify-content is used to horizontally align the whole grid inside the container. The grid needs to have less width than the container’s width for justify-content to have an effect.

The justify-content can have the following values.

.container {
display: flex;
justify-content: space-evenly; // space-around, space-between , center, start, end

a) space-evenly

The space-evenly value adds equal space to the start, end, and between the items from the available space.

b) space-around

The space-around value is similar to space-evenly with the only difference that the sum of space before and after is equal to the space between two adjacent items.

c) space-between

The space-between value adds space between the items but not at the start and end of the grid.

d) center

The center value aligns all grid items at the center of the grid.

e) start

The start value aligns all grid items at the start of the grid container.

f) end

The end value aligns all grid items at the end of the grid container

Also read: Reactjs best practices 2022, code this not that

7) Align-content

The align-content vertically aligns the whole grid inside the container. Like justify-content, the grid needs to have less width than the container width to have an effect.

.container {
display: grid;
align-content: center; //space-evenly, space-around, space-between, start, end
}

The align-content can have the following values:

a) center
b) space-evenly
c) space-around
d) space-between
e) start
f) end

The values for align-content work similar to justify-content.

Properties applied on grid items:

a) The grid-column property:

The grid-column property is used to set the start and end column of an element in the grid container. For example, if an item has the grid-column property set as 1 / 5 that would mean the item starts at grid column line 1 and ends at grid column line 5. The same thing can be written using span like 1/ span 4.

.item {
      grid-column: 1 / 5; // Or grid-column: 1 / span 4;
}

b) The grid-row property:

The grid-row property is similar to the grid-column property, the only difference is that we use the grid-row property to set the start and end row of a grid item. We can also use span as we use in the grid-column property.

.item {
      grid-row: 1 / 2;
}

c) The grid-area property:

The grid-area property is a shorthand property for grid-column and grid-row.
grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;

The above grid-row and grid-column properties can be set using grid-area as.

.item {
      grid-area: 1 / 1 / 2 / 5;
}

Example of CSS Grid on Codepen:

See the Pen CSS GRID by nadeem (@nasyxnadeem) on CodePen.

You can read more about CSS grids at w3schools or MDN Web Docs.

5. Use CSS variables:

Variables make debugging and maintaining the codebase easy. If you have to use the same value multiple times, it’s better to create a CSS variable. If you happen to change the value later you won’t have to change it at multiple locations. Also, you can manipulate CSS variables using javascript on the fly.

You can also use SCSS variables and mixins to make your life a little easier. Moreover, SCSS mixins let you reuse CSS code blocks.

How to define and use CSS variables?

To define a CSS variable in the global scope.

:root {
--bg-color: green;
}

To define a CSS variable in a local scope, we define the variable in the CSS selector we want to use it. Also, global variables can be overridden in the local scope using the same syntax we use to declare in the global scope.

To use a CSS variable in global scope:

element {
	background-color: var(--bg-color);
}

The local CSS variables are also used using the same syntax defined above. The only difference is that they are declared in the local scope.

How to declare and use variables in SAAS?

a) Declaration:

A variable in scss can be declared with the following syntax

$main-color: black;

b) Usage:

element {
background-color: $main-color:
}

How to get access to CSS variables using javascript?

Let us take an example of the CSS variable given below.

:root {
--bg-dark: #336699;
}

To get the above variable using JavaScript use.

getComputedStyle(document.body).style.getPropertyValue('--bg-dark')

How to override a CSS variable using JavaScript?

document.documentElement.style.setProperty('--bg-dark', '#787898');

6. CSS Calc() function:

CSS calc() function helps to make simple calculation in CSS. It’s a useful function and can sometimes be the best solution to a specific CSS problem. CSS calc() function can do the basic math calculations like calculating the width of an HTML element by solving a mathematical expression.

CSS calc() function example:

To calculate the width of an HTML div element.

.div {
	width: calc(100% - 100px)
}

The size of the above div would be equal to the calculated width of the parent of div minus 100px.

Other important CSS properties to look at.

a) Transition timing function property in CSS:

Transition-timing-function allows an animation to change speed over time. Its default value is ease. However, it can have values such as

1) ease: Slow at the start, then fast, and then slow at the end
2) linear: Same speed from start to end
3) ease-in: Slow at the start and then fast
4) ease-out: Fast start but slow end
5) ease-in-out: Slow start to and end of cubic-bezier(0.42, 0, 0.58, 1)
6) step-start: Take a step before it starts
7) step-end: Take a step at the end of the animation

transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

b) The animation-timing-function:

It specifies the speed curve of an animation. The speed curve makes the changes smooth. It’s the same values as the transition-timing-function has and means the same thing as in that case. Ease is the default value of the animation timing function.

c) The cubic-bezier() function:

Unlike the above two properties, this is an actual CSS function. It defines a Cubic Bezier curve. The cubic-bezier() function is used with the animation-timing-function property and as well as with the transition-timing-function property.

Examples of cubic-bezier:

transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);

7. CSS state management counter:

This might surprise you, but it’s the truth. There is an inbuilt CSS state management counter. It lets you change the appearance of an element based on its location in the document. You may wonder how it makes the cut for 10 CSS pro tips but it does, because it’s very useful in some cases.

CSS state management counter can be used to

1) Automatically number the headings in a webpage.
2) Change the numbering of an ordered list.

CSS counters in simple terms are just variables that can be incremented or decremented by CSS rules depending on the number of times they’re used.

How to use CSS counters?

a) Inititalize a CSS counter or counters:

You can initialize a counter using the following syntax

counter-reset: heading;

It sets the heading variable to 0.

Or multiple counters like

counter-reset: heading paragraph;

Or initialize it to a number

counter-reset: heading 4;

The above line of code initializes the heading to 4.

b) Increment or decrement a css counter:

counter-increment: heading; // Increase the value of heading by 1
counter-increment: heading -1; // decrease the value of heading by 1

To increase it by a different number you can use that number in place of -1 like counter-increment: heading 5; increments heading by 5.

c) Displaying a counter:

The CSS counter can be displayed using the counter() function.

content: counter(heading) displays the value of counter heading 

8. Foucs-within pseudo-class:

The focus-within pseudo-class represents an element that has received focus or its child has received focus. It is triggered when the user clicks or taps on the element or selects the elements with the tab key on the keyboard. It’s similar to focus pseudo-class but the difference is focus doesn’t trigger if the element contained in that element receives focus.

Example of focus pseudo-class on Codepen

See the Pen focus by nadeem (@nasyxnadeem) on CodePen.

Example of focus-within pseudo-class on Codepen

See the Pen focus-within by nadeem (@nasyxnadeem) on CodePen.

9. The aspect ratio one-liner:

The aspect ratio is the ratio of an element’s width to its height. It’s usually denoted by the height and width separated by a colon(2:3). In the example of 2:3, the width of the element is 2 units and the height 3 units.

In CSS it’s written with width and height separated by a forward slash(2/3).

Also, for an HTML element, the aspect ratio is the ratio of the preferred width and height of the element.

Setting an aspect ratio can be done with one line of CSS.

aspect-ratio: 1 / 1;

Example of aspect-ratio onliner on Codepen:

See the Pen aspect-ratio-example by nadeem (@nasyxnadeem) on CodePen.

10. Learn SCSS:

SASS (SCSS) is a preprocessor scripting language that is compiled into CSS (Cascading style sheets). It has two syntaxes, the original one and the sassy one. The original one called “the indented syntax” implements a syntax similar to Haml. It uses indentation to separate different code blocks and newline characters to separate rules. It is traditionally given a .sass file extension. As per the official website of SASS, SASS is short for syntactically awesome style sheets. Also read, 5 PRACTICAL SCSS MIXIN EXAMPLES

The newer syntax known as sassy syntax or SCSS uses curly braces to separate code blocks like normal CSS. It is traditionally given a .scss file extension. Learn more about SCSS at Scss vs Bootstrap vs Tailwind CSS.

Conclusion to 10 CSS pro tips:

A good UI is an essential part of every website. Most of the times, raw CSS does the job. Even if you use other CSS libraries like Bootstrap, Tailwind CSS etc, you still need to understand CSS to underestand your design. So, CSS is an essential part of every web developers life cycle even if they mostly use CSS libraries. And to be productive and efficient in CSS just makes the desinging prosess smooth. That’s why, we did research to find out top 10 css pro tips for you. If you liked the tutorial, please leave a feedback at the end of this post. We are pleased to have you here and hope you like the 10 pro CSS tips. We have other CSS realted blog posts and if you’re interested give them a read. Thanks, hope you have some good developing time ahead.

We covered 10 pro css tips in this tutorial. But there were other CSS pro tips in the middle as well. Although, they were less important, but they give a broad concept of other CSS pro tips. So, if you’re interested in these CSS pro tips, please let us know. We will love to update this post.