HTML, CSS and JavaScript are essential building blocks for any application. In this article, we will talk about Cascading Style Sheets (CSS) which is responsible for the appearance of the applications. In 2023, you need good CSS knowledge to build any web application – let alone one that looks beautiful.
This article will focus on CSS properties, but also comment on practical use cases for these CSS properties in React.
Display property
Display is an important property that defines an element’s shape and its inner layout. When set to block, the container take up the entire horizontal free space available to them. Meaning that by default, divs take up 100% of the width available. <ul> elements are also display:block by default. You can change element’s default display property, but beware of changes to other elements as well.
CSS is the type of language where changing one thing might affect the entire layout of the page. It’s always better to not change anything if you notice everything is working fine.
If set to inline, borders of the element will depend on its content. Multiple inline elements can take up the same horizontal space as well. Width and height is fixed.
Elements with a display of inline-block share characteristics of the two options mentioned above. You can manually specify their width and height, and multiple elements with inline-block display can appear next to each other.
display:none simply hides the element. It can be useful for conditional rendering in React. This CSS property also lets you implement expand/collapse in React. Let’s say you want to display (or not display) a React element. You can use inline styles and a ternary operator to conditionally set the CSS value. If you have a functional component, a ternary operator might check a state variable created using the useState() hook. If the variable is true, then the component gets the display:none CSS property and it is not rendered.
React elements often store user inputs in the state. Conditional styling and inline styles are a useful way to visually respond to users’ inputs in React.
Margin and padding
Managing free space is often underappreciated aspect of building user-friendly applications in React. An application that is overloaded with content is not going to be pleasant to use, no matter how many cool features it has. Two CSS properties – margin and padding allow you to define free space between elements and components in React.
Values for margin and padding CSS properties must represent certain amount of space. Developers are free to use one of many possible units – from pixels to percentages relative to the available space.
Two properties are actually shorthands for four other properties that specify margin and padding for every element side – top, bottom, right, and left. Sometimes you only need to set margin or padding only on one side. In that case, you need to use one of these properties.
To set margin and padding inside JSX in React, you will need to write them slightly differently than what you’re used to in CSS. React inline styles are essentially JavaScript objects. CSS property names become camelCased in React, and values need to correspond to JavaScript values. In case of margin and padding properties, values need to be strings.
Border
Border is another important CSS property. They help you delineate elements and components, and thus help users navigate your app. With a single border CSS property, you can define border color, style, and width.
Once again, border is a shorthand for specific CSS properties that allow you to set border to the bottom, top, left or right. If you do want to use properties like border-bottom in React, you will need to camelCase two words. ‘onchange’ in HTML becomes onChange in React. SFE has a useful guide that shows how to pass parameter to onClick in React. CSS properties become properties of a JavaScript object, so the syntax changes accordingly as well.
Advanced use-cases of border are often very useful. For example, to highlight buttons and other elements. Or to make certain elements stand out so they attract users’ attention.
Size of the border needs to be specified in pixels, their style needs to be one of the possible keywords (solid, dotted, etc) and color can be HEX, rgba, or a keyword to represent the color.
Background
Setting (or dynamically changing) the background color is a very important part of building UX-friendly web applications.
Fortunately, CSS has 5 different properties to customize element background. Background-color is probably the most important. It allows you to set the background to a specific color. It can be set any accepted color value, from HEX and RGBA to normal CSS keywords for color.
Dynamically changing the element’s background color (or image, or a pattern) is a very important feature in React. For example, you might want to let users choose between dark and light modes of the web application. You can give users a toggle option, and tie users’ inputs to the state. The use inline styles to conditionally change the background depending on state value.
As you probably already know, inline styles in JSX are essentially JavaScript objects. Property names need to be camelcased, so background-color becomes backgroundColor in React.
Position
Position of elements is very important for a custom design. Depending on requirements of the app, you sometimes need to align elements, keep their position fixed, or stick them to bottom, top, or anywhere else. This can only be achieved via position CSS property, which can have seven values.
This CSS property has many use cases in React. Developers often use it to implement a sticky navbar. Or to add a button that for scroll to bottom feature in React. This saves users time and makes React applications easier to use.
Summary
In this article, we went over only some of the lesser known, but very important CSS properties. I personally think every web developer needs to know these essential CSS properties. Especially someone who is using React (or alternative JavaScript frameworks) to build highly dynamic, interactive web applications.
I believe a strong knowledge of CSS is a precursor to learning JavaScript itself, as well as many JavaScript libraries. Despite many libraries and ready-made components in React, I am a firm believer that good CSS knowledge has no substitute.
Top comments (0)