• Guest
HabraHabr
  • Main
  • Users

  • Development
    • Programming
    • Information Security
    • Website development
    • JavaScript
    • Game development
    • Open source
    • Developed for Android
    • Machine learning
    • Abnormal programming
    • Java
    • Python
    • Development of mobile applications
    • Analysis and design of systems
    • .NET
    • Mathematics
    • Algorithms
    • C#
    • System Programming
    • C++
    • C
    • Go
    • PHP
    • Reverse engineering
    • Assembler
    • Development under Linux
    • Big Data
    • Rust
    • Cryptography
    • Entertaining problems
    • Testing of IT systems
    • Testing Web Services
    • HTML
    • Programming microcontrollers
    • API
    • High performance
    • Developed for iOS
    • CSS
    • Industrial Programming
    • Development under Windows
    • Image processing
    • Compilers
    • FPGA
    • Professional literature
    • OpenStreetMap
    • Google Chrome
    • Data Mining
    • PostgreSQL
    • Development of robotics
    • Visualization of data
    • Angular
    • ReactJS
    • Search technologies
    • Debugging
    • Test mobile applications
    • Browsers
    • Designing and refactoring
    • IT Standards
    • Solidity
    • Node.JS
    • Git
    • LaTeX
    • SQL
    • Haskell
    • Unreal Engine
    • Unity3D
    • Development for the Internet of things
    • Functional Programming
    • Amazon Web Services
    • Google Cloud Platform
    • Development under AR and VR
    • Assembly systems
    • Version control systems
    • Kotlin
    • R
    • CAD/CAM
    • Customer Optimization
    • Development of communication systems
    • Microsoft Azure
    • Perfect code
    • Atlassian
    • Visual Studio
    • NoSQL
    • Yii
    • Mono и Moonlight
    • Parallel Programming
    • Asterisk
    • Yandex API
    • WordPress
    • Sports programming
    • Lua
    • Microsoft SQL Server
    • Payment systems
    • TypeScript
    • Scala
    • Google API
    • Development of data transmission systems
    • XML
    • Regular expressions
    • Development under Tizen
    • Swift
    • MySQL
    • Geoinformation services
    • Global Positioning Systems
    • Qt
    • Dart
    • Django
    • Development for Office 365
    • Erlang/OTP
    • GPGPU
    • Eclipse
    • Maps API
    • Testing games
    • Browser Extensions
    • 1C-Bitrix
    • Development under e-commerce
    • Xamarin
    • Xcode
    • Development under Windows Phone
    • Semantics
    • CMS
    • VueJS
    • GitHub
    • Open data
    • Sphinx
    • Ruby on Rails
    • Ruby
    • Symfony
    • Drupal
    • Messaging Systems
    • CTF
    • SaaS / S+S
    • SharePoint
    • jQuery
    • Puppet
    • Firefox
    • Elm
    • MODX
    • Billing systems
    • Graphical shells
    • Kodobred
    • MongoDB
    • SCADA
    • Hadoop
    • Gradle
    • Clojure
    • F#
    • CoffeeScript
    • Matlab
    • Phalcon
    • Development under Sailfish OS
    • Magento
    • Elixir/Phoenix
    • Microsoft Edge
    • Layout of letters
    • Development for OS X
    • Forth
    • Smalltalk
    • Julia
    • Laravel
    • WebGL
    • Meteor.JS
    • Firebird/Interbase
    • SQLite
    • D
    • Mesh-networks
    • I2P
    • Derby.js
    • Emacs
    • Development under Bada
    • Mercurial
    • UML Design
    • Objective C
    • Fortran
    • Cocoa
    • Cobol
    • Apache Flex
    • Action Script
    • Joomla
    • IIS
    • Twitter API
    • Vkontakte API
    • Facebook API
    • Microsoft Access
    • PDF
    • Prolog
    • GTK+
    • LabVIEW
    • Brainfuck
    • Cubrid
    • Canvas
    • Doctrine ORM
    • Google App Engine
    • Twisted
    • XSLT
    • TDD
    • Small Basic
    • Kohana
    • Development for Java ME
    • LiveStreet
    • MooTools
    • Adobe Flash
    • GreaseMonkey
    • INFOLUST
    • Groovy & Grails
    • Lisp
    • Delphi
    • Zend Framework
    • ExtJS / Sencha Library
    • Internet Explorer
    • CodeIgniter
    • Silverlight
    • Google Web Toolkit
    • CakePHP
    • Safari
    • Opera
    • Microformats
    • Ajax
    • VIM
  • Administration
    • System administration
    • IT Infrastructure
    • *nix
    • Network technologies
    • DevOps
    • Server Administration
    • Cloud computing
    • Configuring Linux
    • Wireless technologies
    • Virtualization
    • Hosting
    • Data storage
    • Decentralized networks
    • Database Administration
    • Data Warehousing
    • Communication standards
    • PowerShell
    • Backup
    • Cisco
    • Nginx
    • Antivirus protection
    • DNS
    • Server Optimization
    • Data recovery
    • Apache
    • Spam and antispam
    • Data Compression
    • SAN
    • IPv6
    • Fidonet
    • IPTV
    • Shells
    • Administering domain names
  • Design
    • Interfaces
    • Web design
    • Working with sound
    • Usability
    • Graphic design
    • Design Games
    • Mobile App Design
    • Working with 3D-graphics
    • Typography
    • Working with video
    • Work with vector graphics
    • Accessibility
    • Prototyping
    • CGI (graphics)
    • Computer Animation
    • Working with icons
  • Control
    • Careers in the IT industry
    • Project management
    • Development Management
    • Personnel Management
    • Product Management
    • Start-up development
    • Managing the community
    • Service Desk
    • GTD
    • IT Terminology
    • Agile
    • Business Models
    • Legislation and IT-business
    • Sales management
    • CRM-systems
    • Product localization
    • ECM / EDS
    • Freelance
    • Venture investments
    • ERP-systems
    • Help Desk Software
    • Media management
    • Patenting
    • E-commerce management
    • Creative Commons
  • Marketing
    • Conferences
    • Promotion of games
    • Internet Marketing
    • Search Engine Optimization
    • Web Analytics
    • Monetize Web services
    • Content marketing
    • Monetization of IT systems
    • Monetize mobile apps
    • Mobile App Analytics
    • Growth Hacking
    • Branding
    • Monetize Games
    • Display ads
    • Contextual advertising
    • Increase Conversion Rate
  • Sundry
    • Reading room
    • Educational process in IT
    • Research and forecasts in IT
    • Finance in IT
    • Hakatonas
    • IT emigration
    • Education abroad
    • Lumber room
    • I'm on my way

