Sie sind gerade an Bord eines vorhandenen Projekts an Bord geworden, um einen abfahrten Entwickler zu ersetzen. Oder vielleicht haben Sie gerade dieses alte Projekt von vor ein paar Jahren er?ffnet. Sie stehen vor Angst und Horror, wenn Sie sich den Code ansehen. Sie k?nnen nur eines tun: Aufr?umen Sie dieses Chaos auf! Klingt dir das bekannt? Natürlich begegnen wir alle irgendwann irgendwann.

Sie wissen, dass das Aufr?umen einer CSS -Codebasis eine enorme Aufgabe sein wird. Es gibt so viele Dinge zu tun, doch so wenig Zeit - besonders wenn der Kunde/Chef/Kollegen das gute alte Sprichwort ?nicht reparieren, was nicht gebrochen ist“. Sie wissen nicht wirklich, wo Sie anfangen sollen!

Nun, Sie haben Glück, weil ich meinen Anteil an CSS-Aufr?umarbeiten gemacht habe und ich hier einige Hinweise geben kann, um damit zu beginnen. Es geht nur darum, die niedrig h?ngenden Früchte zu greifen.

Key Takeaways

• Linke einer CSS -Codebasis ist der erste Schritt, um sie aufzur?umen, da sie potenzielle Fehler und schlechte Praktiken identifiziert. Tools wie SCSS-Lint k?nnen verwendet werden, um den SASS-Ordner auf Fehler zu überprüfen.
• Fixieren von Loting -Fehlern k?nnen erledigt werden, indem die Dateien nacheinander durchlaufen und das Aktualisieren des Falsches oder durch Verwendung von Such- und Ersetzen von Funktionen zur Behebung von gemeinsamen Problemen aktualisieren.
• Die überarbeitung der Struktur der Codebasis ist entscheidend. Es spielt keine Rolle, welche Methodik ausgew?hlt wird, solange sie eingehalten ist. Dies k?nnte einen Umstrukturierungscode beinhalten, um eine ausgew?hlte Methodik einzuhalten oder wiederverwendbare Schnittstellenbrocken zu identifizieren und ihre Stile in ihre eigenen Teils zu extrahieren.
• Das Entfernen von überschüssigem Code ist der Schlüssel zu guten CSS. Unbenutzte Erkl?rungen k?nnen technische Schulden stapeln. Daher ist es wichtig, regelm??ig zu prüfen, ob jede CSS -Deklaration einen Einfluss hat, und wenn nicht, entfernen Sie sie.
• regelm??ig Arbeiten und logischerweise bündelnde Ver?nderungen in kleinen Commits erleichtert es, in die Geschichte zurückzukehren, wenn etwas schief geht. Dies ist besonders wichtig, wenn Sie eine CSS -Codebasis neu aufstellen, da es wahrscheinlich ist, dass einige Dinge auf dem Weg brechen.

Lint zum Teufel raus

In diesem Abschnitt gehe ich davon aus, dass Ihre Codebasis SASS verwendet. Nicht nur, weil es heutzutage eine vernünftige Annahme ist, sondern auch, weil ich festgestellt habe, dass die schlechte Verwendung von SASS oft teilweise für eine unordentliche Codebasis verantwortlich ist. Trotzdem ist dieser Artikel für Sie m?glicherweise relevant, auch wenn Sie keinen Pr?prozessor verwenden. Tragen Sie also bitte mit mir.

Das erste, was ich gerne mache, wenn ich eine Codebasis übernehmen muss, ist FINT. Das Lining ist der Prozess des Ausführens eines Programms, das nach potenziellen Fehlern und schlechten Praktiken sucht. Ich glaube, dass es der erste Schritt ist, den Code sauber zu machen, um den Code gut zu machen. Hier ist ein aufschlussreicher Stapelüberlauf -Thread über die Etymologie des Wortes ?Lint“.

SASS verfügt über einen Ruby-basierten Linter namens SCSS-Lint. Sie k?nnen es selbst konfigurieren oder die empfohlene Konfigurationsdatei von Sass-Guidelines abrufen, um sofort loszulegen. Es gibt auch eine Node.js-Version namens Sass-Lint, obwohl sie nicht 100% interoperabel sind, sodass Ihre Kilometerleistung variieren kann.

