Finding Dead CSS – CSS Wizardry
17 January, 2018 Finding Dead CSS Written by Harry Roberts on CSS Wizardry. During a performance workshop I was running this week, I was reminded of a technique for finding dead CSS on a live site. Note that I’m purposely not using the phrase ‘unused CSS’, but ‘dead CSS’—the specific scenario I’m describing looks a little like this: Imagine you have a large, long-running project that contains hund
CSS Shorthand Syntax Considered an Anti-Pattern – CSS Wizardry
12 December, 2016 CSS Shorthand Syntax Considered an Anti-Pattern Written by Harry Roberts on CSS Wizardry. There’s a very small but surprisingly significant (and even more surprisingly frequent) issue I spot a lot in other peoples’ code, either when working directly with it, refactoring it, or auditing it: the use of shorthand syntax in CSS. Typically we would view shorthand syntax as a benefit:
BEMIT: Taking the BEM Naming Convention a Step Further – CSS Wizardry
5 August, 2015 BEMIT: Taking the BEM Naming Convention a Step Further Written by Harry Roberts on CSS Wizardry. Table of Contents Namespaces Responsive Suffixes Healthchecks Final Word Anybody who’s followed me or my work for any length of time will no doubt know that I’m a huge proponent of the BEM naming convention. What I’m about to talk about in this post is not an alternative or different nam
When to use @extend; when to use a mixin – CSS Wizardry
20 November, 2014 When to use @extend; when to use a mixin Written by Harry Roberts on CSS Wizardry. Table of Contents When to use @extend When to use a mixin tl;dr tl;dr;tl;dr This is a question I get asked a lot by my clients: When should we use a mixin, and when should we use @extend? There’s an old rule of thumb which states that mixins without arguments are bad—that mixins which just duplicat
The Specificity Graph – CSS Wizardry
29 October, 2014 The Specificity Graph Written by Harry Roberts on CSS Wizardry. Table of Contents A better shape Addendum – 26 November, 2014 As we all (should) probably know by now, specificity is is one of CSS’ most troublesome features, and is an area that soon becomes hard to manage on projects of any reasonable size. Specificity is a trait best avoided, which is why we don’t use IDs in CSS,
Code smells in CSS – CSS Wizardry
20 November, 2012 Code smells in CSS Written by Harry Roberts on CSS Wizardry. Table of Contents Undoing styles Magic numbers Qualified selectors Hard-coded/absolute values Brute forcing Dangerous selectors Reactive !important IDs Loose class names Final word Chris Coyier recently answered someone’s question: How can you tell if your CSS code smells? What are the signs that the code is sub-optiona
Advice to budding front-end developers – CSS Wizardry
5 August, 2014 Advice to budding front-end developers Written by Harry Roberts on CSS Wizardry. Table of Contents Disclaimers The problem with these kinds of question The ‘deep’ stuff Focus on the right thing Don’t rush it Don’t have a plan Don’t set a single goal The next thing Keep agile Keep caring Keep karma on your side Don’t assume that someone on the internet knows best The practical stuff
Hacks for dealing with specificity – CSS Wizardry
17 July, 2014 Hacks for dealing with specificity Written by Harry Roberts on CSS Wizardry. Table of Contents Low specificity IDs Featured case study: NHS Safely increasing specificity As we’re all probably well aware by now, specificity is one of the quickest ways to get yourself in a tangle when trying to scale a CSS project: even if you have the most considered source order, and your rulesets ca
Grouping related classes in your markup – CSS Wizardry
21 May, 2014 Grouping related classes in your markup Written by Harry Roberts on CSS Wizardry. Table of Contents How it works Scanning your code Featured case study: NHS Vim Validity Errors Extra bytes Teams JavaScript To use, or not to use? N.B. 2016-02-23 I no longer advise this technique—it proved far too problematic on teams where people we unfamiliar with the syntax. If you do wish to clearly
MindBEMding – getting your head ’round BEM syntax – CSS Wizardry
25 January, 2013 MindBEMding – getting your head ’round BEM syntax Written by Harry Roberts on CSS Wizardry. Table of Contents Featured case study: NHS One of the questions I get asked most frequently is what do -- and __ mean in your classes? The answer is thanks to BEM and Nicolas Gallagher… BEM – meaning block, element, modifier – is a front-end naming methodology thought up by the guys at Yand
Front-end performance for web designers and front-end developers – CSS Wizardry
20 January, 2013 Front-end performance for web designers and front-end developers Written by Harry Roberts on CSS Wizardry. Table of Contents The basics Styles at the top, scripts at the bottom Featured case study: NHS Make fewer requests Maximising parallelisation HTTP requests and DNS lookups DNS prefetching Further reading Resource prefetching Further reading CSS and performance Further reading
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