We are preparing the perfect CSS

Hi Habr! 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. Not so long ago, I realized that working with CSS in all my applications is a pain for the developer and the user. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. Under the cut are my problems, a bunch of strange code and pitfalls on the way to the correct work with styles. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. 3r31285. We are preparing the perfect CSS online minifiers :
 3r? 31308. 3r3r1292.  3r? 31308. 3r31211. 3r31097. .component1__title {color: red}
.component2__title {color: green}
.component2__title_red {color: red}
3r31257. 3r31258. 3r3r1292.  3r? 31308. Why he could not? 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. The minifier is afraid that due to a change in the style declaration mode, something will break in you. For example, if the project will have this code:
 3r? 31308. 3r3r1292.  3r? 31308. 3r31211. 3r31114. 3r31115. Some weird title
3r? 31308. 3r31257. 3r31258. 3r3r1292.  3r? 31308. Because of you, the headline will turn red, and the online minifiers will leave the correct order of the styles declared and it will be green. Of course, you know that the intersection of component1__title and component2__title will never happen, because they are in different components. But how to say about it to the minifier? 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. Poryskav documentation, the ability to specify the context of the use of classes, I found only 3r3-31126. csso
. And there is no convenient solution for the webpack out of the box. To go further, we need a small bicycle. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. You need to combine the class names of each component into separate arrays and give it inside csso. Earlier, we generated minified class names using the following pattern: '[componentId]_[classNameId]'. So, class names can be combined simply by the first part of the name! 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. Attach the straps and write your own plugin:
 3r? 31308. 3r3r1292.  3r? 31308. 3r31211. 3r31212. /* webpack.config.js * /
3r? 31308. const cssoLoader = require ('path /to /cssoLoader'); 3r? 31308. /* * /
3r? 31308. module.exports = {
/* * /
plugins:[
/* */
new cssoLoader(),
],
}; 3r? 31308. 3r31257. 3r31258. 3r3r1292.  3r? 31308. 3r31211. 3r31212. /* cssoLoader.js * /
3r? 31308. const csso = require ('csso'); 3r? 31308. const RawSource = require ('webpack-sources /lib /RawSource'); 3r? 31308. const getScopes = require ('./helpers /getScopes'); 3r? 31308. 3r? 31308. const isCssFilename = filename => /.css$/.test (filename); 3r? 31308. 3r? 31308. module.exports = class cssoPlugin {
apply (compiler) {
compiler.hooks.compilation.tap ('csso-plugin', (compilation) => {
compilation.hooks.optimizeChunkAssets.tapAsync ('csso-plugin', (chunks, callback) => {
chunks.forEach ( (chunk) => {3r3-331308. //Run through all CSS files 3r3-331308. chunk.files.forEach ((filename) => {3r31-3030. if (! isCssFilename (filename)) {
return; . const asset = compilation.assets[filename]; 3r3-331308. const source = asset.source (); 3r-331308. 3r3-331308. //Create ast from the CSS file 3r330308. //Get the array of arrays with the combined class names 3r3-331308. Const scopes = getScopes (ast); 3r3-331308. 3r3-331308. //Compress ast
8. const {ast: compressedAst} = csso.compress (ast, {3r-31308. Usage: {3r-?33?308. scopes,
},
}); 3r? 31308. const minifiedCss = csso.syntax.generate (compressedAst); 3r? 31308. 3r? 31308. compilation.assets[filename]= new RawSource (minifiedCss); 3r? 31308.}); 3r? 31308.}); 3r? 31308. 3r? 31308. callback (); 3r? 31308.}); 3r? 31308.}); 3r? 31308.}
}
3r? 31308. /* If you want support for sourceMap, asynchronous minification and other amenities, their implementation can be found here https://github.com/zoobestik/csso-webpack-plugin "* /
3r31257. 3r31258.
 3r? 31308. 3r31211. 3r31212. /* getScopes.js * /3r331318. /*
Here lies the function,
which combines class names into
arrays. depending on the component to which the class belongs r3r31308. * /
3r? 31308. const csso = require ('csso'); 3r? 31308. 3r? 31308. const getComponentId = (className) => {3r-31308. const tokens = className.split ('_'); 3r? 31308. 3r? 31308. //For all classes whose names are
//differ from[componentId]_[classNameId],
//return the same component identifier
if (tokens.length! == 2) {
return 'default'; 3r? 31308.}
3r? 31308. return tokens[0]; 3r? 31308.}; 3r? 31308. 3r? 31308. module.exports = (ast) => {3r3-31308. const scopes = {}; 3r? 31308. 3r? 31308. //Run through all the selectors of classes 3r3-31308. csso.syntax.walk (ast, (node) => {3r3-31308. if (node.type! == 'ClassSelector') {3r-31308. return; 3r3-31308.} 3r331308. 3r331318. const componentId = getComponentId (node.name); 3r3-331308. 3r3-331308. 3a3-331308. 3a3-331308. (node.name); 3r3–31308.} 3r3–31308.}); 3r? 31308. 3r? 31308. return Object.values ​​(scopes); 3r? 31308.}; 3r? 31308. 3r31257. 3r31258. 3r3r1292.  3r? 31308. And it was not so difficult, right? Usually, such minification additionally compresses CSS by 3-6%. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. 3r31265. Was it worth it? 3r31266. 3r3r1292.  3r? 31308. Of course. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. In my applications, a quick hot-reload finally appeared, and the CSS began to be broken down by chunks and weigh on average 40% less. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. This will speed up site loading and reduce the time it takes to parse styles, which will affect not only users, but also SEO. 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. The article has greatly expanded, but I am glad that someone was able to roll it to the end. Thanks for your time! 3r3r1292.  3r? 31308. 3r3r1292.  3r? 31308. 3r31285. 3r31286.
3r3r1292.  3r? 31308. 3r31290. Materials used 3r31291. 3r3r1292.  3r? 31308. 3r31294.  3r? 31308. 3r31296. 3r31297. Reducing CSS bundle size 70% by
3r31299.  3r? 31308.
3r? 31308. 3r? 31308. 3r? 31308.
! function (e) {function t (t, n) {if (! (n in e)) {for (var r, a = e.document, i = a.scripts, o = i.length; o-- ;) if (-1! == i[o].src.indexOf (t)) {r = i[o]; break} if (! r) {r = a.createElement ("script"), r.type = "text /jаvascript", r.async =! ? r.defer =! ? r.src = t, r.charset = "UTF-8"; var d = function () {var e = a.getElementsByTagName ("script")[0]; e.parentNode.insertBefore (r, e)}; "[object Opera]" == e.opera? a.addEventListener? a.addEventListener ("DOMContentLoaded", d,! 1): e.attachEvent ("onload", d ): d ()}}} t ("//mediator.mail.ru/script/2820404/"""_mediator") () (); 3r? 31307. 3r? 31308.

It may be interesting

  • Comments
  • About article
  • Similar news
This publication has no comments.

weber

Author

25-11-2018, 08:39

Publication Date

ReactJS / VueJS

Category
  • Comments: 0
  • Views: 283
Smartphone access - a new era in access
Learn OpenGL. Lesson 6.4 - IBL. Mirror
Material design: Shape - tips for
Creating GIF animations using OpenCV
Learn OpenGL. Lesson 6.3 - IBL. Diffuse
Download configuration in FPGA via USB
Write a comment
Name:*
E-Mail:


Comments
Nice post! This is a very nice blog that I will definitively come back to more times this year! Thanks for informative post.Torrance Tax Accountant

Today, 15:51

raymond weber

Someone Sometimes with visits your blog regularly and recommended it in my experience to read as well. The way of writing is excellent and also the content is top-notch. Thanks for that insight you provide the readers! 123movies websites 
Today, 15:21

Legend SEO

Extremely intriguing online journal. A lot of web journals I see nowadays don't generally give anything that I'm keen on, however I'm most definitely inspired by this one. Recently felt that I would post and let you know.먹튀

Today, 15:14

raymond weber

Man's lives, such as uncontrolled huge amounts, definitely not while countries furthermore reefs, challenging to seismic disturbance upward perfect apply. เมล็ด กาแฟ คั่ว
Today, 14:54

nushra45

 The top five occupations were all medical and surgical jobs where workers ... as of May 2019, the most recent period for which data is available.


https://iptvbeast.net/
Today, 14:53

Jhon Smith

Adv
Website for web developers. New scripts, best ideas, programming tips. How to write a script for you here, we have a lot of information about various programming languages. You are a webmaster or a beginner programmer, it does not matter, useful articles will help to make your favorite business faster.

Login

Registration Forgot password