Versuchen Sie, SCSS-Lint in Ihrem Sass-Ordner auszuführen, um auf Fehler zu suchen. Die Chancen stehen gut, dass Sie mit einer Fehlerwand überw?ltigt werden. Dies ist normalerweise die Zeit, in der Sie versucht sind, aufzugeben. Aber tragen Sie es mit mir! Zu diesem Zeitpunkt k?nnen Sie entweder versuchen, Ihre Lining -Datei in Bezug auf Regeln, die Ihnen egal sind, etwas weniger streng zu machen, oder Sie k?nnen das Tier vorne angehen und die H?lle aus dem H?llen aus der H?lle herausholen!

Fixierungsstundenfehler gefunden

Es ist Zeit zu beheben, was behoben werden muss. Es gibt zwei M?glichkeiten, dies zu tun. Die erste besteht mit ein wenig Suche und Ersetzen. Ich wei? nichts über dich, aber ich liebe regul?re Ausdrücke, also macht es immer ziemlich viel Spa?, wenn ich das tun muss.

Angenommen, Sie m?chten beispielsweise die fehlende führende Null vor allen schwimmenden Punktzahlen hinzufügen (d. H. Einen numerischen Wert zwischen 0 und 1)-die führende Regel von SCSS-Lint. Sie k?nnen nach s. (D) suchen (alle Zahlen, die einem Platz und einem Punkt folgen) und ihn durch 0 $ 1 (ein Speicherplatz, ein Null, einen Punkt und die gefundene Zahl) ersetzen. Oder wenn Sie die Randzero-Regel für SCSS-Lint ehren m?chten, k?nnen Sie Grenze ersetzen: Keine mit Grenze: 0 in Ihrer IDE. Einfach wie Kuchen!

Ich habe kürzlich das SCSS-Lint-Regex-Repository auf GitHub gestartet, um diese regul?ren Ausdrücke an einem Ort zu sammeln. Schauen Sie sich unbedingt an, wenn Sie mit der Linie eines gro?en Projekts zu k?mpfen haben. Achten Sie auch vor der Suche und Ersetzen, da es manchmal unerwartete Nebenwirkungen hat. Achten Sie nach jedem Ersatz, um einen Git -Diff durchzuführen, um zu überprüfen, was aktualisiert wurde, damit Sie sicherstellen k?nnen, dass Sie keinen Fehler eingeführt haben.

Sobald Sie mit einer Transversal -Bearbeitung fertig sind, entkommen Sie nicht der manuellen Datei, die alles gereinigt hat, um alles zu reinigen, was gereinigt werden muss (schlechte Eindrücke, fehlende oder zus?tzliche leere Linien, fehlende R?ume usw.). Es dauert viel Zeit, aber es wird für den n?chsten Schritt viel helfen, daher ist es wichtig, damit zu beginnen.

überarbeiten Sie die Struktur

Was ich oft beunruhigend finde, wenn ich zu einem vorhandenen Projekt bin, ist das Fehlen einer ordnungsgem??en Projektarchitektur. Es gab wahrscheinlich ganz zu Beginn eines, aber die Dinge geraten normalerweise au?er Kontrolle und diese kurze Idee der Methodik ging irgendwo auf der Linie verloren. Trotzdem ist das unglaublich wichtig.

Es spielt keine Rolle, welche Methodik Sie w?hlen, solange Sie sich damit wohl fühlen und sich daran halten. Es k?nnte SMACSS sein, es k?nnte 7-1 sein, es k?nnte ITCSS-w?hlen Sie Ihre Wahl! Versuchen Sie dann, Dinge umzustrukturieren, um den Code für die ausgew?hlte Methodik konform zu machen. Ich verwende meistens das 7-1-Muster, das in Sass-Richtlinien eingeführt wurde. Ich gebe Ihnen also ein paar Tipps, um die Dinge zu verbessern, wenn Sie sich für diesen Weg entscheiden.

