JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
JavaScriptersCommunity to Connect, Share & Explore
http://www.javascripters.org
Email: [email protected]
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
The Absolute Beginner’s Guide to Sass
TOPIC
~ BY IMRAN SHAIKH & KARAN SHARMA
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
3
About JavaScriptersJavaScripters is an initiative taken for front-end engineers community to share and gain JavaScript basic and advance knowledge along with moto to connect all javascripters together.
We conduct technical discussion forums, sessions, workshops, trainings and knowledge sharing meet-ups around the city, for all front-end / UI engineers on core & advance(object oriented) level javascript concepts, along with all latest javascript frameworks like AngularJS, NodeJs, emberJs, TypeScript, ReactJs technologies by experts.
• Since : April 2015
• Members : Around 2500+
• Speakers & Mentors : 17
• Events/ Meetup Conducted: 5
• Feature Planned Events : 10 events confirmed till December 2016
Our initiatives:
WhatsApp Group (2)Meetup Groups JavaScriptes PuneJs HTML5-Web-Mobile-Development-Meetup Pune-UX-UI-Engineers WebF
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
List of upcoming events
4
1. Scalable JavaScript Design Patterns 2. Visualise your application data with d3.js and
angular3. Developing javascript code for efficiency4. Introduction of Design thinking for front-end
Engineers5. React JS with Material design6. Introduction to Angular 2.x7. Practice with TypeSpcript8. Introduction to ES69. Automated javascript workflow with Gulp10.NodeJs practice session11. Total (3) online webinar under planning
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
Our Sponsor
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
Imran Shaikh will cover (CSS Specificity Rules)Speaker Introduction : Imran Shaikh working as Principal UI Engineer in VUClip, with 11 and half years of Web development experience and certified usability analyst from Human factor international Inc, USA.
For more details visit: http://www.shaikh-imran.comLinkedIn : https://in.linkedin.com/in/shaikhimran786Email : [email protected]
Karan Sharma will cover (Sass/ Scss)Speaker Introduction : Karan Sharma is passionate Web developer and student, love to do research in web development currently working with Signzy, he recently been involved as Firefox student ambassador. Contributor to jQuery foundation projects. Also modifies bootstrap code and an active open source contributor. Check him out on github.
LinkedIn : https://in.linkedin.com/in/karan1276Email: [email protected]
About Speaker
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
What is Specificity?
“If two selectors apply to the same element, the one with higher specificity wins.”
Specificity hierarchyEvery selector has its place in the specificity hierarchy. There are four distinct categories which define the specificity level of a given selector:
1. Inline styles (Presence of style in document).An inline style lives within your XHTML document. It is attached directly to the element to be styled.
E.g. <h1 style="color: #fff;">
2. IDs (# of ID selectors)ID is an identifier for your page elements,
such as #div.
3. Classes, attributes and pseudo-classes (# of class selectors).
This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
4. Elements and pseudo-elements (# of Element (type) selectors).Including for instance :before and :after.
CSS Specificity
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
CSS Specificity Rules
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
CSS Specificity Rules Example 1
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
CSS Specificity Rules Example 2
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
CSS Specificity Rules Example 3
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
CSS Specificity Rules Example 4
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
CSS Specificity Rules Example 5
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
• The universal selector (*) has no specificity value (0,0,0,0)
• Pseudo-elements (e.g. :first-line) get 0,0,0,1 unlike their psuedo-class brethren which get 0,0,1,0
• The pseudo-class :not() adds no specificity by itself, only what's inside it's parentheses.
• The !important value appended a CSS property value is an automatic win. It overrides even inline styles from the markup. The only way an !important value can be overridden is with another !important rule declared later in the CSS and with equal or great specificity value otherwise. You could think of it as adding 1,0,0,0,0 to the specificity value.
Points to Remember
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
● CSS specificity calculator https://specificity.keegan.st/
● Smashing Magazine has a pretty comprehensive article (http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/) on CSS Specificity
● W3 spec on specificity in CSS3● IE Quirks (try viewing this page in Fx and then IE)
● Fuzzy Specificity Hack (http://fu2k.org/alex/css/hacks/fuzzyspecificity): IE (even beta 8!) and older Opera browsers have a bug honoring the correct
Resources
JS
Java
Scri
pter
swww.javascripters.org
JS
Java
Scri
pter
swww.javascripters.org
Register for upcoming events
16
1. Scalable JavaScript Design Patterns 2. Visualise your application data with d3.js and
angular3. Developing javascript code for efficiency4. Introduction of Design thinking for front-end
Engineers5. React JS with Material design6. Introduction to Angular 2.x7. Practice with TypeSpcript8. Introduction to ES69. Automated javascript workflow with Gulp10.NodeJs practice session11. Total (3) online webinar under planning