• CSS is Fine, It’s Just Really Hard
  • Jordan Scales
  • The Nuggets translation Project
  • Translator: ZhangFe
  • Proofreader: Bambooom, GY134340

People are nervous about CSS again. Now it’s time to write some satirical articles to make yourself feel better from the high ground, but here are some hot topics today.

CSS is great. It was just too hard, so I compiled it a little bit.

–

My name is Jordan, AND I’ve written a lot of JavaScript and CSS, and I’m really good at both. If CSS were an Olympic sport I would have easily qualified, but I might not have won a medal. But I don’t need a medal, because I have a computer-related trophy.

I’ve been drawing lots and lots of rectangles on my computer and phone for a long time. I wrote a lot of bad CSS, thousands of lines of bad Less code, and a lot of horrible Sass. They’re in my blood.

But I’ve also written a lot of great CSS! I used Borders for triangles, CSS Transforms for Bessel curves, 60fps scrolling animations, and tooltips that will blow your mind.

CSS is a great technology. Give me 30 seconds I can write some pure HTML and display some text and hyperlinks in the ugliest blue and Times New Roman font you’ve ever seen. Give me another 30 seconds and I’ll make that blue look nice again, and I can use a nice font.

It’s very intuitive. If I want all my links to look the same, I can always do that. Want nice borders and margins? no problem That’s why CSS was created.

The CSS has high performance. A lot of people have been trying to make CSS faster, more debugable, and more comfortable to look at for a long time. CSS is now the same way, and it’s great that we can use these complex tools for free. Not to mention countless blogs and cool examples that can be quickly retrieved using Google searches.

–

When I was younger, I found it horrible that EVERY time I wanted the border and hyperlinked text to be the same color I had to change it in two or three different places. Then I found LESS. Now I can define @WonderfulBlue and use it anywhere. Hey Jordan, CSS now has variables too…

Then I began to wonder why I left a long comment explaining that the width of #left-section is 546px (250 * 2 + 23 * 2). I started writing my math expressions using Less: 2 * @sectionWidth + 2 * @sectionPadding. I’m guessing you’re not familiar with Calc () because of its poor browser compatibility

When border-radius needed to be polyfilled, I prefixed it everywhere I used it. Later I used border-radius() mixins so I could just add code to them whenever I needed to use them. Well, what if you only used component categories –. Dude, can you stop for a second? Let me finish my article first. I was wrong. It’s okay. Don’t worry. Keep listening.

When CSS didn’t solve my problems, I started writing Less. They compile to CSS, and it works great on my users’ devices. It’s just that I’m 10 times busier, and I can’t write it alone.

–

I started working as a team, with lots of classes and variables on these large pages. My job is to navigate existing tags, reuse variables, refactor common patterns into their own utility classes and methods, and all the other things developers should do.

Some of these pages are already huge, so often we split our CSS (ok, Less) and JavaScript into separate files so users don’t have to download the code for the practice page to watch the video.

Sometimes we remove a lot of code and the style doesn’t look right. Because our home menu might want to have a.left-arrow class, but right now the class style is in the exercise.css file. Usually we don’t notice this because the.left-arrow is neatly rolled up after a few mouse clicks on the navigation bar. So you should have screenshots or a more rigorous QA process, what was I saying?

Well, it’s hard work! But the code will bug once in a while, and it’s cool to fix them and move on.

The solution to this problem is to use the form BEM and SMACSS. You’ll find that these novel class names with short lines and underscores are a great way to organize your code.

But, uh, it’s weird. Why would I take the time to manually reconstitute our CSS with these class names? It’s supposed to be automated and grunt’s job, but now it’s riddled with human error.

–

Now it’s time for a personal story about my grandmother writing machine code for the punch card machine by hand. Well, my grandmother didn’t do that. She worked for a senator on the welfare committee, and even though she was smart, she didn’t have enough time to do anything computer related. I could lie, but why do this?

Anyway, imagine if my grandmother actually wrote the machine code for the punch card? Full of human error again! There’s a bug? Knock again. Card on the floor? Pick it up and reorder it, or just start over. Strange, right? Can’t we just let machines do this for us?

That’s exactly what my theoretical grandmother did, she built a machine to clock her in. Well, she didn’t do it, but someone else did! We have cool stuff like assembly, FORTRAN, and C. People post on Twitter every step of the way and criticize new technology. Just use the punch machine! Just use FORTRAN! I just use C minus. Well, I guess that’s what people do.

–

This brings me to the main point of this article.

CSS is good, it’s fast, it’s been around for over 20 years, and it works for all kinds of applications.

But I really don’t like writing CSS. A lot of people don’t like it either, so we developed these great patterns for writing CSS. But I don’t like to write in those patterns either. I have better things to do. And JavaScript is cool. JavaScript actually has more possibilities. So I use JavaScript to write my CSS.

Put code like this:

const Example = () => (
  <h1 className={css(styles.heading, styles.callout)}>
    Hello, world!
  </h1>
)

const styles = StyleSheet.create({
  heading: {
    fontFamily: "Comic Sans MS",
  },
  callout: {
    color: "tomato",
  },
  unused: {
    width: 600,
  },
})
Copy the code

Become something like this:

<h1 class="heading_1flg42u-o_O-callout_1ih983s">Hello, world! </h1> ... .heading_1flg42u-o_O-callout_1ih983s { font-family: Comic Sans MS ! important; color: tomato ! important; }Copy the code

See yet? It’s still CSS, clean, perfect, textbook CSS. But I didn’t write it. The machine did it. The unused code has also been removed, and I can render

anywhere and make sure it’s styled.

I can present the Khan Academy learning menu anywhere

–

I’m on your side. CSS is great, and replacing them all at once would be silly. Just as FORTRAN does not replace low-level assembly code, Aphrodite and Styled – Components do not replace CSS. They are writing CSS.

But please don’t tell me to learn CSS again. I know CSS. Scroll up. I have a computer trophy. My CSS is great, but it’s better now because I’m trying to remove human error from it as much as possible. Shouldn’t we be celebrating?

Hey, I also promise you THAT I will stop badmouthing CSS, if the words are much less than this article, it is more suitable for a theme tag, let’s make up, shall we?

–

Follow me on Twitter so we can argue with each other. If I had a book, I might link here, but no one would offer me a book deal. Hope you enjoyed this article ❤

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. Android, iOS, React, front end, back end, product, design, etc. Keep an eye on the Nuggets Translation project for more quality translations.