Die Macht des Klassenwechsels

Die Leute reagierten ziemlich positiv auf „Hey Designer, wenn ihr nur eine Sache über JavaScript wissen müsst, würde ich euch das empfehlen.“ Selbst die YouTube-Kommentare waren positiv.

Hey Designer, wenn ihr nur eine Sache über JavaScript wissen müsst, würde ich euch das empfehlenhttps://#/X4DKhGzze3

(Video + Artikel)

— Chris Coyier (@chriscoyier) 23. November 2016

Benjamin De Cock erwähnte, dass er nicht nur zustimmt, dass das Ändern von Klassen das Wichtigste ist, was ein Webdesigner in JavaScript wissen kann, sondern dass er auch eine Mini-Bibliothek um diese Idee herum gebaut hat.

@chriscoyier 100% Zustimmung – genau deshalb habe ich https://#/txfQnMfpbx gemacht, es macht ausschließlich das.

— Benjamin De Cock (@bdc) 23. November 2016

Es hat eine *wirklich ungewöhnliche* Art der Konfiguration. Man verwendet einfache Sprache, innerhalb eines <code>-Tags, um ihm zu sagen, welche Klassen beim Klicken geändert werden sollen, wie zum Beispiel

clicking on "h1" removes class "open" on "h1.open"
clicking on "h1" adds class "open" on "target"

Hier ist ein Fork des „Level-Up“-Demos aus diesem Video, stattdessen mit uilang gemacht

Sieh dir den Pen Klassen auf Dingen ändern von Chris Coyier (@chriscoyier) auf CodePen an.

Ziemlich cool.

Jeremy Keith hatte auch eine gute Formulierung dafür

Es erinnert mich an die alte jQuery-Philosophie: Etwas finden und damit Dinge tun.

Ich bleibe aber bei meiner Meinung. Wenn Sie sich in JavaScript einarbeiten wollen, ist das Erlernen des Auswählens von Elementen und des Änderns von Klassen ohne jegliche Bibliotheken eine großartige Möglichkeit, dies zu tun.

Kommentare

Brad Westfall

# 1. Dezember 2016

Ja, das ist es, was ich Anfängern beibringe, wenn ich den Unterschied zwischen den drei Technologien (HTML, CSS, JS) erklären möchte. Manchmal mache ich eine rote Box mit einem Div, das beim Anklicken grün wird, ähnlich dem, was Sie mit dem Umschalten gemacht haben. Dann mache ich die grüne Box zu einem Kreis. Bisher gähnt das Publikum. Dann hatte ich noch eine Eigenschaft und das lässt die Augen aller aufleuchten und ich höre ein hörbares Aufstöhnen.

transition: all 2s

Ich denke, dann sehen sie die Macht

Brad Westfall

Permalink zum Kommentar# 1. Dezember 2016

Entschuldigung, ich habe hauptsächlich auf den ersten Teil des Artikels über das Lehren geantwortet. Das Werkzeug scheint auch nett zu sein :)

Dänisch

# 1. Dezember 2016

Wahnsinn, wir können also wirklich so etwas schreiben, echt!
`beim Klicken auf "#main-nav a" wird die Klasse "active" von "#main-nav a.active" entfernt beim Klicken auf "#main-nav a" wird die Klasse "active" auf "target" angewendet„

Können Sie mir sagen, wo ich Dokumentation zu diesen Code-Befehlen finde? Großartig, Chris! Sie haben es getroffen!

Agop

# 1. Dezember 2016

Ziemlich coole Idee, aber warum englische Schrift in einem <code>-Tag? Setzen Sie es zumindest in ein <script type="uilang">-Tag.

Oder, noch besser, bringen Sie die *grundlegenden* JS-Objekte bei, indem Sie den Designer etwas schreiben lassen wie

<script>
    var autoClickClasses = [
        { on: '.foo', action: 'add', cls: 'active' },
        { on: '#bar', action: 'add', cls: 'bar', target: '#baz' }
    ];
</script>

Keine Parsen notwendig, bessere Fehlermeldungen out-of-the-box, und zwingt Designer, sich mit den Grundlagen auseinanderzusetzen (Schreiben von Skript-Tags, Öffnen der Konsole usw.).

Coinoperatedgoi

# 2. Dezember 2016

Ich liebe das Konzept der Vereinfachung auf einfache englische Sprache. Ich könnte dies verwenden, um meinen Kindern das Programmieren näherzubringen.

Natürlich wird es JavaScript oder jQuery nicht wirklich lehren, aber zumindest beginnt es, die Konzepte der Manipulation von Elementen durch Code zu vermitteln.

Vasyl Terletskyi

# 2. Dezember 2016

Das ist so cool

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.