Beginnen Sie mit dem Ordner Anbieter , da er keine Fragen stellt. Bewegen Sie eine nicht verpackte Bibliothek von Drittanbietern in die Bibliothek (dh jede Bibliothek, die nicht als regelm??ige Abh?ngigkeit über NPM oder Bundler behandelt wird).

Fahren Sie dann mit dem Ordner Abstracts fort. Stellen Sie sicher, dass alle Variablen, Mixins, Funktionen und Platzhalter des Projekts dort definiert sind. Fühlen Sie sich frei, es so zu organisieren, wie Sie es hier haben m?chten, solange Sie nicht mit Variablen und Mischungen in allen Dateien der Codebasis enden. Zu diesem Zeitpunkt neige ich auch dazu, nach unn?tigen Variablen (und Mischungen) zu suchen. In der Tat finde ich oft unz?hlige Variablen, die nur ein- oder zweimal verwendet werden (mit anderen Worten, es lohnt sich nicht).

Sobald Sie damit fertig sind, ist es Ihr Anruf. Sie k?nnen entweder versuchen sicherzustellen Insgesamt lebt Layout dort und ist korrekt dokumentiert. Schlie?lich müssen Sie die -Komponenten in Angriff nehmen, was wahrscheinlich eine kolossale Aufgabe ist. Mein Rat hier w?re, zu versuchen, Komponenten so klein und wiederverwendbar wie m?glich zu gestalten. Es spielt keine Rolle, ob Sie die Zahl verdoppeln, solange Sie sie kontext assern und leicht zu lesen, zu verstehen und zu aktualisieren k?nnen.

Zum Beispiel ist es keine schlechte Sache, eine so kleine Komponente zu haben:

denken modular. Klein. Einfach. Unabh?ngiger.

Entfernen Sie den überschüssigen

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

Ich glaube, der gr??te Unterschied zwischen gutem und schlechter CSS ist die Menge an Code, die erforderlich ist, damit es funktioniert. CSS als Sprache ist ziemlich leicht zu verstehen. Jeder k?nnte so ziemlich jedes Layout mit ein wenig Versuch und Irrtum machen. Allerdings ist es eine echte Herausforderung, etwas mit dem nackten Minimum an CSS zu bauen, damit es funktioniert, und um es so zu halten.

Es ist über 3 Jahre vergangen, aber dieser Tweet von Nicolas Gallagher bleibt mein Lieblingszitat zu CSS:

Innerhalb von "schlechten" CSS ist es sehr schwierig, "gute" CSS zu schreiben. Innerhalb des ?guten“ CSS ist es sehr einfach, ?schlechte“ CSS zu streichen und Code -Rot zu initiieren.

- Nicolas (@necolas) 26. September 2012

Veralterung ist die wirkliche Pest von CSS. Wenn wir etwas mit CSS bauen, gehen wir oft hin und her und versuchen ein paar Dinge - bis zu dem Punkt, an dem wir normalerweise ein paar nicht ben?tigte Erkl?rungen haben. Zum Beispiel ein überlauf: versteckt, der unn?tig wurde, oder eine Schriftgr??e, die keinen Unterschied macht. Indem wir sie verlassen, stapeln wir technische Schulden. Das ist schlecht ?.

Wenn CSS das Schreiben von CSS, die ich gerne mache, bevor ich ein Stück CSS -Arbeit begangen habe, wird die Entwickler -Tools ge?ffnet und jede CSS -Erkl?rung umgeschaltet, die ich geschrieben habe, um festzustellen, ob sie jeweils einen Einfluss haben. Wenn sie es nicht tun, frage ich mich, warum sie überhaupt dort sind. Wenn sie sich als unn?tig herausstellen, entferne ich sie. Wenn ich etwas so Einfaches mache, stelle ich sicher, dass nur nützlicher Junk-Free-Code in das Repository gedrückt wird.

