How to write a clean (front) style for the front-end?

Tram Ho

I. Introduction

Emerging web programming is a popular job among young people. Starting from the increasingly dominant internet of people today, web programming has suddenly become an ideal job for programmers. It can be said that at the present time, the number of you programmers is increasing. And of course we are not new to the keywords front-end and right CSS . When it comes to css, we seemed to have something pretty basic but are you sure you’re writing pure css. In the article, I will share with you a few experiences of css to help us can “Write style (clean) for front-end”.

II. main content

1. Using SASS / SCSS:

What is SASS / SCSS?

SASS (Systematically Awesome Style Sheets) is a preprocessing scripting language, from which it is converted into CSS using various compilation tools. SASS has two types of syntax. The original syntax is the same type as Haml, which separates blocks of code by line and indent, files written with this syntax usually have the .sass extension.

The syntax for writing the second SASS code is SCSS (Sassy CSS), which uses the same blocks of code format as CSS itself. It uses {} to wrap code blocks and symbols; to split lines in that block. The code written according to the SCSS is stored in the file with extension .css

Variables:

You can use variables in SCSS. This variable makes it possible to reuse in different uses. Maybe for example you have a color code, which will be used in your website …

Nesting: You can nest classes: For example, you have an outer span tag is an h1 tag, you often write like this:

Write the cage as follows:

It looks a bit neater, doesn’t it.

Partials and imports:

With scss you can split styles into many different .scss files, then import that style into one or more .scss files in different places. For example, I want to style the animation for my website. As below I will create 1 animation.scss file. Then when I want to use the header, I imported into header.scss. Or use in content, then I import to content. Avoid importing global when not needed.

Using BEM with SASS:

First, the BEM notation makes it easy for newcomers to discover the states and sub objects of a pre-written component. This helps prevent them from having to rewrite existing CSS styles and limit overwriting or duplicating CSS styles, which is very common in large projects with many people involved.

You will still use nesting to isolate the component block and combine it with the parent & SASS symbol to name the Element and Modifier without having to type the name of the Component again. For example:

Although nested, when compiled into CSS, they are still flattened into a class level in the spirit of BEM:

2. Using the library 2.1. Bootstrap:

  • Bootstrap is an open source, is a framework containing programming languages ​​like HTML, CSS and Javascript, or to put it easily understandable, framewordk is the framework and your use of HTML, CSS and Javascript in the framework that Bootstrap has available, and then it will save you a lot of time, effort and especially when you build 2 templates for outdated PC and Mobile interfaces, instead Responsive will Help your web display the best, compatible with all screen sizes, and thus you can customize the display more on many different types of screens. Bootstrap has a collection of utility classes that assist users in designing their websites.

Instead of thinking of naming classes as well as building layouts. Bootstrap has provided the coder with some basic layouts. We can use it to design our website to save time as well as “cleaner” code.

Advantages:

  • Bootstrap helps website designers to minimize the time in website design. When you use Bootstrap, you can limit the time spent writing code for the interface. Because in its library already existed, the code can be inserted into the website.
  • When you use Bootstrap, you can completely customize the interface according to your individual needs. With the default Grid System system including 12 powders and 940px width built in Bootstrap.
  • Today, when the trend of website development is compatible with devices, Bootstrap. Bootstrap has emerged as a reponsive css framework suitable for all devices such as smartphones, tablets, dextop, etc.

Defect:

  • Less popular: Bootstrap is not a popular web application, so it is difficult to find an organization or individuals proficient in bootstrap to be able to use with no web programming platform.
  • Heavy products, optimal speed is not high: so if your project requires lightweight products, using bootstrap will be a burden for the web.
  • Incomplete: Bootstrap is not full of necessary libraries. Developers have yet to create a perfect native framework, so some websites still have to use mobile-specific versions

2.2. Tailwindcss:

Like bootstrap, Tailwindcss also provides users with a set of classes to support writing styles for websites. To install Tailwind:

Add to your css:

Import css of Tailwind:

Create config file for tailwind:

Advantages:

  • Short, easy-to-remember class names, Tailwind CSS has nearly 85% of css properties.
  • Use Flexbox to divide the layout.
  • Easy to set up.

Defect:

  • When using Tailwind in addition to using convenient and easy-to-remember classes, the class will be very long.

Some classes of tailwind:

III. Conclusion

Through the article, surely you have some knowledge to style the website. You can use SASS / SCSS, Bootstrap, Tailwind, … or you can create your own library.

Share the news now

Source : Viblo