这只是一个实际的例子，说明为什么CSS是声明式的，而JavaScript是命令式的。

假设我们有这个导航栏，用户当前正在查看“探索”选项，所以它被标记为当前选中。

<ul>
  <li class="selected">
    <p>Explore</p>
  </li>
  <li>
    <p>Suggestions</p>
  </li>
</ul>

我们希望当前选择的选项的标题是蓝色的，我们如何实现这与CSS和JavaScript?

CSS

li.selected > p {
  color: blue;
}

李在这里。Selected > p声明了我们想要属性颜色的元素的模式:蓝色;待应用。结果是“探索”用蓝色突出显示，而“建议”没有。注意，我们的代码描述了我们想要发生什么，而不是如何发生。CSS选择器引擎如何找到“探索”?我们不知道，通常也不在乎。

JavaScript

let liElements = document.getElementsByTagName("li")
for (let i = 0; i < liElements.length; i++) {
  if (liElements[i].className === "selected") {
    let children = liElements[i].childNodes
    for (let j = 0; j < children. length; j++) {
      let child = children[j]
      if (child.nodeType === Node.ELEMENT_NODE && child.tagName === "P") {
        child.setAttribute("style", "color: blue")
      }
    } 
  }
}

这段代码要长得多，也更难理解。除此之外，它将蓝色应用于所选选项，但当所选类被删除时，它永远不会取消应用它。蓝色只有在页面重新加载时才会重置。注意，在这段代码中，我们一步一步精确地指定了需要做什么以及如何做。

结论

每种编程范例都有其优点。

CSS(声明)

简洁的 作为程序员，我们不能控制CSS内核如何做我们需要的事情。这给了CSS核心开发人员在任何时候改变CSS选择器实现的机会。为什么CSS核心需要改变?也许，CSS开发人员找到了一种更快的方法来应用属性。

JavaScript(必须)

定制。我们控制代码如何实现目标的所有方面。 适合解决各种各样的问题

再举一个手机应用开发的例子。在iOS和Android中，我们有界面构建器，在那里我们可以定义应用程序的UI。

使用这些生成器绘制的UI本质上是声明性的，我们可以在其中拖放组件。实际的绘图发生在框架和系统下面，由框架和系统执行。

但我们也可以在代码中画出整个组件，这在本质上是必要的。

此外，一些新语言，如Angular JS，专注于以声明方式设计ui，我们可能会看到许多其他语言提供同样的支持。就像Java在Java swing或Java FX中没有任何好的声明性方法来绘制本地桌面应用程序，但在不久的将来，他们可能会这样做。

命令式编程 一种需要编程规程的编程语言，如C/ c++， Java, COBOL, FORTRAN, Perl和JavaScript。用这种语言编写程序的程序员必须基于数据处理和编程知识，开发出适当的操作顺序来解决问题。

声明性编程 一种不需要编写传统编程逻辑的计算机语言; 用户专注于定义输入和输出，而不是过程式编程语言(如c++或Java)中所需的程序步骤。

声明性编程的例子有CSS、HTML、XML、XSLT、RegX。

Imperative programming requires developers to define step by step how code should be executed. To give directions in an imperative fashion, you say, “Go to 1st Street, turn left onto Main, drive two blocks, turn right onto Maple, and stop at the third house on the left.” The declarative version might sound something like this: “Drive to Sue’s house.” One says how to do something; the other says what needs to be done. The declarative style has two advantages over the imperative style: It does not force the traveler to memorize a long set of instructions. It allows the traveler to optimize the route when possible.

卡尔弗特，C库尔卡尼，D(2009)。LINQ至关重要。艾迪森·韦斯利48岁

From my understanding, both terms have roots in philosophy, there are declarative and imperative kinds of knowledge. Declarative knowledge are assertions of truth, statements of fact like math axioms. It tells you something. Imperative, or procedural knowledge, tells you step by step how to arrive at something. That's what the definition of an algorithm essentially is. If you would, compare a computer programming language with the English language. Declarative sentences state something. A boring example, but here's a declarative way of displaying whether two numbers are equal to each other, in Java:

public static void main(String[] args)
{
    System.out.print("4 = 4.");
}

另一方面，英语中的祈使句给出命令或提出某种请求。因此，命令式编程只是一个命令列表(做这个，做那个)。下面是在Java中，在接受用户输入时显示两个数字是否相等的强制方法:

private static Scanner input;    

public static void main(String[] args) 
{
    input = new Scanner(System.in);
    System.out.println();
    System.out.print("Enter an integer value for x: ");
    int x = input.nextInt();
    System.out.print("Enter an integer value for y: ");        
    int y = input.nextInt();

    System.out.println();
    System.out.printf("%d == %d? %s\n", x, y, x == y);
}

从本质上讲，声明性知识跳过某些元素，在这些元素之上形成一个抽象层。声明式编程也是如此。

这里借用菲利普·罗伯茨的一句话:

命令式编程告诉机器如何做某事(导致你想要发生的事情) 声明性编程告诉机器你想要发生什么(然后计算机找出如何去做)

两个例子:

1. 将数组中的所有数字加倍

命令式地:

var numbers = [1,2,3,4,5]
var doubled = []

for(var i = 0; i < numbers.length; i++) {
  var newNumber = numbers[i] * 2
  doubled.push(newNumber)
}
console.log(doubled) //=> [2,4,6,8,10]

声明:

var numbers = [1,2,3,4,5]

var doubled = numbers.map(function(n) {
  return n * 2
})
console.log(doubled) //=> [2,4,6,8,10]

2. 对列表中的所有项求和

命令式地

var numbers = [1,2,3,4,5]
var total = 0

for(var i = 0; i < numbers.length; i++) {
  total += numbers[i]
}
console.log(total) //=> 15

以声明的方式

var numbers = [1,2,3,4,5]

var total = numbers.reduce(function(sum, n) {
  return sum + n
});
console.log(total) //=> 15

请注意，命令式示例涉及如何创建一个新变量，改变它，并返回新值(即，如何使某事发生)，而声明式示例执行给定的输入，并根据初始输入返回新值(即，我们想要发生什么)。