Aufr?umen Eine CSS -Codebasis ist nicht anders. Suchen Sie eine Komponente, die Sie aufr?umen m?chten, die Devtools ?ffnen und versuchen, nutzlose Erkl?rungen zu finden. Manchmal müssen wir einige Styles oben im Baum bewegen, um von der Kaskade zu profitieren. Betrachten Sie das folgende Beispiel auf das n?tige Minimum:

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

Eine saubere M?glichkeit, dies zu optimieren, w?re, die Farbe zu verschieben: rote Deklaration an den Elternteil und lassen Sie die Kaskade den Rest erledigen. Natürlich sind Beispiele im wirklichen Leben normalerweise komplexer, aber das zeigt, wie wir manchmal vergessen, das c in *c *ss.

zu nutzen

CSS ist klug, Sie sollten zu

sein

Eine Sache, auf die ich oft sto?e, ist das mangelnde Verst?ndnis der Erb-, anf?nglichen und aktuellen Color -Werte. Angenommen, Sie m?chten, dass Ihre Links die gleiche Farbe haben wie der Kerntext (weil die Unterstreichung ausreicht). Das Folgende ist eine schlechte -Stumweise:

<span><span>.parent</span> {
</span>  <span>/* ...stuff here... */
</span><span>}
</span>
<span><span>.child-A</span> {
</span>  <span>color: red;
</span><span>}
</span>
<span><span>.child-B</span> {
</span>  <span>color: red;
</span><span>}</span>

Der Grund, warum es sich um eine schlechte L?sung handelt, sollte offensichtlich sein: Wenn Sie die Farbe der K?rperkopie ?ndern, wird die Linkfarbe deSynchronisiert. Wenn Sie eine Variable verwenden m?chten, machen Sie die Dinge unn?tig komplex. Wenn ein Link in einem grauen Absatz (zum Beispiel in einem Blockquote) landet, passt er nicht mit der Farbe überein!

cs

<span>a {
</span>  <span>color: black; /* Nope */
</span><span>}</span>

Es ist so einfach. Dank dessen werden Links immer die Farbe ihrer Eltern erben. Das k?nnte auch die Farbe seiner Vorfahren erben und so weiter.

In der gleichen Richtung ist es eine schlechte Idee, einen Hardcode-Wert zu einer schlechten Idee zu erhalten. CSS hat den anf?nglichen magischen Wert genau für ein solches Szenario. Obwohl es normalerweise keinen Unterschied macht, gibt es F?lle, in denen es wirklich wichtig ist, wie bei richtungsbasierten Eigenschaften wie Text-Align. Beim Zurücksetzen von Text-Align kann das Linken der Linken für RTL-Sprachen sch?dlich sein. Initiale w?re der richtige Weg (oder noch besser, aber dieser Wert hat keine Unterstützung in IE9).

Zu guter Letzt ist die Anzahl der CSS -Entwickler, die nicht wissen, dass CurrentColor zu hoch ist. Wenn Sie nichts davon wissen, fühlen Sie sich nicht schlecht, aber fragen Sie sich Folgendes: Wie kommt es, dass sie, wenn sie keine Grenzfarbe angibt, automatisch der Farbe des Elements übereinstimmt? Dies geschieht, da der Standardwert für die Grenzfarbe aktuell ist (überprüfen Sie die Spezifikation). Ein ziemlich offensichtlicher Name, werden Sie zugeben.

Mein Punkt ist, wenn Sie m?chten, dass etwas die Farbe mit der Schriftart eines Elements teilen, verwenden Sie CurrentColor anstelle eines hart codierten Werts oder einer SASS-Variablen.

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

all diese Dinge sind grundlegende CSS -Funktionen. Sie sind das, was CSS zu dem macht, was es ist. Trotzdem sind sie unglaublich unterzogen. Wenn Sie also den Code einer Komponente verbessern müssen, sind dies die Art von Verbesserungen, die Sie vornehmen m?chten.

Holen Sie sich Ihr Git gut

Refactoring einer CSS -Codebasis ist viel von der Arbeit. Sie werden wahrscheinlich Dutzende und Dutzende von Dateien aktualisieren. Sie werden auch wahrscheinlich die Dinge auf dem Weg brechen. Seien wir ehrlich, wir alle machen Fehler, und wenn es mit so gro?en Ver?nderungen zu tun hat, w?re es sehr beeindruckend, wenn es Ihnen gelungen w?re, alles ohne einen winzigen Fehltritt zu reinigen.

