Level up your CSS with this one trick!

 I'm sure you have heard of people saying as long as you can make website look the way it should be, then it doesn't matter how you code them out. But there are a few concerns about this, we have not taken into account of:

  • Maintainability
  • Readability of code
  • Reusability of code
Let us say we want to create a layout like this:
For those people who are new to CSS, they might style their HTML and CSS as such:
Before CSS:
*,
*::before,
*::after {
    box-sizing: border-box;
}
body {
    display: grid;
    min-height: 100vh;
    margin: 0;
}
.box1 {
    background-color: green;
    color: greenyellow;
    margin: 3rem;
}
.box2 {
    background-color: blue;
    color: lightblue;
    margin: 3rem;
}
.box3 {
    background-color: red;
    color: lightgoldenrodyellow;
    margin: 3rem;
}

Before HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="better.css"></link>
    <link rel="stylesheet" href="style.css"></link>
    <title>Document</title>
</head>
<body>
    <div class="box1">This is as green box with light green box</div>
    <div class="box2">This is as blue box with light blue box</div>
    <div class="box3">This is a red box with light red box</div>
</body>
</html>

However, the problem with this is that, it is:
  • Low reusability. Imagine with another component in the website requires the same styling, but with different specification like different width, or requiring border.
  • Hard to maintain. Future maintainers would not know what properties does box1, box2 and box3 have to have such layouts.
However, all of these can be fixed if the CSS and HTML is written in a way that promotes reusability and maintainability. We can see that is applied in Bootstrap, as we can easily adjust the layout of the component by simply adding classes to the element. Taking that into mind, we can refractor our code to such a way.
After CSS:
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    display: grid;
    min-height: 100vh;
    margin: 1rem;
}

.flex {
    display: flex;
    gap: var(--gap, 1rem);
}

.grid {
    display: grid;
    gap: var(--gap, 1rem);
}

.bg-green {background-color: green;}
.bg-blue {background-color: blue;}
.bg-yellow {background-color: red;}

.text-green {color: greenyellow;}
.text-blue {color: lightblue;}
.text-yellow {color: lightgoldenrodyellow;}


After HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="better.css"></link>
    <link rel="stylesheet" href="style.css"></link>
    <title>Document</title>
</head>
<body>
    <div class="grid">
        <div class="bg-green text-green">This is as green box with light green box</div>
        <div class="bg-blue text-blue">This is as blue box with light blue box</div>
        <div class="bg-yellow text-yellow">This is a red box with light red box</div>
    </div>
</body>
</html>

Isn't that much better? The improvement you can see are:
  • Improved clarity in HTML and CSS, you can easily understand how and what each classes do
  • Better usability, if you want to create a component of specific styling, you can easily call the class with that specific styling.

Comments

Post a Comment

Popular posts from this blog

Support for the experimental syntax 'decorators' isn't currently enabled (5:3):

This guide is targeted specifically to people who encountered this error while using MobX with ReactJS Error Now I know, its frustrating when you got this error, no worries, I know exactly what caused the error. Here was my code that caused the error: // store.js import { observable , action } from 'mobx' ; class ProductStore {   @ observable products = [];   @ action   addProduct ( product ) {     this . products . push ( product );   } } const store = new ProductStore (); export default store ; Solutions tried You might see this message in your console: "Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation." and you might have added this new dependencies in both .babelrc [source] , babel.config.json [source] , installing the dependencies in dev using npm [source] , installing it as regular dependency [s...
Read more

How to add environment variables into Heroku container

Image
 Method 1: Using .env file  NOTE: Please add your .env file into .gitignore to not make the file visiblein github. Before we start, please make sure you have ran ' heroku scale worker=1 -a (app) ' in your app.  1) Create an .env file and add your environment variable like so: your-environment-variable=123 2) In your code, import load_dotenv from dotenv like so: import os from dotenv import load_dotenv load_dotenv() test-env = os.getenv('your-environment-variable')  print(test-env)  Note: Please make sure you have requirements.txt present by doing 'pip freeze > requirements.txt' 3) Create your dockerfile FROM python:latest WORKDIR / COPY . . RUN pip install -r requirements.txt CMD [ "python", "test.py" ] 4) Run ' heroku container:push worker -a (app name) ' 5) Run ' heroku container:release worker -a (app name) ' 6) Wait for 10-20 seconds... 7) You can test if your app is working by running ' heroku logs -a (app name)...
Read more

Running CQL scripts in Cassandra

How to run CQL scripts in Cassandra  There are 2 ways to run a CQL script, the first way would be running the following command: - cqlsh -f {directory} The second way would be using the command within the CQLSH terminal: - source '{directory}' Where does the {directory} points to? The directory points to the root of your server. For example, if you are on linux, the root would be `/`. Therefore, if you placed your scripts under the folder `scripts`, your directory would look like this `/scripts/{cql_script_name}.cql`.  I've been running the command, but it keeps saying `No such file or directory`? If you met this error, please make sure that:      - The file actually exist in the directory. You can check if by typing `ls -l {directory}`. If it doesn't exist, it will show the same error. If you are on docker, and you are unsure of how to mount your CQL file into your container, you can check out this guide.      - The CQL file has the correct exten...
Read more