Heim Web-Frontend CSS-Tutorial Anwendung von CSS durch große Unternehmen

Anwendung von CSS durch große Unternehmen

May 01, 2017 pm 02:49 PM

HTML und CSS werden auf einigen Websites mit Statistiken zur Beliebtheit von Programmiersprachen manchmal als Programmiersprachen behandelt, aber die meisten Programmierer glauben nicht, dass sie zur Kategorie der Programmiersprachen gehören, da ihre verschiedenen Programmiersprachenfunktionen beispielsweise sehr unterschiedlich sind , Logiksteuerung, Schleifenoperationen, Funktionen usw. fehlen ernsthaft oder sind unzureichend. Sie können bestenfalls als Auszeichnungssprachen angesehen werden.

Da Webanwendungen jedoch in den letzten Jahren immer beliebter wurden, sind HTML5 und CSS3 allmählich ausgereifter geworden, und viele Programmierer haben das Gefühl, dass die Geschwindigkeit der Entwicklung immer vielfältiger und vielfältiger wird von CSS hat offensichtlich nicht mit den tatsächlichen Anforderungen Schritt gehalten, daher haben die Leute verschiedene Tools zur Verbesserung von CSS entwickelt, wie z. B. SCSS und LESS. Diese Tools erleichtern nicht nur die Verwaltung von CSS, sondern bringen auch enorme Verbesserungen mit sich Begriffe der Syntax und Semantik.

Das vergangene Jahr 2014 war ein interessantes Jahr. Viele namhafte Unternehmen haben über verschiedene Medien und Kanäle offengelegt, wie sie CSS nutzen. Es umfasst die von ihnen verwendeten Werkzeuge, die von ihnen verwendeten Methoden, ihre Gedanken zu diesen Methoden sowie die spezifischen Daten und Zahlen, die damit verbunden sind. Am typischsten ist Mark Ottos Einführung in CSS-Dateien auf Github. Der Zweck dieses Artikels besteht darin, sie zu Referenz- und Vergleichszwecken für jedermann zusammenzuführen.

Firma Präprozessor Präfix #Quellcode #Selektor Hilfswerkzeuge Beschreibung

Github SCSS Custom @mixins 100+ 7.000 SCSS-lint, Styleguide 2 endgültige Stylesheets, aufgrund der IE-Selektorbeschränkung

Buffer LESS Autoprefixer 93 5328 LESS lint 2 finale Stylesheets

​CodePen SCSS Autoprefixer 171 1186 .editorconfig Asset Pipeline

Ghost SCSS (libsass) Autoprefixer 36 1609 Allgemeine Richtlinien Open Source

Groupon Sass (Syntax unklar) Compass ?

Lonely Planet Sass Autoprefixer 150+ 1527 Rizzo, kein Linting BEM / OOCSS, Normalize.css, SVG-Symbole

Mittel WENIGER Benutzerdefinierte @mixins 50-100 ? Richtlinien Keine Verschachtelung, benutzerdefinierte Methode zur Benennung

Trello LESS Custom @mixins 44 2.426 Präprozessor 1 endgültiges Stylesheet, Namensraum

Anhang:

SCSS

Sass ist eine Erweiterung der CSS-Syntax (Cascading Style Sheets). Es ist die früheste und ausgereifteste CSS-Präprozessorsprache. Sie kann Variablen, Konstanten, Verschachtelungen, Funktionen und andere CSS-Funktionen verwenden effizienter und flexibler geschrieben werden. Sass wird schließlich legales CSS für den Browser kompilieren, was bedeutet, dass seine eigene Syntax für den Browser nicht leicht zu erkennen ist, da es sich nicht um ein Standard-CSS-Format handelt und dynamische Variablen innerhalb seiner Syntax verwendet werden können. Es ist mehr wie eine sehr einfache dynamische Sprache.

Tatsächlich verfügt Sass jetzt über zwei Sätze von Grammatikregeln: Einer verwendet weiterhin Einrückungen als Trennzeichen, um Codeblöcke zu unterscheiden; der andere Satz von Regeln verwendet geschweifte Klammern ({}) als Trennzeichen wie CSS. Die letztgenannte Grammatikregel wird auch SCSS genannt und wird von Versionen nach Sass3 unterstützt.

WENIGER

Als Open-Source-Projekt im Jahr 2009 wurde es stark von Sass beeinflusst, verwendete aber auch CSS-Syntax, was den meisten Entwicklern und Designern den Einstieg erleichterte. LESS bietet eine Vielzahl von Möglichkeiten, geschriebenen Code reibungslos in Standard-CSS-Code umzuwandeln. LESS ist häufig in vielen gängigen Frameworks und Tools zu finden (z. B. verwendet das Bootstrap-Framework von Twitter LESS).

Laut der Einleitung auf Wikipedia ist LESS eigentlich ein Open-Source-Projekt, das von Alexis Sellier unter dem Einfluss von Sass erstellt wurde. Zu dieser Zeit verwendete SASS Einrückungen als Trennzeichen zur Unterscheidung von Codeblöcken anstelle der in CSS weit verbreiteten geschweiften Klammern ({}). Um es für bestehende CSS-Benutzer komfortabler zu machen, hat Alexis LESS entwickelt und CSS-ähnliche Schreibfunktionen bereitgestellt.

Das obige ist der detaillierte Inhalt vonAnwendung von CSS durch große Unternehmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie Bootstrap in Vue So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

So schreiben Sie geteilte Zeilen auf Bootstrap So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch Apr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

So verwenden Sie die Bootstrap -Taste So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

So ändern Sie Bootstrap So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

So richten Sie das Framework für Bootstrap ein So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

So fügen Sie Bilder auf Bootstrap ein So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

See all articles