Aus diesem Grund empfehle ich Ihnen dringend, mit Ihrer Versionskontrolle sehr eifrig zu werden (ich denke, es ist fair, hier Git anzunehmen). Das bedeutet, dass Commits eine Sache und eine Sache nur so tun, dass es m?glich ist, auf einen Schritt zurückzukehren, der einen Fehler enth?lt, ohne wie die H?lle mit Konflikten zu k?mpfen.

Ich wei?, dass für viele Menschen Git hart und dunkel ist, und es ist weit au?erhalb des Rahmens dieses Artikels, wie man es einfach macht. Sie müssen mir dies jedoch vertrauen: Machen Sie Ihre Git -Geschichte zu einem Gedicht, wenn Sie nicht wütend werden m?chten.

wickeln Sie es

ein

Lassen Sie uns zusammenfassen und ein wenig tl; dr für die faulen Leser:

Reinigen eines CSS/SASS -Projekts ist schwierig, da es schwierig ist, die Auswirkungen der Aktualisierung oder Entfernung einer CSS -Linie zu bewerten. Dies liegt haupts?chlich daran, dass CSS kaum überprüfbar ist. Aus diesem Grund muss man vorsichtig sein.

Beginnen Sie mit dem Leinen Ihres Codes, damit er hübsch wird. Beginnen Sie damit, damit sich Ihr Leben sp?ter leichter erleichtert. Dies ist auch ein guter Weg, um einen wertvollen überblick über den Zustand der Codebasis zu erhalten, ohne viel zu riskieren (das Fixieren syntaktischer Schmutz ist wahrscheinlich keine Probleme).

Stellen Sie als n?chstes sicher, dass Ihr Projekt eine Strukturmethode umfasst. Es spielt keine Rolle, welches, solange es richtig gemacht wurde. Wenn Ihr Projekt nicht wirklich in Komponenten orchestriert ist, w?re dies eine gute Gelegenheit, auf diesem Weg zu beginnen. Finden Sie wiederverwendbare Schnittstellenbrocken und extrahieren Sie ihre Stile in ihre eigenen Teils. Fühlen Sie sich frei, sie ein wenig zu dokumentieren, damit es einfacher wird und Sie ein Fortschrittsgefühl erhalten.

Sobald Sie das Projekt aufger?umt haben und alles an den richtigen Ort gebracht haben, ist es an der Zeit, das CSS selbst zu verbessern. überprüfen Sie, ob Sie zuerst die Dinge entfernen k?nnen. Wir schreiben oft viel zu viel Code. Versuchen Sie dann, den Code zu optimieren, damit er weniger wiederholt ist. Achten Sie darauf, dass Sie jedoch nicht zu übergie?en sind! Sie sollten Komplexit?t entfernen und nicht hinzufügen. Fühlen Sie sich auch frei, alles zu kommentieren, was Sie tun, das auf den ersten Blick nicht offensichtlich erscheint.

Beachten Sie schlie?lich Ihre Arbeit regelm??ig und logisch. Bündeln Sie Ihre ?nderungen in kleinen Commits, die jeweils eine einzige Sache machen, also ist es einfach, in die Geschichte zurückzukehren, wenn etwas schief geht.

zuletzt, aber nicht zuletzt vergessen Sie nicht zu feiern, wenn Sie fertig sind. Viel Glück!

h?ufig gestellte Fragen (FAQs) zum Reinigen einer CSS -Codebasis

Was ist die Bedeutung der Reinigung einer CSS -Codebasis? Erstens verbessert es die Lesbarkeit des Codes und erleichtert es anderen Entwicklern, zu verstehen und zu arbeiten. Zweitens verbessert es die Leistung der Website oder Anwendung, da unn?tiger oder redundanter Code entfernt wird. Dies kann zu schnelleren Ladezeiten und zu einer besseren Benutzererfahrung führen. Zuletzt ist eine saubere Codebasis leichter zu warten und zu debuggen, um Zeit und Ressourcen auf lange Sicht zu sparen.

