• Love JavaScript but hate CSS?
  • Written by Dave Ceddia
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: allenlongbaobao
  • Proofreader: Xekin-FE, L9m

One reader commented that he had fun writing JS and React himself, but was frustrated when it came to styles.

I love JavaScript but I hate CSS and I don’t have the patience to change that.

Programming is fun, problem solving is fun. When you go through all the trouble of getting your program to work correctly, it’s an incredible feeling.

However, oh crap, CSS. Your App is working fine, but it’s a little crappy, and no one will take it seriously because it’s not as cool as Apple(TM) looks.

You’re not alone

First, let me make one thing clear: if you love everything else in the front end, except CSS, you’re not a freak. I know professional LEVEL UI developers in my real work who are either terrible at styling or can solve style problems but hate the process and try to get over it as quickly as possible.

I experienced this dilemma a few years ago. CSS was like a magic black box, and whenever I put some code into it, at least two thirds of the time it produced something worse than before I started coding. I solve most of my CSS problems through Google and StackOverflow, and pray like mad that someone else has the exact same problem as me (and in a sense they have).

As I come out of that shadow, I can safely say that CSS (and the process of styling pages) is a learned skill. Even design is a learned skill. Strictly speaking, they are different skills.

Styling is not the same as designing

Taking a ready-made visual design and converting a load of DIVs to fit your STYLING with CSS is called STYLING

Taking a blank canvas and rendering a beautiful web page on it is a process called design.

It can happen that you become proficient (or even proficient) in one of these two things while being utterly ignorant of the other.

As a front-end, you need to have some style application skills (CSS), but not necessarily design skills

Can I choose to avoid CSS?

I wish I could tell you out loud: Forget CSS, just focus 100% on JS.

But the truth is: I can’t. As long as you want to go the front-end route, you will inevitably have to work with CSS and learn some CSS.

I’ve learned from experience that once you know a little more about CSS, it doesn’t seem that difficult, even a little fun. It’s also satisfying to discover that I can apply styles correctly to a page and know which parameters to change to make it look the way I want it to.

What should I do?

Since you can’t escape, learn some tricks to make CSS less difficult.

The framework

The CSS framework allows you to develop projects quickly, and it makes up for any lack of design skills. Typically, they can be installed via NPM/YARN, or deployed via CDN. Each framework has its own unique style, so you need to weigh your choices. CSS frameworks can help you build beautiful applications that avoid a lot of styling (at least not that much).

Here are some popular frameworks (I picked some that are React compatible) :

  • Bootstrap – very popular (note: lots of q&A on SO) and very formal looking. The latest version (V4) looks more modern than the old one. You can customize the style and change the look of it with free and paid themes. If you are using React, you can use React – Bootstrap to get a large number of prefabricated components such as modern controls, pop-ups, forms, and more.

  • Semantic UI — Another popular CSS framework for React components, it has more components available than Bootstrap and is (I think) more modern in appearance.

  • Blueprint — Blueprint looks better than Bootstrap and Semantic UI, at least in my opinion. But I haven’t used it myself. Blueprint stands out because it is written in TypeScript and supports TypeScript development. It doesn’t rely on TypeScript, but if you’re using TS, it’s worth a try.

In addition to the above three, there are many useful CSS frameworks. Here are some lists that support React.

If frameworks are meant to keep CSS out of your system, the following two methods are more straightforward to make CSS easier for you.

Flexible layout (Flexbox)

Elastic layout is a modern layout that uses CSS to present content. It’s a lot simpler than the float layout you had before (or the muddle you had five minutes ago). It has good browser compatibility and solves some of CSS’s epic problems, such as vertical centering, very simply.

Look here:

Imagine gracefully centring the red square! All you need to do is add three lines of CSS statements to the outer gray block:

display: flex;           /* turn flexbox on */
justify-content: center; /* center horizontally */
align-items: center;     /* center vertically */
Copy the code

If you right click on the outer gray block in your browser and look at the element, you’ll see that it has a lot more than three lines in it… But the extra ones don’t center the red square. The added code gives it a gray border, making it a rectangular block centered horizontally in the article (margin: an auto), with the bottom margin giving some space to the text below.

If you’re interested in flexible layouts, there’s an excellent complete guide to flexible layouts in CSS Tricks, which is highly recommended. Flexible layouts have really helped me use CSS better, and it’s also a tool I’m currently working on to solve layout problems.

CSS Grid Layout

Grid layout is a more modern layout method, which is more powerful than elastic layout. The former can solve two-dimensional (row and column) layouts, while the latter is better at solving single row or column layouts. It works well in browser compatibility. CSS Tricks says:

As of March 2017, most browsers, such as Chrome (including Android), Firefox, Safari (including iOS), and Opera, will no longer use prefixes to apply grid layouts. It is also supported by IE 10 and 11, but is based on an outdated syntax. The age of grid layout is coming!

At the time of writing this article, I have only experimented with grid layouts in typography. It is more powerful and complex than elastic layouts. I find that for the most part the flexible layout works well for my needs. Grid layout is my next goal to learn.

Those interested in learning more can read the complete guide to grid layout in CSS Tricks

A more operational approach

There are a number of useful strategies for solving CSS problems. Avoid guessing at random or copying and pasting directly from StackOverflow whenever possible.

Try a more reliable approach.

  • Positioning elements (elastic, grid, absolute positioning of child elements in relative positioning parent elements)
  • Sets the margin and padding values of the element
  • Set the border
  • Set a background color
  • Then refine the details — add shadows, set the hover/:active/: Focus adjustment style, and so on.

In summary, classic software engineering principles such as DRY (Don’t Repeat Yourself) and Law of Demeter can be applied to style layouts. As an example, consider how to combine profile pictures with user information:

We found that each element was 20 pixels away from the edge, so one way to do this would be to set a margin of 20px for both elements.

But there are downsides to this. First, repeat the problem: if margin values need to be changed, we need to change them in two places.

Second, shouldn’t it be the responsibility of the outer box to determine the distance from the edge, rather than the inner elements themselves?

A better solution is to set the padding value of the outer box to 20px so that the inner elements don’t have to worry about their position. This also makes it easy to add new elements to the box — you don’t have to explicitly declare the location of each element

This is just a small example to make it clear that thinking through a problem with a logical approach can make layout much easier.

Practical steps

  1. Find three layout styles and copy them. These can be widgets from the site you’re using (a single tweet, a photo card, etc.) or real-world content such as credit cards, book covers, etc.
  2. Read the complete manual on flexible layouts.
  3. Use an elastic layout to implement the layout you selected in Step 1.
  • Follow me on Twitter @dceddia

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.