Originally by Jeremy Keith

Translator: UC International research and development Jothy


Welcome to the “UC International Technology” public account, we will provide you with the client, server, algorithm, testing, data, front-end and other related high-quality technical articles, not limited to original and translation.

There is a worrying tendency in programming these days for “real” programmers to turn their noses up at CSS. They point out that it is a declarative language, not a full-featured programming language. Well, well, well, it’s not even a scripting language.

That may be true, but it doesn’t mean CSS isn’t powerful. Its strength lies in its differences from traditional languages.

Take a CSS selector. At the most basic level, they work like conditional statements. This is a standard if statement:

The condition must be true to execute the code in curly braces. Sound familiar?

This is a very simple mapping, but what if conditional statements are more complex?

So, here’s what the descendant selector does:

In fact, by using subcombinators, sibling combinators, and adjacent sibling combinators, we can get more specific information:

  • condition1 > condition2

  • condition1 ~ condition2

  • condition2 + condition2

AND is only part of Boolean logic. There is, OR:

In CSS, we use commas to separate conditions:

We also use the: Not () pseudo-class to complete the set of Boolean possibilities. If you add quantity queries, via: nth-Child and its ilk, CSS looks more turing-complete. I’ve seen people build state machines using adjacent sibling combinators and: Checked pseudo-classes.

Anyway, my point is that CSS selectors are very powerful. However, we often deliberately choose not to use this power. OOCSS(Object-oriented CSS), BEM, and Smacss exist for precisely the purpose of limiting the capabilities of selectors to class selectors.

On the face of it, this seems an odd choice. After all, we don’t deliberately limit ourselves to a subset of programming languages, do we?

The answer is that we do, and we have. This is where template languages come in. Whether it’s Smarty or Twig for PHP or Mustache, Nunjucks or Handlebars for JavaScript, they’re all small and beautiful. Some people pride themselves on their lack of logic. If you find yourself trying to do something that the templated language doesn’t provide, then that’s a good sign that you don’t have to try to do it in templates; It should be done in the controller.

Thus, template languages exist to force simplification and ensure that complexity occurs elsewhere. This is similar to the story of BEM et al. If you find that you can’t select something in your CSS, you may need to add another class name to your HTML. Complexity is limited to HTML tags to keep CSS more straightforward, modular, and maintainable.

But let’s not forget that this is also an option. It’s not that CSS itself can’t perform complex conditions. Quite the opposite. It is precisely because CSS selectors (and cascades) are so powerful that we choose to draw the line.

英文原文 :

https://adactio.com/journal/14574


Preview: The 13th D2 Front-end Technology Forum will be held in Hangzhou on January 6th, 2019



Good article recommendation:

I want to learn Flutter, but I don’t know how to start?



UC International Technology is committed to sharing high quality technical articles with you

Please follow our official account and share this article with your friends