Wie kann ich redundante oder unn?tige CSS -Code identifizieren? Helfen Sie mit, nicht verwendeten oder überflüssigen CSS -Code zu identifizieren. Dazu geh?ren Browser -Entwickler -Tools, CSS -Deckungs -Tools und verschiedene Online -Dienste. Darüber hinaus kann manuelle Code -überprüfung auch von Vorteil sein, insbesondere zur Identifizierung von Entlassungen oder Inkonsistenzen im Code. Eine CSS -Codebasis umfasst das Entfernen von nicht verwendeten oder redundanten Code, das Organisieren von Code logisch und konsistent, Kommentare zur Erl?uterung komplexer Codeabschnitte und das Einhalten an a Konsequente Namenskonvention. Darüber hinaus kann die Verwendung eines CSS -Pr?prozessors bei der Verwaltung und Verwaltung gro?er Codebasen helfen. übungen. Dies beinhaltet das Schreiben modularer, wiederverwendbarer Code, die Einhaltung einer konsistenten Namenskonvention und die Verwendung von Kommentaren zur Erl?uterung komplexer Codeabschnitte. Darüber hinaus k?nnen regelm??ige Codeüberprüfungen dazu beitragen, Probleme frühzeitig zu fangen, bevor sie zu gr??eren Problemen werden. Reinigen Sie eine CSS -Codebasis. Es erm?glicht die Verwendung von Variablen, Verschachtelung, Mixins und anderen Funktionen, mit denen der Code lesbarer und wartbarer werden kann. Darüber hinaus kann es dazu beitragen, Aufgaben wie Minification und Autoprefixing zu automatisieren und die Sauberkeit und Effizienz der Codebasis weiter zu verbessern.

Wie verbessert das Reinigen einer CSS -Codebasis die Website der Website? Dies kann zu schnelleren Ladezeiten und einer glatteren Benutzererfahrung führen. Durch das Entfernen unn?tiger oder redundanter Code kann die Wahrscheinlichkeit von Konflikten oder Fehler verringert werden, die die Leistung beeinflussen k?nnten. Auswirkungen SEO. Schnelle Lastzeiten, die durch Reduzieren der Menge an unn?tigen oder redundanten Code erreicht werden k?nnen, sind ein Faktor in der Suchmaschinenrangliste. Darüber hinaus kann eine saubere, gut strukturierte Codebasis Suchmaschinenbots erleichtern, die Site zu kriechen und zu indizieren. ??> Es stehen mehrere Tools zur Verfügung, mit denen die Reinigung einer CSS -Codebasis automatisiert werden kann. Dazu geh?ren CSS -Pr?prozessoren, Linter und Minifikatoren. Darüber hinaus gibt es Online -Dienste, die Ihre Codebasis analysieren und Verbesserungsbereiche identifizieren k?nnen.

Wie oft sollte ich meine CSS -Codebasis aufr?umen? , einschlie?lich der Gr??e der Codebasis, der Anzahl der daran arbeitenden Entwickler und der Komplexit?t des Projekts. In der Regel sollten jedoch regelm??ige Code -überprüfungen und -Reinigungen Teil des Entwicklungsprozesses sein, um sicherzustellen, dass die Codebasis sauber und wartbar bleibt. > Die Reinigung einer CSS -Codebasis kann eine komplexe Aufgabe sein, insbesondere für gro?e Legacy -Codebasen. Zu den Herausforderungen k?nnen die Identifizierung unbenutzter oder redundanter Code, die Aufrechterhaltung der Kompatibilit?t mit ?lteren Browsern geh?ren und sicherstellen, dass die ?nderungen nicht die vorhandenen Funktionen brechen. Darüber hinaus kann es zeitaufw?ndig sein, insbesondere ohne die Verwendung von Tools, um den Prozess zu automatisieren.

Das obige ist der detaillierte Inhalt vonReinigen Sie eine CSS -Codebasis. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!